diff --git a/.gitignore b/.gitignore
index 3efc9c52..ac15926b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,4 @@ dist-ssr
pnpm-debug
.idea
-.history
\ No newline at end of file
+.history
diff --git a/build/vite/index.ts b/build/vite/index.ts
index 304ce0d5..dcec1aed 100644
--- a/build/vite/index.ts
+++ b/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) {
@@ -39,11 +39,14 @@ export function createVitePlugins(VITE_APP_TITLE: string) {
imports: [
'vue',
'vue-router',
+ // 可额外添加需要 autoImport 的组件
{
'@/hooks/web/useI18n': ['useI18n'],
- '@/hooks/web/useXTable': ['useXTable'],
'@/hooks/web/useMessage': ['useMessage'],
+ '@/hooks/web/useXTable': ['useXTable'],
'@/hooks/web/useVxeCrudSchemas': ['useVxeCrudSchemas'],
+ '@/hooks/web/useTable': ['useTable'],
+ '@/hooks/web/useCrudSchemas': ['useCrudSchemas'],
'@/utils/formRules': ['required'],
'@/utils/dict': ['DICT_TYPE']
}
@@ -92,8 +95,6 @@ export function createVitePlugins(VITE_APP_TITLE: string) {
ext: '.gz', // 生成的压缩包后缀
deleteOriginFile: false //压缩后是否删除源文件
}),
- ViteEjsPlugin({
- title: VITE_APP_TITLE
- })
+ ViteEjsPlugin()
]
}
diff --git a/index.html b/index.html
index cce65bdc..8cfcbefa 100644
--- a/index.html
+++ b/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>
diff --git a/package.json b/package.json
index d067560f..683d09eb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"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,
@@ -29,12 +29,14 @@
"@form-create/designer": "^3.1.0",
"@form-create/element-ui": "^3.1.17",
"@iconify/iconify": "^3.1.0",
+ "@videojs-player/vue": "^1.0.0",
"@vueuse/core": "^9.13.0",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.10",
"@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 +45,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",
@@ -57,62 +59,63 @@
"qs": "^6.11.1",
"steady-xml": "^0.1.0",
"url": "^0.11.0",
+ "video.js": "^8.0.4",
"vue": "3.2.47",
"vue-i18n": "9.2.2",
"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 +128,7 @@
"windicss": "^3.5.6"
},
"engines": {
- "node": ">=16.0.0"
+ "node": ">=16.18.0"
},
"license": "MIT",
"repository": {
diff --git a/src/api/bpm/definition/index.ts b/src/api/bpm/definition/index.ts
index 477d6729..c0e51fab 100644
--- a/src/api/bpm/definition/index.ts
+++ b/src/api/bpm/definition/index.ts
@@ -1,19 +1,19 @@
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
diff --git a/src/api/bpm/form/index.ts b/src/api/bpm/form/index.ts
index c745201f..142ed24c 100644
--- a/src/api/bpm/form/index.ts
+++ b/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'
})
diff --git a/src/api/bpm/model/index.ts b/src/api/bpm/model/index.ts
index 0335a3db..2e1d4e64 100644
--- a/src/api/bpm/model/index.ts
+++ b/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 })
}
diff --git a/src/api/bpm/processInstance/index.ts b/src/api/bpm/processInstance/index.ts
index d48253c3..95591ae3 100644
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -4,6 +4,7 @@ export type Task = {
id: string
name: string
}
+
export type ProcessInstanceVO = {
id: number
name: string
diff --git a/src/api/bpm/userGroup/index.ts b/src/api/bpm/userGroup/index.ts
index 88ee9619..035762bf 100644
--- a/src/api/bpm/userGroup/index.ts
+++ b/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' })
}
diff --git a/src/api/infra/apiAccessLog/index.ts b/src/api/infra/apiAccessLog/index.ts
index b46199e4..c6b4b45f 100644
--- a/src/api/infra/apiAccessLog/index.ts
+++ b/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 })
}
diff --git a/src/api/infra/apiErrorLog/index.ts b/src/api/infra/apiErrorLog/index.ts
index 06515c36..59ee2143 100644
--- a/src/api/infra/apiErrorLog/index.ts
+++ b/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
diff --git a/src/api/infra/codegen/index.ts b/src/api/infra/codegen/index.ts
index 54f00ff0..64701efe 100644
--- a/src/api/infra/codegen/index.ts
+++ b/src/api/infra/codegen/index.ts
@@ -1,57 +1,123 @@
import request from '@/config/axios'
-import type { CodegenUpdateReqVO, CodegenCreateListReqVO } from './types'
+
+export type CodegenTableVO = {
+ id: number
+ tableId: number
+ isParentMenuIdValid: boolean
+ dataSourceConfigId: number
+ scene: number
+ tableName: string
+ tableComment: string
+ remark: string
+ moduleName: string
+ businessName: string
+ className: string
+ classComment: string
+ author: string
+ createTime: Date
+ updateTime: Date
+ templateType: number
+ parentMenuId: number
+}
+
+export type CodegenColumnVO = {
+ id: number
+ tableId: number
+ columnName: string
+ dataType: string
+ columnComment: string
+ nullable: number
+ primaryKey: number
+ autoIncrement: string
+ ordinalPosition: number
+ javaType: string
+ javaField: string
+ dictType: string
+ example: string
+ createOperation: number
+ updateOperation: number
+ listOperation: number
+ listOperationCondition: string
+ listOperationResult: number
+ htmlType: string
+}
+
+export type DatabaseTableVO = {
+ name: string
+ comment: string
+}
+
+export type CodegenDetailVO = {
+ table: CodegenTableVO
+ columns: CodegenColumnVO[]
+}
+
+export type CodegenPreviewVO = {
+ filePath: string
+ code: string
+}
+
+export type CodegenUpdateReqVO = {
+ table: CodegenTableVO | any
+ columns: CodegenColumnVO[]
+}
+
+export type CodegenCreateListReqVO = {
+ dataSourceConfigId: number
+ tableNames: string[]
+}
// 查询列表代码生成表定义
-export const getCodegenTablePageApi = (params) => {
+export const getCodegenTablePage = (params: PageParam) => {
return request.get({ url: '/infra/codegen/table/page', params })
}
// 查询详情代码生成表定义
-export const getCodegenTableApi = (id: number) => {
+export const getCodegenTable = (id: number) => {
return request.get({ url: '/infra/codegen/detail?tableId=' + id })
}
// 新增代码生成表定义
-export const createCodegenTableApi = (data: CodegenCreateListReqVO) => {
+export const createCodegenTable = (data: CodegenCreateListReqVO) => {
return request.post({ url: '/infra/codegen/create', data })
}
// 修改代码生成表定义
-export const updateCodegenTableApi = (data: CodegenUpdateReqVO) => {
+export const updateCodegenTable = (data: CodegenUpdateReqVO) => {
return request.put({ url: '/infra/codegen/update', data })
}
// 基于数据库的表结构，同步数据库的表和字段定义
-export const syncCodegenFromDBApi = (id: number) => {
+export const syncCodegenFromDB = (id: number) => {
return request.put({ url: '/infra/codegen/sync-from-db?tableId=' + id })
}
// 基于 SQL 建表语句，同步数据库的表和字段定义
-export const syncCodegenFromSQLApi = (id: number, sql: string) => {
+export const syncCodegenFromSQL = (id: number, sql: string) => {
return request.put({ url: '/infra/codegen/sync-from-sql?tableId=' + id + '&sql=' + sql })
}
// 预览生成代码
-export const previewCodegenApi = (id: number) => {
+export const previewCodegen = (id: number) => {
return request.get({ url: '/infra/codegen/preview?tableId=' + id })
}
// 下载生成代码
-export const downloadCodegenApi = (id: number) => {
+export const downloadCodegen = (id: number) => {
return request.download({ url: '/infra/codegen/download?tableId=' + id })
}
// 获得表定义
-export const getSchemaTableListApi = (params) => {
+export const getSchemaTableList = (params) => {
return request.get({ url: '/infra/codegen/db/table/list', params })
}
// 基于数据库的表结构，创建代码生成器的表定义
-export const createCodegenListApi = (data) => {
+export const createCodegenList = (data) => {
return request.post({ url: '/infra/codegen/create-list', data })
}
// 删除代码生成表定义
-export const deleteCodegenTableApi = (id: number) => {
+export const deleteCodegenTable = (id: number) => {
return request.delete({ url: '/infra/codegen/delete?tableId=' + id })
}
diff --git a/src/api/infra/codegen/types.ts b/src/api/infra/codegen/types.ts
deleted file mode 100644
index be6a66ed..00000000
--- a/src/api/infra/codegen/types.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-export type CodegenTableVO = {
- id: number
- tableId: number
- isParentMenuIdValid: boolean
- dataSourceConfigId: number
- scene: number
- tableName: string
- tableComment: string
- remark: string
- moduleName: string
- businessName: string
- className: string
- classComment: string
- author: string
- createTime: Date
- updateTime: Date
- templateType: number
- parentMenuId: number
-}
-
-export type CodegenColumnVO = {
- id: number
- tableId: number
- columnName: string
- dataType: string
- columnComment: string
- nullable: number
- primaryKey: number
- autoIncrement: string
- ordinalPosition: number
- javaType: string
- javaField: string
- dictType: string
- example: string
- createOperation: number
- updateOperation: number
- listOperation: number
- listOperationCondition: string
- listOperationResult: number
- htmlType: string
-}
-export type DatabaseTableVO = {
- name: string
- comment: string
-}
-export type CodegenDetailVO = {
- table: CodegenTableVO
- columns: CodegenColumnVO[]
-}
-export type CodegenPreviewVO = {
- filePath: string
- code: string
-}
-export type CodegenUpdateReqVO = {
- table: CodegenTableVO
- columns: CodegenColumnVO[]
-}
-export type CodegenCreateListReqVO = {
- dataSourceConfigId: number
- tableNames: string[]
-}
diff --git a/src/api/infra/config/index.ts b/src/api/infra/config/index.ts
index c6d3772e..07fb52fd 100644
--- a/src/api/infra/config/index.ts
+++ b/src/api/infra/config/index.ts
@@ -12,13 +12,6 @@ export interface ConfigVO {
createTime: Date
}
-export interface ConfigExportReqVO {
- name?: string
- key?: string
- type?: number
- createTime?: Date[]
-}
-
// 查询参数列表
export const getConfigPage = (params: PageParam) => {
return request.get({ url: '/infra/config/page', params })
@@ -50,6 +43,6 @@ export const deleteConfig = (id: number) => {
}
// 导出参数
-export const exportConfigApi = (params: ConfigExportReqVO) => {
+export const exportConfigApi = (params) => {
return request.download({ url: '/infra/config/export', params })
}
diff --git a/src/api/infra/dataSourceConfig/index.ts b/src/api/infra/dataSourceConfig/index.ts
index c0f9f624..b413f345 100644
--- a/src/api/infra/dataSourceConfig/index.ts
+++ b/src/api/infra/dataSourceConfig/index.ts
@@ -1,35 +1,35 @@
import request from '@/config/axios'
export interface DataSourceConfigVO {
- id: number
+ id: number | undefined
name: string
url: string
username: string
password: string
- createTime: Date
-}
-
-// 查询数据源配置列表
-export const getDataSourceConfigListApi = () => {
- return request.get({ url: '/infra/data-source-config/list' })
-}
-
-// 查询数据源配置详情
-export const getDataSourceConfigApi = (id: number) => {
- return request.get({ url: '/infra/data-source-config/get?id=' + id })
+ createTime?: Date
}
// 新增数据源配置
-export const createDataSourceConfigApi = (data: DataSourceConfigVO) => {
+export const createDataSourceConfig = (data: DataSourceConfigVO) => {
return request.post({ url: '/infra/data-source-config/create', data })
}
// 修改数据源配置
-export const updateDataSourceConfigApi = (data: DataSourceConfigVO) => {
+export const updateDataSourceConfig = (data: DataSourceConfigVO) => {
return request.put({ url: '/infra/data-source-config/update', data })
}
// 删除数据源配置
-export const deleteDataSourceConfigApi = (id: number) => {
+export const deleteDataSourceConfig = (id: number) => {
return request.delete({ url: '/infra/data-source-config/delete?id=' + id })
}
+
+// 查询数据源配置详情
+export const getDataSourceConfig = (id: number) => {
+ return request.get({ url: '/infra/data-source-config/get?id=' + id })
+}
+
+// 查询数据源配置列表
+export const getDataSourceConfigList = () => {
+ return request.get({ url: '/infra/data-source-config/list' })
+}
diff --git a/src/api/infra/fileList/index.ts b/src/api/infra/file/index.ts
similarity index 54%
rename from src/api/infra/fileList/index.ts
rename to src/api/infra/file/index.ts
index 48b3c991..f64bc0d6 100644
--- a/src/api/infra/fileList/index.ts
+++ b/src/api/infra/file/index.ts
@@ -1,16 +1,5 @@
import request from '@/config/axios'
-export interface FileVO {
- id: number
- configId: number
- path: string
- name: string
- url: string
- size: string
- type: string
- createTime: Date
-}
-
export interface FilePageReqVO extends PageParam {
path?: string
type?: string
@@ -18,11 +7,11 @@ export interface FilePageReqVO extends PageParam {
}
// 查询文件列表
-export const getFilePageApi = (params: FilePageReqVO) => {
+export const getFilePage = (params: FilePageReqVO) => {
return request.get({ url: '/infra/file/page', params })
}
// 删除文件
-export const deleteFileApi = (id: number) => {
+export const deleteFile = (id: number) => {
return request.delete({ url: '/infra/file/delete?id=' + id })
}
diff --git a/src/api/infra/fileConfig/index.ts b/src/api/infra/fileConfig/index.ts
index 9a4f625c..b72f18b7 100644
--- a/src/api/infra/fileConfig/index.ts
+++ b/src/api/infra/fileConfig/index.ts
@@ -13,6 +13,7 @@ export interface FileClientConfig {
accessSecret?: string
domain: string
}
+
export interface FileConfigVO {
id: number
name: string
@@ -24,43 +25,37 @@ export interface FileConfigVO {
createTime: Date
}
-export interface FileConfigPageReqVO extends PageParam {
- name?: string
- storage?: number
- createTime?: Date[]
-}
-
// 查询文件配置列表
-export const getFileConfigPageApi = (params: FileConfigPageReqVO) => {
+export const getFileConfigPage = (params: PageParam) => {
return request.get({ url: '/infra/file-config/page', params })
}
// 查询文件配置详情
-export const getFileConfigApi = (id: number) => {
+export const getFileConfig = (id: number) => {
return request.get({ url: '/infra/file-config/get?id=' + id })
}
// 更新文件配置为主配置
-export const updateFileConfigMasterApi = (id: number) => {
+export const updateFileConfigMaster = (id: number) => {
return request.put({ url: '/infra/file-config/update-master?id=' + id })
}
// 新增文件配置
-export const createFileConfigApi = (data: FileConfigVO) => {
+export const createFileConfig = (data: FileConfigVO) => {
return request.post({ url: '/infra/file-config/create', data })
}
// 修改文件配置
-export const updateFileConfigApi = (data: FileConfigVO) => {
+export const updateFileConfig = (data: FileConfigVO) => {
return request.put({ url: '/infra/file-config/update', data })
}
// 删除文件配置
-export const deleteFileConfigApi = (id: number) => {
+export const deleteFileConfig = (id: number) => {
return request.delete({ url: '/infra/file-config/delete?id=' + id })
}
// 测试文件配置
-export const testFileConfigApi = (id: number) => {
+export const testFileConfig = (id: number) => {
return request.get({ url: '/infra/file-config/test?id=' + id })
}
diff --git a/src/api/infra/job/index.ts b/src/api/infra/job/index.ts
index 63f15da0..c1398d07 100644
--- a/src/api/infra/job/index.ts
+++ b/src/api/infra/job/index.ts
@@ -13,50 +13,38 @@ export interface JobVO {
createTime: Date
}
-export interface JobPageReqVO extends PageParam {
- name?: string
- status?: number
- handlerName?: string
-}
-
-export interface JobExportReqVO {
- name?: string
- status?: number
- handlerName?: string
-}
-
// 任务列表
-export const getJobPageApi = (params: JobPageReqVO) => {
+export const getJobPage = (params: PageParam) => {
return request.get({ url: '/infra/job/page', params })
}
// 任务详情
-export const getJobApi = (id: number) => {
+export const getJob = (id: number) => {
return request.get({ url: '/infra/job/get?id=' + id })
}
// 新增任务
-export const createJobApi = (data: JobVO) => {
+export const createJob = (data: JobVO) => {
return request.post({ url: '/infra/job/create', data })
}
// 修改定时任务调度
-export const updateJobApi = (data: JobVO) => {
+export const updateJob = (data: JobVO) => {
return request.put({ url: '/infra/job/update', data })
}
// 删除定时任务调度
-export const deleteJobApi = (id: number) => {
+export const deleteJob = (id: number) => {
return request.delete({ url: '/infra/job/delete?id=' + id })
}
// 导出定时任务调度
-export const exportJobApi = (params: JobExportReqVO) => {
+export const exportJob = (params) => {
return request.download({ url: '/infra/job/export-excel', params })
}
// 任务状态修改
-export const updateJobStatusApi = (id: number, status: number) => {
+export const updateJobStatus = (id: number, status: number) => {
const params = {
id,
status
@@ -70,6 +58,6 @@ export const runJobApi = (id: number) => {
}
// 获得定时任务的下 n 次执行时间
-export const getJobNextTimesApi = (id: number) => {
+export const getJobNextTimes = (id: number) => {
return request.get({ url: '/infra/job/get_next_times?id=' + id })
}
diff --git a/src/api/infra/jobLog/index.ts b/src/api/infra/jobLog/index.ts
index 84b74fbd..f429cd9e 100644
--- a/src/api/infra/jobLog/index.ts
+++ b/src/api/infra/jobLog/index.ts
@@ -14,34 +14,18 @@ export interface JobLogVO {
createTime: string
}
-export interface JobLogPageReqVO extends PageParam {
- jobId?: number
- handlerName?: string
- beginTime?: string
- endTime?: string
- status?: number
-}
-
-export interface JobLogExportReqVO {
- jobId?: number
- handlerName?: string
- beginTime?: string
- endTime?: string
- status?: number
-}
-
// 任务日志列表
-export const getJobLogPageApi = (params: JobLogPageReqVO) => {
+export const getJobLogPage = (params: PageParam) => {
return request.get({ url: '/infra/job-log/page', params })
}
// 任务日志详情
-export const getJobLogApi = (id: number) => {
+export const getJobLog = (id: number) => {
return request.get({ url: '/infra/job-log/get?id=' + id })
}
// 导出定时任务日志
-export const exportJobLogApi = (params: JobLogExportReqVO) => {
+export const exportJobLog = (params) => {
return request.download({
url: '/infra/job-log/export-excel',
params
diff --git a/src/api/mall/product/category.ts b/src/api/mall/product/category.ts
new file mode 100644
index 00000000..7ae81285
--- /dev/null
+++ b/src/api/mall/product/category.ts
@@ -0,0 +1,60 @@
+import request from '@/config/axios'
+
+/**
+ * 产品分类
+ */
+export interface CategoryVO {
+ /**
+ * 分类编号
+ */
+ id?: number
+ /**
+ * 父分类编号
+ */
+ parentId?: number
+ /**
+ * 分类名称
+ */
+ name: string
+ /**
+ * 分类图片
+ */
+ picUrl: string
+ /**
+ * 分类排序
+ */
+ sort?: number
+ /**
+ * 分类描述
+ */
+ description?: string
+ /**
+ * 开启状态
+ */
+ status: number
+}
+
+// 创建商品分类
+export const createCategory = (data: CategoryVO) => {
+ return request.post({ url: '/product/category/create', data })
+}
+
+// 更新商品分类
+export const updateCategory = (data: CategoryVO) => {
+ return request.put({ url: '/product/category/update', data })
+}
+
+// 删除商品分类
+export const deleteCategory = (id: number) => {
+ return request.delete({ url: `/product/category/delete?id=${id}` })
+}
+
+// 获得商品分类
+export const getCategory = (id: number) => {
+ return request.get({ url: `/product/category/get?id=${id}` })
+}
+
+// 获得商品分类列表
+export const getCategoryList = (params: any) => {
+ return request.get({ url: '/product/category/list', params })
+}
diff --git a/src/api/mall/product/property.ts b/src/api/mall/product/property.ts
new file mode 100644
index 00000000..01c79f9f
--- /dev/null
+++ b/src/api/mall/product/property.ts
@@ -0,0 +1,103 @@
+import request from '@/config/axios'
+
+/**
+ * 商品属性
+ */
+export interface PropertyVO {
+ id?: number
+ /** 名称 */
+ name: string
+ /** 备注 */
+ remark?: string
+}
+
+/**
+ * 属性值
+ */
+export interface PropertyValueVO {
+ id?: number
+ /** 属性项的编号 */
+ propertyId?: number
+ /** 名称 */
+ name: string
+ /** 备注 */
+ remark?: string
+}
+
+/**
+ * 商品属性值的明细
+ */
+export interface PropertyValueDetailVO {
+ /** 属性项的编号 */
+ propertyId: number // 属性的编号
+ /** 属性的名称 */
+ propertyName: string
+ /** 属性值的编号 */
+ valueId: number
+ /** 属性值的名称 */
+ valueName: string
+}
+
+// ------------------------ 属性项 -------------------
+
+// 创建属性项
+export const createProperty = (data: PropertyVO) => {
+ return request.post({ url: '/product/property/create', data })
+}
+
+// 更新属性项
+export const updateProperty = (data: PropertyVO) => {
+ return request.put({ url: '/product/property/update', data })
+}
+
+// 删除属性项
+export const deleteProperty = (id: number) => {
+ return request.delete({ url: `/product/property/delete?id=${id}` })
+}
+
+// 获得属性项
+export const getProperty = (id: number): Promise<PropertyVO> => {
+ return request.get({ url: `/product/property/get?id=${id}` })
+}
+
+// 获得属性项分页
+export const getPropertyPage = (params: PageParam) => {
+ return request.get({ url: '/product/property/page', params })
+}
+
+// 获得属性项列表
+export const getPropertyList = (params: any) => {
+ return request.get({ url: '/product/property/list', params })
+}
+
+// 获得属性项列表
+export const getPropertyListAndValue = (params: any) => {
+ return request.get({ url: '/product/property/get-value-list', params })
+}
+
+// ------------------------ 属性值 -------------------
+
+// 获得属性值分页
+export const getPropertyValuePage = (params: PageParam & any) => {
+ return request.get({ url: '/product/property/value/page', params })
+}
+
+// 获得属性值
+export const getPropertyValue = (id: number): Promise<PropertyValueVO> => {
+ return request.get({ url: `/product/property/value/get?id=${id}` })
+}
+
+// 创建属性值
+export const createPropertyValue = (data: PropertyValueVO) => {
+ return request.post({ url: '/product/property/value/create', data })
+}
+
+// 更新属性值
+export const updatePropertyValue = (data: PropertyValueVO) => {
+ return request.put({ url: '/product/property/value/update', data })
+}
+
+// 删除属性值
+export const deletePropertyValue = (id: number) => {
+ return request.delete({ url: `/product/property/value/delete?id=${id}` })
+}
diff --git a/src/api/mp/account/index.ts b/src/api/mp/account/index.ts
index cbdb1422..d641ef3c 100644
--- a/src/api/mp/account/index.ts
+++ b/src/api/mp/account/index.ts
@@ -1,5 +1,10 @@
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' })
}
diff --git a/src/api/mp/message/index.ts b/src/api/mp/message/index.ts
index 8b7d3cbd..ad9b95dd 100644
--- a/src/api/mp/message/index.ts
+++ b/src/api/mp/message/index.ts
@@ -1,7 +1,7 @@
import request from '@/config/axios'
// 获得公众号消息分页
-export const getMessagePage = (query) => {
+export const getMessagePage = (query: PageParam) => {
return request.get({
url: '/mp/message/page',
params: query
diff --git a/src/api/mp/tag/index.ts b/src/api/mp/tag/index.ts
index e681e2e1..50183a51 100644
--- a/src/api/mp/tag/index.ts
+++ b/src/api/mp/tag/index.ts
@@ -1,7 +1,14 @@
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
})
diff --git a/src/api/pay/merchant/index.ts b/src/api/pay/merchant/index.ts
index b4b6ba51..bfb8f5e4 100644
--- a/src/api/pay/merchant/index.ts
+++ b/src/api/pay/merchant/index.ts
@@ -29,17 +29,17 @@ export interface MerchantExportReqVO {
}
// 查询列表支付商户
-export const getMerchantPageApi = (params: MerchantPageReqVO) => {
+export const getMerchantPage = (params: MerchantPageReqVO) => {
return request.get({ url: '/pay/merchant/page', params })
}
// 查询详情支付商户
-export const getMerchantApi = (id: number) => {
+export const getMerchant = (id: number) => {
return request.get({ url: '/pay/merchant/get?id=' + id })
}
// 根据商户名称搜索商户列表
-export const getMerchantListByNameApi = (name: string) => {
+export const getMerchantListByName = (name: string) => {
return request.get({
url: '/pay/merchant/list-by-name?id=',
params: {
@@ -49,26 +49,27 @@ export const getMerchantListByNameApi = (name: string) => {
}
// 新增支付商户
-export const createMerchantApi = (data: MerchantVO) => {
+export const createMerchant = (data: MerchantVO) => {
return request.post({ url: '/pay/merchant/create', data })
}
// 修改支付商户
-export const updateMerchantApi = (data: MerchantVO) => {
+export const updateMerchant = (data: MerchantVO) => {
return request.put({ url: '/pay/merchant/update', data })
}
// 删除支付商户
-export const deleteMerchantApi = (id: number) => {
+export const deleteMerchant = (id: number) => {
return request.delete({ url: '/pay/merchant/delete?id=' + id })
}
// 导出支付商户
-export const exportMerchantApi = (params: MerchantExportReqVO) => {
+export const exportMerchant = (params: MerchantExportReqVO) => {
return request.download({ url: '/pay/merchant/export-excel', params })
}
+
// 支付商户状态修改
-export const changeMerchantStatusApi = (id: number, status: number) => {
+export const updateMerchantStatus = (id: number, status: number) => {
const data = {
id,
status
diff --git a/src/api/system/area/index.ts b/src/api/system/area/index.ts
index 7d8a9d7c..e91a4997 100644
--- a/src/api/system/area/index.ts
+++ b/src/api/system/area/index.ts
@@ -1,15 +1,11 @@
-import request from '@/config/axios/request'
+import request from '@/config/axios'
// 获得地区树
-export const getAreaTree = async (content?: any) => {
- return await request.get({
- url: '/system/area/tree',
- params: content
- })
+export const getAreaTree = async () => {
+ return await request.get({ url: '/system/area/tree' })
}
+
// 获得 IP 对应的地区名
-export const getAreaByIp = async (ip) => {
- return await request.get({
- url: '/system/area/get-by-ip?ip=' + ip
- })
+export const getAreaByIp = async (ip: string) => {
+ return await request.get({ url: '/system/area/get-by-ip?ip=' + ip })
}
diff --git a/src/api/system/dept/index.ts b/src/api/system/dept/index.ts
index d66de3f1..e9c31fd7 100644
--- a/src/api/system/dept/index.ts
+++ b/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' })
}
diff --git a/src/api/system/dict/dict.data.ts b/src/api/system/dict/dict.data.ts
index fd97a2dc..6d981326 100644
--- a/src/api/system/dict/dict.data.ts
+++ b/src/api/system/dict/dict.data.ts
@@ -1,36 +1,49 @@
import request from '@/config/axios'
-import type { DictDataVO, DictDataPageReqVO, DictDataExportReqVO } from './types'
+
+export type DictDataVO = {
+ id: number | undefined
+ sort: number | undefined
+ label: string
+ value: string
+ dictType: string
+ status: number
+ colorType: string
+ cssClass: string
+ remark: string
+ createTime: Date
+}
// 查询字典数据（精简)列表
-export const listSimpleDictDataApi = () => {
+export const listSimpleDictData = () => {
return request.get({ url: '/system/dict-data/list-all-simple' })
}
// 查询字典数据列表
-export const getDictDataPageApi = (params: DictDataPageReqVO) => {
+export const getDictDataPage = (params: PageParam) => {
return request.get({ url: '/system/dict-data/page', params })
}
// 查询字典数据详情
-export const getDictDataApi = (id: number) => {
+export const getDictData = (id: number) => {
return request.get({ url: '/system/dict-data/get?id=' + id })
}
// 新增字典数据
-export const createDictDataApi = (data: DictDataVO) => {
+export const createDictData = (data: DictDataVO) => {
return request.post({ url: '/system/dict-data/create', data })
}
// 修改字典数据
-export const updateDictDataApi = (data: DictDataVO) => {
+export const updateDictData = (data: DictDataVO) => {
return request.put({ url: '/system/dict-data/update', data })
}
// 删除字典数据
-export const deleteDictDataApi = (id: number) => {
+export const deleteDictData = (id: number) => {
return request.delete({ url: '/system/dict-data/delete?id=' + id })
}
+
// 导出字典类型数据
-export const exportDictDataApi = (params: DictDataExportReqVO) => {
+export const exportDictDataApi = (params) => {
return request.get({ url: '/system/dict-data/export', params })
}
diff --git a/src/api/system/dict/dict.type.ts b/src/api/system/dict/dict.type.ts
index 22e6411e..ed2969f1 100644
--- a/src/api/system/dict/dict.type.ts
+++ b/src/api/system/dict/dict.type.ts
@@ -1,36 +1,44 @@
import request from '@/config/axios'
-import type { DictTypeVO, DictTypePageReqVO, DictTypeExportReqVO } from './types'
+
+export type DictTypeVO = {
+ id: number | undefined
+ name: string
+ type: string
+ status: number
+ remark: string
+ createTime: Date
+}
// 查询字典（精简)列表
-export const listSimpleDictTypeApi = () => {
+export const getSimpleDictTypeList = () => {
return request.get({ url: '/system/dict-type/list-all-simple' })
}
// 查询字典列表
-export const getDictTypePageApi = (params: DictTypePageReqVO) => {
+export const getDictTypePage = (params: PageParam) => {
return request.get({ url: '/system/dict-type/page', params })
}
// 查询字典详情
-export const getDictTypeApi = (id: number) => {
+export const getDictType = (id: number) => {
return request.get({ url: '/system/dict-type/get?id=' + id })
}
// 新增字典
-export const createDictTypeApi = (data: DictTypeVO) => {
+export const createDictType = (data: DictTypeVO) => {
return request.post({ url: '/system/dict-type/create', data })
}
// 修改字典
-export const updateDictTypeApi = (data: DictTypeVO) => {
+export const updateDictType = (data: DictTypeVO) => {
return request.put({ url: '/system/dict-type/update', data })
}
// 删除字典
-export const deleteDictTypeApi = (id: number) => {
+export const deleteDictType = (id: number) => {
return request.delete({ url: '/system/dict-type/delete?id=' + id })
}
// 导出字典类型
-export const exportDictTypeApi = (params: DictTypeExportReqVO) => {
+export const exportDictType = (params) => {
return request.get({ url: '/system/dict-type/export', params })
}
diff --git a/src/api/system/dict/types.ts b/src/api/system/dict/types.ts
deleted file mode 100644
index b630dccb..00000000
--- a/src/api/system/dict/types.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-export type DictTypeVO = {
- id: number
- name: string
- type: string
- status: number
- remark: string
- createTime: Date
-}
-
-export type DictTypePageReqVO = {
- name: string
- type: string
- status: number
- createTime: Date[]
-}
-
-export type DictTypeExportReqVO = {
- name: string
- type: string
- status: number
- createTime: Date[]
-}
-
-export type DictDataVO = {
- id: number
- sort: number
- label: string
- value: string
- dictType: string
- status: number
- colorType: string
- cssClass: string
- remark: string
- createTime: Date
-}
-export type DictDataPageReqVO = {
- label: string
- dictType: string
- status: number
-}
-
-export type DictDataExportReqVO = {
- label: string
- dictType: string
- status: number
-}
diff --git a/src/api/system/errorCode/index.ts b/src/api/system/errorCode/index.ts
index 0e000794..65eabd3a 100644
--- a/src/api/system/errorCode/index.ts
+++ b/src/api/system/errorCode/index.ts
@@ -1,10 +1,10 @@
import request from '@/config/axios'
export interface ErrorCodeVO {
- id: number
+ id: number | undefined
type: number
applicationName: string
- code: number
+ code: number | undefined
message: string
memo: string
createTime: Date
diff --git a/src/api/system/loginLog/index.ts b/src/api/system/loginLog/index.ts
index cadaeaf3..f275c3e2 100644
--- a/src/api/system/loginLog/index.ts
+++ b/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 })
}
diff --git a/src/api/system/mail/account/index.ts b/src/api/system/mail/account/index.ts
index 8b662a70..9e10c92a 100644
--- a/src/api/system/mail/account/index.ts
+++ b/src/api/system/mail/account/index.ts
@@ -10,37 +10,32 @@ export interface MailAccountVO {
sslEnable: boolean
}
-export interface MailAccountPageReqVO extends PageParam {
- mail?: string
- username?: string
-}
-
// 查询邮箱账号列表
-export const getMailAccountPageApi = async (params: MailAccountPageReqVO) => {
+export const getMailAccountPage = async (params: PageParam) => {
return await request.get({ url: '/system/mail-account/page', params })
}
// 查询邮箱账号详情
-export const getMailAccountApi = async (id: number) => {
+export const getMailAccount = async (id: number) => {
return await request.get({ url: '/system/mail-account/get?id=' + id })
}
// 新增邮箱账号
-export const createMailAccountApi = async (data: MailAccountVO) => {
+export const createMailAccount = async (data: MailAccountVO) => {
return await request.post({ url: '/system/mail-account/create', data })
}
// 修改邮箱账号
-export const updateMailAccountApi = async (data: MailAccountVO) => {
+export const updateMailAccount = async (data: MailAccountVO) => {
return await request.put({ url: '/system/mail-account/update', data })
}
// 删除邮箱账号
-export const deleteMailAccountApi = async (id: number) => {
+export const deleteMailAccount = async (id: number) => {
return await request.delete({ url: '/system/mail-account/delete?id=' + id })
}
// 获得邮箱账号精简列表
-export const getSimpleMailAccounts = async () => {
+export const getSimpleMailAccountList = async () => {
return request.get({ url: '/system/mail-account/list-all-simple' })
}
diff --git a/src/api/system/mail/log/index.ts b/src/api/system/mail/log/index.ts
index 9c6c60eb..13172a72 100644
--- a/src/api/system/mail/log/index.ts
+++ b/src/api/system/mail/log/index.ts
@@ -19,22 +19,12 @@ export interface MailLogVO {
sendException: string
}
-export interface MailLogPageReqVO extends PageParam {
- userId?: number
- userType?: number
- toMail?: string
- accountId?: number
- templateId?: number
- sendStatus?: number
- sendTime?: Date[]
-}
-
// 查询邮件日志列表
-export const getMailLogPageApi = async (params: MailLogPageReqVO) => {
+export const getMailLogPage = async (params: PageParam) => {
return await request.get({ url: '/system/mail-log/page', params })
}
// 查询邮件日志详情
-export const getMailLogApi = async (id: number) => {
+export const getMailLog = async (id: number) => {
return await request.get({ url: '/system/mail-log/get?id=' + id })
}
diff --git a/src/api/system/mail/template/index.ts b/src/api/system/mail/template/index.ts
index c044ddd4..fb7ce5ea 100644
--- a/src/api/system/mail/template/index.ts
+++ b/src/api/system/mail/template/index.ts
@@ -13,14 +13,6 @@ export interface MailTemplateVO {
remark: string
}
-export interface MailTemplatePageReqVO extends PageParam {
- name?: string
- code?: string
- accountId?: number
- status?: number
- createTime?: Date[]
-}
-
export interface MailSendReqVO {
mail: string
templateCode: string
@@ -28,31 +20,31 @@ export interface MailSendReqVO {
}
// 查询邮件模版列表
-export const getMailTemplatePageApi = async (params: MailTemplatePageReqVO) => {
+export const getMailTemplatePage = async (params: PageParam) => {
return await request.get({ url: '/system/mail-template/page', params })
}
// 查询邮件模版详情
-export const getMailTemplateApi = async (id: number) => {
+export const getMailTemplate = async (id: number) => {
return await request.get({ url: '/system/mail-template/get?id=' + id })
}
// 新增邮件模版
-export const createMailTemplateApi = async (data: MailTemplateVO) => {
+export const createMailTemplate = async (data: MailTemplateVO) => {
return await request.post({ url: '/system/mail-template/create', data })
}
// 修改邮件模版
-export const updateMailTemplateApi = async (data: MailTemplateVO) => {
+export const updateMailTemplate = async (data: MailTemplateVO) => {
return await request.put({ url: '/system/mail-template/update', data })
}
// 删除邮件模版
-export const deleteMailTemplateApi = async (id: number) => {
+export const deleteMailTemplate = async (id: number) => {
return await request.delete({ url: '/system/mail-template/delete?id=' + id })
}
// 发送邮件
-export const sendMailApi = (data: MailSendReqVO) => {
+export const sendMail = (data: MailSendReqVO) => {
return request.post({ url: '/system/mail-template/send-mail', data })
}
diff --git a/src/api/system/menu/index.ts b/src/api/system/menu/index.ts
index 5913972b..13736215 100644
--- a/src/api/system/menu/index.ts
+++ b/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 })
}
diff --git a/src/api/system/notify/message/index.ts b/src/api/system/notify/message/index.ts
index a42d75c2..e24c3f8c 100644
--- a/src/api/system/notify/message/index.ts
+++ b/src/api/system/notify/message/index.ts
@@ -15,31 +15,13 @@ export interface NotifyMessageVO {
readTime: Date
}
-export interface NotifyMessagePageReqVO extends PageParam {
- userId?: number
- userType?: number
- templateCode?: string
- templateType?: number
- createTime?: Date[]
-}
-
-export interface NotifyMessageMyPageReqVO extends PageParam {
- readStatus?: boolean
- createTime?: Date[]
-}
-
// 查询站内信消息列表
-export const getNotifyMessagePageApi = async (params: NotifyMessagePageReqVO) => {
+export const getNotifyMessagePage = async (params: PageParam) => {
return await request.get({ url: '/system/notify-message/page', params })
}
-// 查询站内信消息详情
-export const getNotifyMessageApi = async (id: number) => {
- return await request.get({ url: '/system/notify-message/get?id=' + id })
-}
-
// 获得我的站内信分页
-export const getMyNotifyMessagePage = async (params: NotifyMessageMyPageReqVO) => {
+export const getMyNotifyMessagePage = async (params: PageParam) => {
return await request.get({ url: '/system/notify-message/my-page', params })
}
diff --git a/src/api/system/oauth2/client.ts b/src/api/system/oauth2/client.ts
index 4c06386d..6f71acad 100644
--- a/src/api/system/oauth2/client.ts
+++ b/src/api/system/oauth2/client.ts
@@ -21,31 +21,27 @@ export interface OAuth2ClientVO {
createTime: Date
}
-export interface OAuth2ClientPageReqVO extends PageParam {
- name?: string
- status?: number
-}
-// 查询 OAuth2列表
-export const getOAuth2ClientPageApi = (params: OAuth2ClientPageReqVO) => {
+// 查询 OAuth2 客户端的列表
+export const getOAuth2ClientPage = (params: PageParam) => {
return request.get({ url: '/system/oauth2-client/page', params })
}
-// 查询 OAuth2详情
-export const getOAuth2ClientApi = (id: number) => {
+// 查询 OAuth2 客户端的详情
+export const getOAuth2Client = (id: number) => {
return request.get({ url: '/system/oauth2-client/get?id=' + id })
}
-// 新增 OAuth2
-export const createOAuth2ClientApi = (data: OAuth2ClientVO) => {
+// 新增 OAuth2 客户端
+export const createOAuth2Client = (data: OAuth2ClientVO) => {
return request.post({ url: '/system/oauth2-client/create', data })
}
-// 修改 OAuth2
-export const updateOAuth2ClientApi = (data: OAuth2ClientVO) => {
+// 修改 OAuth2 客户端
+export const updateOAuth2Client = (data: OAuth2ClientVO) => {
return request.put({ url: '/system/oauth2-client/update', data })
}
// 删除 OAuth2
-export const deleteOAuth2ClientApi = (id: number) => {
+export const deleteOAuth2Client = (id: number) => {
return request.delete({ url: '/system/oauth2-client/delete?id=' + id })
}
diff --git a/src/api/system/oauth2/token.ts b/src/api/system/oauth2/token.ts
index dc7c44f5..8e9dca1e 100644
--- a/src/api/system/oauth2/token.ts
+++ b/src/api/system/oauth2/token.ts
@@ -11,18 +11,12 @@ export interface OAuth2TokenVO {
expiresTime: Date
}
-export interface OAuth2TokenPageReqVO extends PageParam {
- userId?: number
- userType?: number
- clientId?: string
-}
-
// 查询 token列表
-export const getAccessTokenPageApi = (params: OAuth2TokenPageReqVO) => {
+export const getAccessTokenPage = (params: PageParam) => {
return request.get({ url: '/system/oauth2-token/page', params })
}
// 删除 token
-export const deleteAccessTokenApi = (accessToken: number) => {
+export const deleteAccessToken = (accessToken: number) => {
return request.delete({ url: '/system/oauth2-token/delete?accessToken=' + accessToken })
}
diff --git a/src/api/system/operatelog/index.ts b/src/api/system/operatelog/index.ts
index 5fd31dba..848a5333 100644
--- a/src/api/system/operatelog/index.ts
+++ b/src/api/system/operatelog/index.ts
@@ -23,19 +23,11 @@ export type OperateLogVO = {
resultData: string
}
-export interface OperateLogPageReqVO extends PageParam {
- module?: string
- userNickname?: string
- type?: number
- success?: boolean
- startTime?: Date[]
-}
-
// 查询操作日志列表
-export const getOperateLogPageApi = (params: OperateLogPageReqVO) => {
+export const getOperateLogPage = (params: PageParam) => {
return request.get({ url: '/system/operate-log/page', params })
}
// 导出操作日志
-export const exportOperateLogApi = (params: OperateLogPageReqVO) => {
+export const exportOperateLog = (params) => {
return request.download({ url: '/system/operate-log/export', params })
}
diff --git a/src/api/system/permission/index.ts b/src/api/system/permission/index.ts
index aa355dfc..baf2805b 100644
--- a/src/api/system/permission/index.ts
+++ b/src/api/system/permission/index.ts
@@ -17,26 +17,26 @@ export interface PermissionAssignRoleDataScopeReqVO {
}
// 查询角色拥有的菜单权限
-export const listRoleMenusApi = async (roleId: number) => {
+export const getRoleMenuList = async (roleId: number) => {
return await request.get({ url: '/system/permission/list-role-resources?roleId=' + roleId })
}
// 赋予角色菜单权限
-export const assignRoleMenuApi = async (data: PermissionAssignRoleMenuReqVO) => {
+export const assignRoleMenu = async (data: PermissionAssignRoleMenuReqVO) => {
return await request.post({ url: '/system/permission/assign-role-menu', data })
}
// 赋予角色数据权限
-export const assignRoleDataScopeApi = async (data: PermissionAssignRoleDataScopeReqVO) => {
+export const assignRoleDataScope = async (data: PermissionAssignRoleDataScopeReqVO) => {
return await request.post({ url: '/system/permission/assign-role-data-scope', data })
}
// 查询用户拥有的角色数组
-export const listUserRolesApi = async (userId: number) => {
+export const getUserRoleList = async (userId: number) => {
return await request.get({ url: '/system/permission/list-user-roles?userId=' + userId })
}
// 赋予用户角色
-export const aassignUserRoleApi = async (data: PermissionAssignUserRoleReqVO) => {
+export const assignUserRole = async (data: PermissionAssignUserRoleReqVO) => {
return await request.post({ url: '/system/permission/assign-user-role', data })
}
diff --git a/src/api/system/post/index.ts b/src/api/system/post/index.ts
index 9e2540f0..405db387 100644
--- a/src/api/system/post/index.ts
+++ b/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 })
}
diff --git a/src/api/system/role/index.ts b/src/api/system/role/index.ts
index 0d477555..93636ff0 100644
--- a/src/api/system/role/index.ts
+++ b/src/api/system/role/index.ts
@@ -7,52 +7,55 @@ export interface RoleVO {
sort: number
status: number
type: number
+ dataScope: number
+ dataScopeDeptIds: number[]
createTime: Date
}
-export interface RolePageReqVO extends PageParam {
- name?: string
- code?: string
- status?: number
- createTime?: Date[]
-}
-
export interface UpdateStatusReqVO {
id: number
status: number
}
// 查询角色列表
-export const getRolePageApi = async (params: RolePageReqVO) => {
+export const getRolePage = async (params: PageParam) => {
return await request.get({ url: '/system/role/page', params })
}
// 查询角色（精简)列表
-export const listSimpleRolesApi = async () => {
+export const getSimpleRoleList = async (): Promise<RoleVO[]> => {
return await request.get({ url: '/system/role/list-all-simple' })
}
// 查询角色详情
-export const getRoleApi = async (id: number) => {
+export const getRole = async (id: number) => {
return await request.get({ url: '/system/role/get?id=' + id })
}
// 新增角色
-export const createRoleApi = async (data: RoleVO) => {
+export const createRole = async (data: RoleVO) => {
return await request.post({ url: '/system/role/create', data })
}
// 修改角色
-export const updateRoleApi = async (data: RoleVO) => {
+export const updateRole = async (data: RoleVO) => {
return await request.put({ url: '/system/role/update', data })
}
// 修改角色状态
-export const updateRoleStatusApi = async (data: UpdateStatusReqVO) => {
+export const updateRoleStatus = async (data: UpdateStatusReqVO) => {
return await request.put({ url: '/system/role/update-status', data })
}
// 删除角色
-export const deleteRoleApi = async (id: number) => {
+export const deleteRole = async (id: number) => {
return await request.delete({ url: '/system/role/delete?id=' + id })
}
+
+// 导出角色
+export const exportRole = (params) => {
+ return request.download({
+ url: '/system/role/export-excel',
+ params
+ })
+}
diff --git a/src/api/system/sensitiveWord/index.ts b/src/api/system/sensitiveWord/index.ts
index ffda89c0..1116226f 100644
--- a/src/api/system/sensitiveWord/index.ts
+++ b/src/api/system/sensitiveWord/index.ts
@@ -1,4 +1,5 @@
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' })
+ })
}
diff --git a/src/api/system/sms/smsChannel/index.ts b/src/api/system/sms/smsChannel/index.ts
index 176d075f..f335628f 100644
--- a/src/api/system/sms/smsChannel/index.ts
+++ b/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 })
}
diff --git a/src/api/system/sms/smsLog/index.ts b/src/api/system/sms/smsLog/index.ts
index 863eabb6..3d54fac1 100644
--- a/src/api/system/sms/smsLog/index.ts
+++ b/src/api/system/sms/smsLog/index.ts
@@ -1,57 +1,39 @@
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 })
}
diff --git a/src/api/system/sms/smsTemplate/index.ts b/src/api/system/sms/smsTemplate/index.ts
index 0433fe3a..35cb489d 100644
--- a/src/api/system/sms/smsTemplate/index.ts
+++ b/src/api/system/sms/smsTemplate/index.ts
@@ -1,18 +1,18 @@
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 })
+}
diff --git a/src/api/system/tenant/index.ts b/src/api/system/tenant/index.ts
index d79fb7b2..176c3757 100644
--- a/src/api/system/tenant/index.ts
+++ b/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 })
}
diff --git a/src/api/system/tenantPackage/index.ts b/src/api/system/tenantPackage/index.ts
index e431a9ee..01d139e2 100644
--- a/src/api/system/tenantPackage/index.ts
+++ b/src/api/system/tenantPackage/index.ts
@@ -12,35 +12,28 @@ export interface TenantPackageVO {
createTime: Date
}
-export interface TenantPackagePageReqVO extends PageParam {
- name?: string
- status?: number
- remark?: string
- createTime?: Date[]
-}
-
// 查询租户套餐列表
-export const getTenantPackageTypePageApi = (params: TenantPackagePageReqVO) => {
+export const getTenantPackagePage = (params: PageParam) => {
return request.get({ url: '/system/tenant-package/page', params })
}
// 获得租户
-export const getTenantPackageApi = (id: number) => {
+export const getTenantPackage = (id: number) => {
return request.get({ url: '/system/tenant-package/get?id=' + id })
}
// 新增租户套餐
-export const createTenantPackageTypeApi = (data: TenantPackageVO) => {
+export const createTenantPackage = (data: TenantPackageVO) => {
return request.post({ url: '/system/tenant-package/create', data })
}
// 修改租户套餐
-export const updateTenantPackageTypeApi = (data: TenantPackageVO) => {
+export const updateTenantPackage = (data: TenantPackageVO) => {
return request.put({ url: '/system/tenant-package/update', data })
}
// 删除租户套餐
-export const deleteTenantPackageTypeApi = (id: number) => {
+export const deleteTenantPackage = (id: number) => {
return request.delete({ url: '/system/tenant-package/delete?id=' + id })
}
// 获取租户套餐精简信息列表
diff --git a/src/api/system/user/index.ts b/src/api/system/user/index.ts
index e505921d..6224f0e8 100644
--- a/src/api/system/user/index.ts
+++ b/src/api/system/user/index.ts
@@ -17,58 +17,43 @@ export interface UserVO {
createTime: Date
}
-export interface UserPageReqVO extends PageParam {
- deptId?: number
- username?: string
- mobile?: string
- status?: number
- createTime?: Date[]
-}
-
-export interface UserExportReqVO {
- code?: string
- name?: string
- status?: number
- createTime?: Date[]
-}
-
// 查询用户管理列表
-export const getUserPageApi = (params: UserPageReqVO) => {
+export const getUserPage = (params: PageParam) => {
return request.get({ url: '/system/user/page', params })
}
// 查询用户详情
-export const getUserApi = (id: number) => {
+export const getUser = (id: number) => {
return request.get({ url: '/system/user/get?id=' + id })
}
// 新增用户
-export const createUserApi = (data: UserVO) => {
+export const createUser = (data: UserVO) => {
return request.post({ url: '/system/user/create', data })
}
// 修改用户
-export const updateUserApi = (data: UserVO) => {
+export const updateUser = (data: UserVO) => {
return request.put({ url: '/system/user/update', data })
}
// 删除用户
-export const deleteUserApi = (id: number) => {
+export const deleteUser = (id: number) => {
return request.delete({ url: '/system/user/delete?id=' + id })
}
// 导出用户
-export const exportUserApi = (params: UserExportReqVO) => {
+export const exportUser = (params) => {
return request.download({ url: '/system/user/export', params })
}
// 下载用户导入模板
-export const importUserTemplateApi = () => {
+export const importUserTemplate = () => {
return request.download({ url: '/system/user/get-import-template' })
}
// 用户密码重置
-export const resetUserPwdApi = (id: number, password: string) => {
+export const resetUserPwd = (id: number, password: string) => {
const data = {
id,
password
@@ -77,7 +62,7 @@ export const resetUserPwdApi = (id: number, password: string) => {
}
// 用户状态修改
-export const updateUserStatusApi = (id: number, status: number) => {
+export const updateUserStatus = (id: number, status: number) => {
const data = {
id,
status
@@ -86,6 +71,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' })
}
diff --git a/src/assets/imgs/profile.jpg b/src/assets/imgs/profile.jpg
new file mode 100644
index 00000000..e4bcf879
Binary files /dev/null and b/src/assets/imgs/profile.jpg differ
diff --git a/src/assets/imgs/wechat.png b/src/assets/imgs/wechat.png
new file mode 100644
index 00000000..6afc5e41
Binary files /dev/null and b/src/assets/imgs/wechat.png differ
diff --git a/src/components/ContentWrap/src/ContentWrap.vue b/src/components/ContentWrap/src/ContentWrap.vue
index 51e50410..6890e214 100644
--- a/src/components/ContentWrap/src/ContentWrap.vue
+++ b/src/components/ContentWrap/src/ContentWrap.vue
@@ -13,7 +13,7 @@ defineProps({
</script>
<template>
- <ElCard :class="[prefixCls, 'mb-20px']" shadow="never">
+ <ElCard :class="[prefixCls, 'mb-15px']" shadow="never">
<template v-if="title" #header>
<div class="flex items-center">
<span class="text-16px font-700">{{ title }}</span>
diff --git a/src/components/Crontab/src/Crontab.vue b/src/components/Crontab/src/Crontab.vue
index fe33bd5f..0e474fb2 100644
--- a/src/components/Crontab/src/Crontab.vue
+++ b/src/components/Crontab/src/Crontab.vue
@@ -6,7 +6,10 @@ interface shortcutsType {
value: string
}
const props = defineProps({
- modelValue: { type: String, default: '* * * * * ?' },
+ modelValue: {
+ type: String,
+ default: '* * * * * ?'
+ },
shortcuts: { type: Array as PropType<shortcutsType[]>, default: () => [] }
})
const defaultValue = ref('')
diff --git a/src/components/Descriptions/src/Descriptions.vue b/src/components/Descriptions/src/Descriptions.vue
index fca37000..f1e77ddf 100644
--- a/src/components/Descriptions/src/Descriptions.vue
+++ b/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"
>
diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue
index ecbfedb4..e3ba78d2 100644
--- a/src/components/DictTag/src/DictTag.vue
+++ b/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())
diff --git a/src/components/Editor/src/Editor.vue b/src/components/Editor/src/Editor.vue
index 85b849fb..4d8e7dde 100644
--- a/src/components/Editor/src/Editor.vue
+++ b/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"
diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue
index 5e5120c3..c1121641 100644
--- a/src/components/Form/src/Form.vue
+++ b/src/components/Form/src/Form.vue
@@ -35,7 +35,8 @@ export default defineComponent({
default: () => []
},
// 是否需要栅格布局
- isCol: propTypes.bool.def(true),
+ // update by 芋艿：将 true 改成 false，因为项目更常用这种方式
+ isCol: propTypes.bool.def(false),
// 表单数据对象
model: {
type: Object as PropType<Recordable>,
@@ -46,7 +47,9 @@ export default defineComponent({
// 是否自定义内容
isCustom: propTypes.bool.def(false),
// 表单label宽度
- labelWidth: propTypes.oneOfType([String, Number]).def('auto')
+ labelWidth: propTypes.oneOfType([String, Number]).def('auto'),
+ // 是否 loading 数据中 add by 芋艿
+ vLoading: propTypes.bool.def(false)
},
emits: ['register'],
setup(props, { slots, expose, emit }) {
@@ -280,6 +283,7 @@ export default defineComponent({
{...getFormBindValue()}
model={props.isCustom ? props.model : formModel}
class={prefixCls}
+ v-loading={props.vLoading}
>
{{
// 如果需要自定义，就什么都不渲染，而是提供默认插槽
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 9fc35068..788809a5 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -5,7 +5,7 @@
class="float-right mt-15px mb-15px"
:background="true"
layout="total, sizes, prev, pager, next, jumper"
- :page-sizes="[10, 20, 30, 50]"
+ :page-sizes="[10, 20, 30, 50, 100]"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:pager-count="pagerCount"
diff --git a/src/components/Search/src/Search.vue b/src/components/Search/src/Search.vue
index 80f2b37c..cb3d5dea 100644
--- a/src/components/Search/src/Search.vue
+++ b/src/components/Search/src/Search.vue
@@ -98,6 +98,7 @@ const setVisible = () => {
</script>
<template>
+ <!-- update by 芋艿：class="-mb-15px" 用于降低和 ContentWrap 组件的底部距离，避免空隙过大 -->
<Form
:is-custom="false"
:label-width="labelWidth"
@@ -106,21 +107,26 @@ const setVisible = () => {
:is-col="isCol"
:schema="newSchema"
@register="register"
+ class="-mb-15px"
>
<template #action>
<div v-if="layout === 'inline'">
- <ElButton v-if="showSearch" type="primary" @click="search">
+ <!-- update by 芋艿：去除搜索的 type="primary"，颜色变淡一点 -->
+ <ElButton v-if="showSearch" @click="search">
<Icon icon="ep:search" class="mr-5px" />
{{ t('common.query') }}
</ElButton>
+ <!-- update by 芋艿：将 icon="ep:refresh-right" 修改成 icon="ep:refresh"，和 ruoyi-vue 搜索保持一致 -->
<ElButton v-if="showReset" @click="reset">
- <Icon icon="ep:refresh-right" class="mr-5px" />
+ <Icon icon="ep:refresh" class="mr-5px" />
{{ t('common.reset') }}
</ElButton>
<ElButton v-if="expand" text @click="setVisible">
{{ t(visible ? 'common.shrink' : 'common.expand') }}
<Icon :icon="visible ? 'ep:arrow-up' : 'ep:arrow-down'" />
</ElButton>
+ <!-- add by 芋艿：补充在搜索后的按钮 -->
+ <slot name="actionMore"></slot>
</div>
</template>
<template #[name] v-for="name in Object.keys($slots)" :key="name"
@@ -142,6 +148,8 @@ const setVisible = () => {
{{ t(visible ? 'common.shrink' : 'common.expand') }}
<Icon :icon="visible ? 'ep:arrow-up' : 'ep:arrow-down'" />
</ElButton>
+ <!-- add by 芋艿：补充在搜索后的按钮 -->
+ <slot name="actionMore"></slot>
</div>
</template>
</template>
diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue
index 66969c99..8ca59684 100644
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@@ -104,11 +104,12 @@ export default defineComponent({
})
const pagination = computed(() => {
+ // update by 芋艿：保持和 Pagination 组件的逻辑一致
return Object.assign(
{
small: false,
background: true,
- pagerCount: 5,
+ pagerCount: document.body.clientWidth < 992 ? 5 : 7,
layout: 'total, sizes, prev, pager, next, jumper',
pageSizes: [10, 20, 30, 50, 100],
disabled: false,
@@ -283,10 +284,11 @@ export default defineComponent({
}}
</ElTable>
{unref(getProps).pagination ? (
+ // update by 芋艿：保持和 Pagination 组件一致
<ElPagination
v-model:pageSize={pageSizeRef.value}
v-model:currentPage={currentPageRef.value}
- class="mt-10px"
+ class="float-right mt-15px mb-15px"
{...unref(pagination)}
></ElPagination>
) : undefined}
diff --git a/src/config/axios/request.ts b/src/config/axios/request.ts
deleted file mode 100644
index d65842c2..00000000
--- a/src/config/axios/request.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { service } from './service'
-
-import { config } from './config'
-
-const { default_headers } = config
-
-const request = (option: any) => {
- const { url, method, params, data, headersType, responseType } = option
- return service({
- url: url,
- method,
- params,
- data,
- responseType: responseType,
- headers: {
- 'Content-Type': headersType || default_headers
- }
- })
-}
-export default {
- get: async <T = any>(option: any) => {
- const res = await request({ method: 'GET', ...option })
- return res as unknown as T
- },
- post: async <T = any>(option: any) => {
- const res = await request({ method: 'POST', ...option })
- return res as unknown as T
- },
- delete: async <T = any>(option: any) => {
- const res = await request({ method: 'DELETE', ...option })
- return res as unknown as T
- },
- put: async <T = any>(option: any) => {
- const res = await request({ method: 'PUT', ...option })
- return res as unknown as T
- },
- patch: async <T = any>(option: any) => {
- const res = await request({ method: 'PATCH', ...option })
- return res as unknown as T
- },
- download: async <T = any>(option: any) => {
- const res = await request({ method: 'GET', responseType: 'blob', ...option })
- return res as unknown as Promise<T>
- },
- upload: async <T = any>(option: any) => {
- option.headersType = 'multipart/form-data'
- const res = await request({ method: 'POST', ...option })
- return res as unknown as Promise<T>
- }
-}
diff --git a/src/hooks/web/useCrudSchemas.ts b/src/hooks/web/useCrudSchemas.ts
index 543111ca..66c5eb0a 100644
--- a/src/hooks/web/useCrudSchemas.ts
+++ b/src/hooks/web/useCrudSchemas.ts
@@ -8,6 +8,7 @@ import { FormSchema } from '@/types/form'
import { TableColumn } from '@/types/table'
import { DescriptionsSchema } from '@/types/descriptions'
import { ComponentOptions, ComponentProps } from '@/types/components'
+import { DictTag } from '@/components/DictTag'
export type CrudSchema = Omit<TableColumn, 'children'> & {
isSearch?: boolean // 是否在查询显示
@@ -151,6 +152,15 @@ const filterTableSchema = (crudSchema: CrudSchema[]): TableColumn[] => {
const tableColumns = treeMap<CrudSchema>(crudSchema, {
conversion: (schema: CrudSchema) => {
if (schema?.isTable !== false && schema?.table?.show !== false) {
+ // add by 芋艿：增加对 dict 字典数据的支持
+ if (!schema.formatter && schema.dictType) {
+ schema.formatter = (_: Recordable, __: TableColumn, cellValue: any) => {
+ return h(DictTag, {
+ type: schema.dictType!, // ! 表示一定不为空
+ value: cellValue
+ })
+ }
+ }
return {
...schema.table,
...schema
diff --git a/src/hooks/web/useTable.ts b/src/hooks/web/useTable.ts
index 7a9b1afe..3f0d5055 100644
--- a/src/hooks/web/useTable.ts
+++ b/src/hooks/web/useTable.ts
@@ -218,6 +218,8 @@ export const useTable = <T = any>(config?: UseTableConfig<T>) => {
register,
elTableRef,
tableObject,
- methods
+ methods,
+ // add by 芋艿：返回 tableMethods 属性，和 tableObject 更统一
+ tableMethods: methods
}
}
diff --git a/src/layout/components/Breadcrumb/src/Breadcrumb.vue b/src/layout/components/Breadcrumb/src/Breadcrumb.vue
index 19be7400..de036654 100644
--- a/src/layout/components/Breadcrumb/src/Breadcrumb.vue
+++ b/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}>
diff --git a/src/layout/components/Message/src/Message.vue b/src/layout/components/Message/src/Message.vue
index 94347812..4ac85860 100644
--- a/src/layout/components/Message/src/Message.vue
+++ b/src/layout/components/Message/src/Message.vue
@@ -1,5 +1,5 @@
<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>
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 1600a19f..4f4d4895 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -297,7 +297,8 @@ export default {
typeCreate: 'Dict Type Create',
typeUpdate: 'Dict Type Eidt',
dataCreate: 'Dict Data Create',
- dataUpdate: 'Dict Data Eidt'
+ dataUpdate: 'Dict Data Eidt',
+ fileUpload: 'File Upload'
},
dialog: {
dialog: 'Dialog',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 7c5742c4..6f46f1ab 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -297,7 +297,8 @@ export default {
typeCreate: '字典类型新增',
typeUpdate: '字典类型编辑',
dataCreate: '字典数据新增',
- dataUpdate: '字典数据编辑'
+ dataUpdate: '字典数据编辑',
+ fileUpload: '上传文件'
},
dialog: {
dialog: '弹窗',
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 43375961..2dc9522d 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -104,6 +104,31 @@ const remainingRouter: AppRouteRecordRaw[] = [
}
]
},
+
+ {
+ path: '/dict',
+ component: Layout,
+ name: 'dict',
+ meta: {
+ hidden: true
+ },
+ children: [
+ {
+ path: 'type/data/:dictType',
+ component: () => import('@/views/system/dict/data.vue'),
+ name: 'data',
+ meta: {
+ title: '字典数据',
+ noCache: true,
+ hidden: true,
+ canTo: true,
+ icon: '',
+ activeMenu: 'system/dict/data'
+ }
+ }
+ ]
+ },
+
{
path: '/codegen',
component: Layout,
@@ -137,7 +162,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
children: [
{
path: 'job-log',
- component: () => import('@/views/infra/job/JobLog.vue'),
+ component: () => import('@/views/infra/job/logger/index.vue'),
name: 'JobLog',
meta: {
noCache: true,
@@ -200,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'
}
},
{
@@ -231,7 +256,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
hidden: true,
canTo: true,
title: '流程定义',
- activeMenu: 'bpm/definition/index'
+ activeMenu: '/bpm/manager/model'
}
},
{
@@ -247,7 +272,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
},
{
path: '/process-instance/create',
- component: () => import('@/views/bpm/processInstance/create.vue'),
+ component: () => import('@/views/bpm/processInstance/create/index.vue'),
name: 'BpmProcessInstanceCreate',
meta: {
noCache: true,
@@ -259,7 +284,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
},
{
path: '/process-instance/detail',
- component: () => import('@/views/bpm/processInstance/detail.vue'),
+ component: () => import('@/views/bpm/processInstance/detail/index.vue'),
name: 'BpmProcessInstanceDetail',
meta: {
noCache: true,
@@ -294,6 +319,22 @@ const remainingRouter: AppRouteRecordRaw[] = [
}
}
]
+ },
+ {
+ path: '/property',
+ component: Layout,
+ name: 'property',
+ meta: {
+ hidden: true
+ },
+ children: [
+ {
+ path: 'value/:propertyId(\\d+)',
+ component: () => import('@/views/mall/product/property/value/index.vue'),
+ name: 'PropertyValue',
+ meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
+ }
+ ]
}
]
diff --git a/src/store/modules/dict.ts b/src/store/modules/dict.ts
index 4e9ab39c..2d393e43 100644
--- a/src/store/modules/dict.ts
+++ b/src/store/modules/dict.ts
@@ -3,7 +3,7 @@ import { store } from '../index'
import { DictDataVO } from '@/api/system/dict/types'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache('sessionStorage')
-import { listSimpleDictDataApi } from '@/api/system/dict/dict.data'
+import { listSimpleDictData } from '@/api/system/dict/dict.data'
export interface DictValueType {
value: any
@@ -44,7 +44,7 @@ export const useDictStore = defineStore('dict', {
this.dictMap = dictMap
this.isSetDict = true
} else {
- const res = await listSimpleDictDataApi()
+ const res = await listSimpleDictData()
// 设置数据
const dictDataMap = new Map<string, any>()
res.forEach((dictData: DictDataVO) => {
@@ -74,7 +74,7 @@ export const useDictStore = defineStore('dict', {
},
async resetDict() {
wsCache.delete(CACHE_KEY.DICT_CACHE)
- const res = await listSimpleDictDataApi()
+ const res = await listSimpleDictData()
// 设置数据
const dictDataMap = new Map<string, any>()
res.forEach((dictData: DictDataVO) => {
diff --git a/src/types/auto-components.d.ts b/src/types/auto-components.d.ts
index 7b10d679..80a5900f 100644
--- a/src/types/auto-components.d.ts
+++ b/src/types/auto-components.d.ts
@@ -24,7 +24,6 @@ declare module '@vue/runtime-core' {
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,10 +68,10 @@ 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']
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 7c9f5ff1..75cf16d9 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -52,6 +52,7 @@ declare global {
const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref']
const useAttrs: typeof import('vue')['useAttrs']
+ const useCrudSchemas: typeof import('@/hooks/web/useCrudSchemas')['useCrudSchemas']
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useI18n: typeof import('@/hooks/web/useI18n')['useI18n']
@@ -60,6 +61,7 @@ declare global {
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSlots: typeof import('vue')['useSlots']
+ const useTable: typeof import('@/hooks/web/useTable')['useTable']
const useVxeCrudSchemas: typeof import('@/hooks/web/useVxeCrudSchemas')['useVxeCrudSchemas']
const useXTable: typeof import('@/hooks/web/useXTable')['useXTable']
const watch: typeof import('vue')['watch']
diff --git a/src/types/descriptions.d.ts b/src/types/descriptions.d.ts
index 48835e9c..35c0b81b 100644
--- a/src/types/descriptions.d.ts
+++ b/src/types/descriptions.d.ts
@@ -8,6 +8,6 @@ export interface DescriptionsSchema {
labelAlign?: 'left' | 'center' | 'right'
className?: string
labelClassName?: string
- dateFormat?: string
- dictType?: string
+ dateFormat?: string // add by 星语：支持时间的格式化
+ dictType?: string // add by 星语：支持 dict 字典数据
}
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 15e57ff2..05c70dad 100644
--- a/src/utils/dict.ts
+++ b/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' // 消息类型
}
diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
index 39671279..d4dea9b5 100644
--- a/src/utils/formatTime.ts
+++ b/src/utils/formatTime.ts
@@ -11,58 +11,63 @@ import dayjs from 'dayjs'
* @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
* @returns 返回拼接后的时间字符串
*/
-export function formatDate(date: Date, format: string): string {
- const we = date.getDay() // 星期
- const z = getWeek(date) // 周
- const qut = Math.floor((date.getMonth() + 3) / 3).toString() // 季度
- const opt: { [key: string]: string } = {
- 'Y+': date.getFullYear().toString(), // 年
- 'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
- 'd+': date.getDate().toString(), // 日
- 'H+': date.getHours().toString(), // 时
- 'M+': date.getMinutes().toString(), // 分
- 'S+': date.getSeconds().toString(), // 秒
- 'q+': qut // 季度
+export function formatDate(date: Date, format?: string): string {
+ // 日期不存在，则返回空
+ if (!date) {
+ return ''
}
- // 中文数字 (星期)
- const week: { [key: string]: string } = {
- '0': '日',
- '1': '一',
- '2': '二',
- '3': '三',
- '4': '四',
- '5': '五',
- '6': '六'
+ // 日期存在，则进行格式化
+ if (format === undefined) {
+ format = 'YYYY-MM-DD HH:mm:ss'
}
- // 中文数字（季度）
- const quarter: { [key: string]: string } = {
- '1': '一',
- '2': '二',
- '3': '三',
- '4': '四'
+ return dayjs(date).format(format)
+}
+
+// TODO 芋艿：稍后去掉
+// 日期格式化
+export function parseTime(time: any, pattern?: string) {
+ if (arguments.length === 0 || !time) {
+ return null
}
- if (/(W+)/.test(format))
- format = format.replace(
- RegExp.$1,
- RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]
- )
- if (/(Q+)/.test(format))
- format = format.replace(
- RegExp.$1,
- RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]
- )
- if (/(Z+)/.test(format))
- format = format.replace(RegExp.$1, RegExp.$1.length == 3 ? '第' + z + '周' : z + '')
- for (const k in opt) {
- const r = new RegExp('(' + k + ')').exec(format)
- // 若输入的长度不为1，则前面补零
- if (r)
- format = format.replace(
- r[1],
- RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0')
- )
+ 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)
}
- return format
+ 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
}
/**
@@ -189,5 +194,56 @@ export const dateFormatter = (row, column, cellValue) => {
if (!cellValue) {
return
}
- return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
+ return formatDate(cellValue)
+}
+
+/**
+ * 设置起始日期，时间为00:00:00
+ * @param param 传入日期
+ * @returns 带时间00:00:00的日期
+ */
+export function beginOfDay(param: Date) {
+ return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0, 0)
+}
+
+/**
+ * 设置结束日期，时间为23:59:59
+ * @param param 传入日期
+ * @returns 带时间23:59:59的日期
+ */
+export function endOfDay(param: Date) {
+ return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59, 999)
+}
+
+/**
+ * 计算两个日期间隔天数
+ * @param param1 日期1
+ * @param param2 日期2
+ */
+export function betweenDay(param1: Date, param2: Date) {
+ param1 = convertDate(param1)
+ param2 = convertDate(param2)
+ // 计算差值
+ return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000))
+}
+
+/**
+ * 日期计算
+ * @param param1 日期
+ * @param param2 添加的时间
+ */
+export function addTime(param1: Date, param2: number) {
+ param1 = convertDate(param1)
+ return new Date(param1.getTime() + param2)
+}
+
+/**
+ * 日期转换
+ * @param param 日期
+ */
+export function convertDate(param: Date | string) {
+ if (typeof param === 'string') {
+ return new Date(param)
+ }
+ return param
}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index d3058473..e016c1e2 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -137,3 +137,21 @@ export const generateUUID = () => {
return (c === 'x' ? random : (random & 0x3) | 0x8).toString(16)
})
}
+
+/**
+ * element plus 的文件大小 Formatter 实现
+ *
+ * @param row 行数据
+ * @param column 字段
+ * @param cellValue 字段值
+ */
+// @ts-ignore
+export const fileSizeFormatter = (row, column, cellValue) => {
+ const fileSize = cellValue
+ const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+ const srcSize = parseFloat(fileSize)
+ const index = Math.floor(Math.log(srcSize) / Math.log(1024))
+ const size = srcSize / Math.pow(1024, index)
+ const sizeStr = size.toFixed(2) //保留的小数位数
+ return sizeStr + ' ' + unitArr[index]
+}
diff --git a/src/utils/tree.ts b/src/utils/tree.ts
index 8f1f92cc..20f97a38 100644
--- a/src/utils/tree.ts
+++ b/src/utils/tree.ts
@@ -276,7 +276,7 @@ export const handleTree = (data: any[], id?: string, parentId?: string, children
export const handleTree2 = (data, id, parentId, children, rootId) => {
id = id || 'id'
parentId = parentId || 'parentId'
- children = children || 'children'
+ // children = children || 'children'
rootId =
rootId ||
Math.min(
@@ -285,16 +285,16 @@ export const handleTree2 = (data, id, parentId, children, rootId) => {
})
) ||
0
- //对源数据深度克隆
+ // 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
- //循环所有项
+ // 循环所有项
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
- //返回每一项的子级数组
+ // 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? (father.children = branchArr) : ''
- //返回第一层
+ // 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
diff --git a/src/views/Profile/components/ProfileUser.vue b/src/views/Profile/components/ProfileUser.vue
index 2f5a77b2..015440fc 100644
--- a/src/views/Profile/components/ProfileUser.vue
+++ b/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'
diff --git a/src/views/bpm/definition/definition.data.ts b/src/views/bpm/definition/definition.data.ts
deleted file mode 100644
index 14a0c319..00000000
--- a/src/views/bpm/definition/definition.data.ts
+++ /dev/null
@@ -1,79 +0,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)
diff --git a/src/views/bpm/definition/index.vue b/src/views/bpm/definition/index.vue
index f2ef640c..66a6a23b 100644
--- a/src/views/bpm/definition/index.vue
+++ b/src/views/bpm/definition/index.vue
@@ -1,92 +1,138 @@
<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>
-</template>
-<script setup lang="ts">
-// 业务相关的 import
-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() // 路由
+ <!-- 弹窗：表单详情 -->
+ <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" name="Form">
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as DefinitionApi from '@/api/bpm/definition'
+import { setConfAndFields2 } from '@/utils/formCreate'
+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>
diff --git a/src/views/bpm/form/editor/index.vue b/src/views/bpm/form/editor/index.vue
new file mode 100644
index 00000000..cb7d023f
--- /dev/null
+++ b/src/views/bpm/form/editor/index.vue
@@ -0,0 +1,106 @@
+<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>
diff --git a/src/views/bpm/form/form.data.ts b/src/views/bpm/form/form.data.ts
deleted file mode 100644
index 43c93dd7..00000000
--- a/src/views/bpm/form/form.data.ts
+++ /dev/null
@@ -1,43 +0,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)
diff --git a/src/views/bpm/form/formEditor.vue b/src/views/bpm/form/formEditor.vue
deleted file mode 100644
index 989ea56e..00000000
--- a/src/views/bpm/form/formEditor.vue
+++ /dev/null
@@ -1,159 +0,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">
- <div v-highlight>
- <code class="hljs">
- {{ formValue }}
- </code>
- </div>
- </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>
diff --git a/src/views/bpm/form/index.vue b/src/views/bpm/form/index.vue
index b4b208a9..616e60be 100644
--- a/src/views/bpm/form/index.vue
+++ b/src/views/bpm/form/index.vue
@@ -1,93 +1,171 @@
<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 handleUpdate = async (rowId: number) => {
- await push({
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 添加/修改操作 */
+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>
diff --git a/src/views/bpm/group/UserGroupForm.vue b/src/views/bpm/group/UserGroupForm.vue
new file mode 100644
index 00000000..9496ad84
--- /dev/null
+++ b/src/views/bpm/group/UserGroupForm.vue
@@ -0,0 +1,130 @@
+<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>
diff --git a/src/views/bpm/group/group.data.ts b/src/views/bpm/group/group.data.ts
deleted file mode 100644
index 613a7290..00000000
--- a/src/views/bpm/group/group.data.ts
+++ /dev/null
@@ -1,64 +0,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)
diff --git a/src/views/bpm/group/index.vue b/src/views/bpm/group/index.vue
index b0f08516..0b52e9a2 100644
--- a/src/views/bpm/group/index.vue
+++ b/src/views/bpm/group/index.vue
@@ -1,182 +1,184 @@
<template>
<ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
+ <!-- 搜索工作栏 -->
+ <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 label="状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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>
+ <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"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
+ @click="openForm('create')"
v-hasPermi="['bpm:user-group:create']"
- @click="handleCreate()"
- />
- </template>
- <template #memberUserIds_default="{ row }">
- <span v-for="userId in row.memberUserIds" :key="userId">
- {{ getUserNickname(userId) }}
- </span>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['bpm:user-group:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['bpm:user-group:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['bpm:user-group:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ </el-form-item>
+ </el-form>
</ContentWrap>
- <XModal v-model="dialogVisible" :title="dialogTitle" :mask-closable="false">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- ref="formRef"
- >
- <template #memberUserIds="form">
- <el-select v-model="form.memberUserIds" multiple>
- <el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id" />
- </el-select>
- </template>
- </Form>
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- >
- <template #memberUserIds="{ row }">
- <span v-for="userId in row.memberUserIds" :key="userId">
- {{ getUserNickname(userId) }}
- </span>
- </template>
- </Descriptions>
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm"
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="编号" align="center" prop="id" />
+ <el-table-column label="组名" align="center" prop="name" />
+ <el-table-column label="描述" align="center" prop="description" />
+ <el-table-column label="成员" align="center">
+ <template #default="scope">
+ <span v-for="userId in scope.row.memberUserIds" :key="userId" class="pr-5px">
+ {{ userList.find((user) => user.id === userId)?.nickname }}
+ </span>
+ </template>
+ </el-table-column>
+ <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="createTime"
+ :formatter="dateFormatter"
/>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['bpm:user-group:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['bpm:user-group:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <UserGroupForm ref="formRef" @success="getList" />
</template>
-<script setup lang="ts">
-// 业务相关的 import
+<script setup lang="ts" name="UserGroup">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
import * as UserGroupApi from '@/api/bpm/userGroup'
-import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
-import { allSchemas, rules } from './group.data'
-import { FormExpose } from '@/components/Form'
-
-const { t } = useI18n() // 国际化
+import * as UserApi from '@/api/system/user'
+import UserGroupForm from './UserGroupForm.vue'
const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- getListApi: UserGroupApi.getUserGroupPageApi,
- deleteApi: UserGroupApi.deleteUserGroupApi
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ name: null,
+ status: null,
+ createTime: []
})
-// 用户列表
-const users = ref<UserVO[]>([])
+const queryFormRef = ref() // 搜索的表单
+const userList = ref([]) // 用户列表
-const getUserNickname = (userId) => {
- for (const user of users.value) {
- if (user.id === userId) {
- return user.nickname
- }
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await UserGroupApi.getUserGroupPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
}
- return '未知(' + userId + ')'
}
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
}
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await UserGroupApi.getUserGroupApi(rowId)
- unref(formRef)?.setValues(res)
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
}
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- detailData.value = await UserGroupApi.getUserGroupApi(rowId)
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await UserGroupApi.deleteUserGroup(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
}
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as UserGroupApi.UserGroupVO
- if (actionType.value === 'create') {
- await UserGroupApi.createUserGroupApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await UserGroupApi.updateUserGroupApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
-}
-
-// ========== 初始化 ==========
-onMounted(() => {
- getListSimpleUsersApi().then((data) => {
- users.value = data
- })
+/** 初始化 **/
+onMounted(async () => {
+ await getList()
+ // 加载用户列表
+ userList.value = await UserApi.getSimpleUserList()
})
</script>
diff --git a/src/views/bpm/model/ModelForm.vue b/src/views/bpm/model/ModelForm.vue
new file mode 100644
index 00000000..ac536958
--- /dev/null
+++ b/src/views/bpm/model/ModelForm.vue
@@ -0,0 +1,227 @@
+<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>
diff --git a/src/views/bpm/model/ModelImportForm.vue b/src/views/bpm/model/ModelImportForm.vue
new file mode 100644
index 00000000..fe542622
--- /dev/null
+++ b/src/views/bpm/model/ModelImportForm.vue
@@ -0,0 +1,137 @@
+<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
+ :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) => {
+ 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>
diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue
new file mode 100644
index 00000000..7e3d8413
--- /dev/null
+++ b/src/views/bpm/model/editor/index.vue
@@ -0,0 +1,102 @@
+<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>
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 25136e13..9a0d725f 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -1,353 +1,324 @@
<template>
<ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- title="新建流程"
- v-hasPermi="['bpm:model:create']"
- @click="handleCreate"
+ <!-- 搜索工作栏 -->
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="流程标识" prop="key">
+ <el-input
+ v-model="queryParams.key"
+ placeholder="请输入流程标识"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
/>
- <!-- 操作：导入 -->
- <XButton
- type="warning"
- preIcon="ep:upload"
- :title="'导入流程'"
- @click="handleImport"
- style="margin-left: 10px"
+ </el-form-item>
+ <el-form-item label="流程名称" prop="name">
+ <el-input
+ v-model="queryParams.name"
+ placeholder="请输入流程名称"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
/>
- </template>
- <!-- 流程名称 -->
- <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="forms.find((form) => form.id === row.formId)?.name || row.formId"
- @click="handleFormDetail(row)"
- />
- <XTextButton v-else :title="row.formCustomCreatePath" @click="handleFormDetail(row)" />
- </template>
- <!-- 流程版本 -->
- <template #version_default="{ row }">
- <el-tag v-if="row.processDefinition">v{{ row.processDefinition.version }}</el-tag>
- <el-tag type="warning" v-else>未部署</el-tag>
- </template>
- <!-- 激活状态 -->
- <template #status_default="{ row }">
- <el-switch
- v-if="row.processDefinition"
- v-model="row.processDefinition.suspensionState"
- :active-value="1"
- :inactive-value="2"
- @change="handleChangeState(row)"
- />
- </template>
- <!-- 操作 -->
- <template #actionbtns_default="{ row }">
- <XTextButton
- preIcon="ep:edit"
- title="修改流程"
- v-hasPermi="['bpm:model:update']"
- @click="handleUpdate(row.id)"
- />
- <XTextButton
- preIcon="ep:setting"
- title="设计流程"
- v-hasPermi="['bpm:model:update']"
- @click="handleDesign(row)"
- />
- <XTextButton
- preIcon="ep:user"
- title="分配规则"
- v-hasPermi="['bpm:task-assign-rule:query']"
- @click="handleAssignRule(row)"
- />
- <XTextButton
- preIcon="ep:position"
- title="发布流程"
- v-hasPermi="['bpm:model:deploy']"
- @click="handleDeploy(row)"
- />
- <XTextButton
- preIcon="ep:aim"
- title="流程定义"
- v-hasPermi="['bpm:process-definition:query']"
- @click="handleDefinitionList(row)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['bpm:model:delete']"
- @click="handleDelete(row.id)"
- />
- </template>
- </XTable>
-
- <!-- 对话框(添加 / 修改流程) -->
- <XModal v-model="dialogVisible" :title="dialogTitle" width="600">
- <el-form
- :loading="dialogLoading"
- el-form
- ref="saveFormRef"
- :model="saveForm"
- :rules="rules"
- label-width="110px"
- >
- <el-form-item label="流程标识" prop="key">
- <el-input
- v-model="saveForm.key"
- placeholder="请输入流标标识"
- style="width: 330px"
- :disabled="!!saveForm.id"
- />
- <el-tooltip
- v-if="!saveForm.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="saveForm.name"
- placeholder="请输入流程名称"
- :disabled="!!saveForm.id"
- clearable
- />
- </el-form-item>
- <el-form-item v-if="saveForm.id" label="流程分类" prop="category">
- <el-select
- v-model="saveForm.category"
- placeholder="请选择流程分类"
- clearable
- style="width: 100%"
- >
- <el-option
- v-for="(dict, index) in getDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
- :key="index"
- :label="dict.label"
- :value="dict.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="流程描述" prop="description">
- <el-input type="textarea" v-model="saveForm.description" clearable />
- </el-form-item>
- <div v-if="saveForm.id">
- <el-form-item label="表单类型" prop="formType">
- <el-radio-group v-model="saveForm.formType">
- <el-radio
- v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
- :key="parseInt(dict.value)"
- :label="parseInt(dict.value)"
- >
- {{ dict.label }}
- </el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item v-if="saveForm.formType === 10" label="流程表单" prop="formId">
- <el-select v-model="saveForm.formId" clearable style="width: 100%">
- <el-option v-for="form in forms" :key="form.id" :label="form.name" :value="form.id" />
- </el-select>
- </el-form-item>
- <el-form-item
- v-if="saveForm.formType === 20"
- label="表单提交路由"
- prop="formCustomCreatePath"
- >
- <el-input
- v-model="saveForm.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="saveForm.formType === 20"
- label="表单查看路由"
- prop="formCustomViewPath"
- >
- <el-input
- v-model="saveForm.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>
- <!-- 按钮：保存 -->
- <XButton
- type="primary"
- :loading="dialogLoading"
- @click="submitForm"
- :title="t('action.save')"
- />
- <!-- 按钮：关闭 -->
- <XButton
- :loading="dialogLoading"
- @click="dialogVisible = false"
- :title="t('dialog.close')"
- />
- </template>
- </XModal>
-
- <!-- 导入流程 -->
- <XModal v-model="importDialogVisible" width="400" title="导入流程">
- <div>
- <el-upload
- ref="uploadRef"
- :action="importUrl"
- :headers="uploadHeaders"
- :drag="true"
- :limit="1"
- :multiple="true"
- :show-file-list="true"
- :disabled="uploadDisabled"
- :on-exceed="handleExceed"
- :on-success="handleFileSuccess"
- :on-error="excelUploadError"
- :auto-upload="false"
- accept=".bpmn, .xml"
- name="bpmnFile"
- :data="importForm"
+ </el-form-item>
+ <el-form-item label="流程分类" prop="category">
+ <el-select
+ v-model="queryParams.category"
+ placeholder="请选择流程分类"
+ clearable
+ class="!w-240px"
>
- <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="importFormRef"
- :model="importForm"
- :rules="rules"
- label-width="120px"
- status-icon
- >
- <el-form-item label="流程标识" prop="key">
- <el-input
- v-model="importForm.key"
- placeholder="请输入流标标识"
- style="width: 250px"
- />
- </el-form-item>
- <el-form-item label="流程名称" prop="name">
- <el-input v-model="importForm.name" placeholder="请输入流程名称" clearable />
- </el-form-item>
- <el-form-item label="流程描述" prop="description">
- <el-input type="textarea" v-model="importForm.description" clearable />
- </el-form-item>
- </el-form>
- </div>
- </template>
- </el-upload>
- </div>
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- type="warning"
- preIcon="ep:upload-filled"
- :title="t('action.save')"
- @click="submitFileForm"
- />
- <XButton title="取 消" @click="uploadClose" />
- </template>
- </XModal>
-
- <!-- 表单详情的弹窗 -->
- <XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
- <form-create
- :rule="formDetailPreview.rule"
- :option="formDetailPreview.option"
- v-if="formDetailVisible"
- />
- </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"
- />
- </XModal>
+ <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>
+ <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"
+ plain
+ @click="openForm('create')"
+ v-hasPermi="['bpm:model:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新建流程
+ </el-button>
+ <el-button type="success" plain @click="openImportForm" v-hasPermi="['bpm:model:import']">
+ <Icon icon="ep:upload" class="mr-5px" /> 导入流程
+ </el-button>
+ </el-form-item>
+ </el-form>
</ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="流程标识" align="center" prop="key" width="200" />
+ <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-if="scope.row.formType === 20"
+ type="text"
+ @click="handleFormDetail(scope.row)"
+ >
+ <span>{{ scope.row.formCustomCreatePath }}</span>
+ </el-button>
+ <label v-else>暂无表单</label>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="最新部署的流程定义" align="center">
+ <el-table-column
+ label="流程版本"
+ align="center"
+ prop="processDefinition.version"
+ width="100"
+ >
+ <template #default="scope">
+ <el-tag v-if="scope.row.processDefinition">
+ v{{ scope.row.processDefinition.version }}
+ </el-tag>
+ <el-tag v-else type="warning">未部署</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="激活状态"
+ align="center"
+ prop="processDefinition.version"
+ width="85"
+ >
+ <template #default="scope">
+ <el-switch
+ v-if="scope.row.processDefinition"
+ v-model="scope.row.processDefinition.suspensionState"
+ :active-value="1"
+ :inactive-value="2"
+ @change="handleChangeState(scope.row)"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
+ <template #default="scope">
+ <span v-if="scope.row.processDefinition">
+ {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+ </span>
+ </template>
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="操作" align="center" width="240" fixed="right">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['bpm:model:update']"
+ >
+ 修改流程
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="handleDesign(scope.row)"
+ v-hasPermi="['bpm:model:update']"
+ >
+ 设计流程
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="handleAssignRule(scope.row)"
+ v-hasPermi="['bpm:task-assign-rule:query']"
+ >
+ 分配规则
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="handleDeploy(scope.row)"
+ v-hasPermi="['bpm:model:deploy']"
+ >
+ 发布流程
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ v-hasPermi="['bpm:process-definition:query']"
+ @click="handleDefinitionList(scope.row)"
+ >
+ 流程定义
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['bpm:model:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改流程 -->
+ <ModelForm ref="formRef" @success="getList" />
+
+ <!-- 表单弹窗：导入流程 -->
+ <ModelImportForm ref="importFormRef" @success="getList" />
+
+ <!-- 弹窗：表单详情 -->
+ <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
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
-import { FormInstance, UploadInstance } from 'element-plus'
-
-// 业务相关的 import
-import { getAccessToken, getTenantId } from '@/utils/auth'
-import * as FormApi from '@/api/bpm/form'
+<script setup lang="ts" name="Form">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter, formatDate } from '@/utils/formatTime'
import * as ModelApi from '@/api/bpm/model'
-import { allSchemas, rules } from './model.data'
+import * as FormApi from '@/api/bpm/form'
+import ModelForm from './ModelForm.vue'
+import ModelImportForm from '@/views/bpm/model/ModelImportForm.vue'
import { setConfAndFields2 } from '@/utils/formCreate'
-
-const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
-const router = useRouter() // 路由
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
-const showBpmnOpen = ref(false)
-const bpmnXML = ref(null)
-const bpmnControlForm = ref({
- prefix: 'flowable'
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ key: undefined,
+ name: undefined,
+ category: undefined
})
-// ========== 列表相关 ==========
-const [registerTable, { reload }] = useXTable({
- allSchemas: allSchemas,
- getListApi: ModelApi.getModelPageApi
-})
-const forms = ref() // 流程表单的下拉框的数据
+const queryFormRef = ref() // 搜索的表单
-// 设计流程
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await ModelApi.getModelPage(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 formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
+}
+
+/** 添加/修改操作 */
+const importFormRef = ref()
+const openImportForm = () => {
+ importFormRef.value.open()
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await ModelApi.deleteModel(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row) => {
+ const state = row.processDefinition.suspensionState
+ try {
+ // 修改状态的二次确认
+ const id = row.id
+ const statusState = state === 1 ? '激活' : '挂起'
+ const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+ await message.confirm(content)
+ // 发起修改状态
+ await ModelApi.updateModelState(id, state)
+ // 刷新列表
+ await getList()
+ } catch {
+ // 取消后，进行恢复按钮
+ row.processDefinition.suspensionState = state === 1 ? 2 : 1
+ }
+}
+
+/** 设计流程 */
const handleDesign = (row) => {
- console.log(row, '设计流程')
- router.push({
+ push({
name: 'modelEditor',
query: {
modelId: row.id
@@ -355,9 +326,32 @@ const handleDesign = (row) => {
})
}
-// 跳转到指定流程定义列表
+/** 发布流程 */
+const handleDeploy = async (row) => {
+ try {
+ // 删除的二次确认
+ await message.confirm('是否部署该流程！！')
+ // 发起部署
+ await ModelApi.deployModel(row.id)
+ message.success(t('部署成功'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 点击任务分配按钮 */
+const handleAssignRule = (row) => {
+ push({
+ name: 'BpmTaskAssignRuleList',
+ query: {
+ modelId: row.id
+ }
+ })
+}
+
+/** 跳转到指定流程定义列表 */
const handleDefinitionList = (row) => {
- router.push({
+ push({
name: 'BpmProcessDefinitionList',
query: {
key: row.key
@@ -365,7 +359,7 @@ const handleDefinitionList = (row) => {
})
}
-// 流程表单的详情按钮操作
+/** 流程表单的详情按钮操作 */
const formDetailVisible = ref(false)
const formDetailPreview = ref({
rule: [],
@@ -374,222 +368,31 @@ const formDetailPreview = ref({
const handleFormDetail = async (row) => {
if (row.formType == 10) {
// 设置表单
- const data = await FormApi.getFormApi(row.formId)
+ const data = await FormApi.getForm(row.formId)
setConfAndFields2(formDetailPreview, data.conf, data.fields)
// 弹窗打开
formDetailVisible.value = true
} else {
- await router.push({
+ await push({
path: row.formCustomCreatePath
})
}
}
-// 流程图的详情按钮操作
-const handleBpmnDetail = (row) => {
- // TODO 芋艿：流程组件开发中
- console.log(row)
- ModelApi.getModelApi(row).then((response) => {
- console.log(response, 'response')
- bpmnXML.value = response.bpmnXml
- // 弹窗打开
- showBpmnOpen.value = true
- })
- // message.success('流程组件开发中，预计 2 月底完成')
-}
-
-// 点击任务分配按钮
-const handleAssignRule = (row) => {
- router.push({
- name: 'BpmTaskAssignRuleList',
- query: {
- modelId: row.id
- }
- })
-}
-
-// ========== 新建/修改流程 ==========
-const dialogVisible = ref(false)
-const dialogTitle = ref('新建模型')
-const dialogLoading = ref(false)
-const saveForm = ref()
-const saveFormRef = ref<FormInstance>()
-
-// 设置标题
-const setDialogTile = async (type: string) => {
- dialogTitle.value = t('action.' + type)
- dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = async () => {
- resetForm()
- await setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- resetForm()
- await setDialogTile('edit')
- // 设置数据
- saveForm.value = await ModelApi.getModelApi(rowId)
- if (saveForm.value.category == null) {
- saveForm.value.category = '1'
- } else {
- saveForm.value.category = saveForm.value.category
- }
-}
-
-// 提交按钮
-const submitForm = async () => {
- // 参数校验
- const elForm = unref(saveFormRef)
- if (!elForm) return
- const valid = await elForm.validate()
- if (!valid) return
-
- // 提交请求
- dialogLoading.value = true
- try {
- const data = saveForm.value as ModelApi.ModelVO
- if (!data.id) {
- await ModelApi.createModelApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await ModelApi.updateModelApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- // 刷新列表
- await reload()
- dialogLoading.value = false
- }
-}
-
-// 重置表单
-const resetForm = () => {
- saveForm.value = {
- formType: 10,
- name: '',
- courseSort: '',
- description: '',
- formId: '',
- formCustomCreatePath: '',
- formCustomViewPath: ''
- }
- saveFormRef.value?.resetFields()
-}
-
-// ========== 删除 / 更新状态 / 发布流程 ==========
-// 删除流程
-const handleDelete = (rowId) => {
- message.delConfirm('是否删除该流程！！').then(async () => {
- await ModelApi.deleteModelApi(rowId)
- message.success(t('common.delSuccess'))
- // 刷新列表
- reload()
- })
-}
-
-// 更新状态操作
-const handleChangeState = (row) => {
- const id = row.id
- const state = row.processDefinition.suspensionState
- const statusState = state === 1 ? '激活' : '挂起'
- const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
- message
- .confirm(content)
- .then(async () => {
- await ModelApi.updateModelStateApi(id, state)
- message.success(t('部署成功'))
- // 刷新列表
- reload()
- })
- .catch(() => {
- // 取消后，进行恢复按钮
- row.processDefinition.suspensionState = state === 1 ? 2 : 1
- })
-}
-
-// 发布流程
-const handleDeploy = (row) => {
- message.confirm('是否部署该流程！！').then(async () => {
- await ModelApi.deployModelApi(row.id)
- message.success(t('部署成功'))
- // 刷新列表
- reload()
- })
-}
-
-// ========== 导入流程 ==========
-const uploadRef = ref<UploadInstance>()
-let importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
-const uploadHeaders = ref()
-const importDialogVisible = ref(false)
-const uploadDisabled = ref(false)
-const importFormRef = ref<FormInstance>()
-const importForm = ref({
- key: '',
- name: '',
- description: ''
+/** 流程图的详情按钮操作 */
+const bpmnDetailVisible = ref(false)
+const bpmnXML = ref(null)
+const bpmnControlForm = ref({
+ prefix: 'flowable'
})
-
-// 导入流程弹窗显示
-const handleImport = () => {
- importDialogVisible.value = true
-}
-// 文件数超出提示
-const handleExceed = (): void => {
- message.error('最多只能上传一个文件！')
-}
-// 上传错误提示
-const excelUploadError = (): void => {
- message.error('导入流程失败，请您重新上传！')
+const handleBpmnDetail = async (row) => {
+ const data = await ModelApi.getModel(row.id)
+ bpmnXML.value = data.bpmnXml || ''
+ bpmnDetailVisible.value = true
}
-// 提交文件上传
-const submitFileForm = () => {
- uploadHeaders.value = {
- Authorization: 'Bearer ' + getAccessToken(),
- 'tenant-id': getTenantId()
- }
- uploadDisabled.value = true
- uploadRef.value!.submit()
-}
-// 文件上传成功
-const handleFileSuccess = async (response: any): Promise<void> => {
- if (response.code !== 0) {
- message.error(response.msg)
- return
- }
- // 重置表单
- uploadClose()
- // 提示，并刷新
- message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
- await reload()
-}
-// 关闭文件上传
-const uploadClose = () => {
- // 关闭弹窗
- importDialogVisible.value = false
- // 重置上传状态和文件
- uploadDisabled.value = false
- uploadRef.value!.clearFiles()
- // 重置表单
- importForm.value = {
- key: '',
- name: '',
- description: ''
- }
- importFormRef.value?.resetFields()
-}
-
-// ========== 初始化 ==========
+/** 初始化 **/
onMounted(() => {
- // 获得流程表单的下拉框的数据
- FormApi.getSimpleFormsApi().then((data) => {
- forms.value = data
- })
+ getList()
})
</script>
diff --git a/src/views/bpm/model/model.data.ts b/src/views/bpm/model/model.data.ts
deleted file mode 100644
index 89e886cc..00000000
--- a/src/views/bpm/model/model.data.ts
+++ /dev/null
@@ -1,106 +0,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)
diff --git a/src/views/bpm/model/modelEditor.vue b/src/views/bpm/model/modelEditor.vue
deleted file mode 100644
index 43836976..00000000
--- a/src/views/bpm/model/modelEditor.vue
+++ /dev/null
@@ -1,204 +0,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>
diff --git a/src/views/bpm/processInstance/create.vue b/src/views/bpm/processInstance/create.vue
deleted file mode 100644
index 1b59ec7c..00000000
--- a/src/views/bpm/processInstance/create.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
- <ContentWrap>
- <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
- <div v-if="!selectProcessInstance">
- <XTable @register="registerTable">
- <!-- 流程分类 -->
- <template #category_default="{ row }">
- <DictTag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="Number(row?.category)" />
- </template>
- <template #version_default="{ row }">
- <el-tag v-if="row">v{{ row.version }}</el-tag>
- </template>
- <template #actionbtns_default="{ row }">
- <XTextButton preIcon="ep:plus" title="选择" @click="handleSelect(row)" />
- </template>
- </XTable>
- </div>
- <!-- 第二步，填写表单，进行流程的提交 -->
- <div v-else>
- <el-card class="box-card">
- <div class="clearfix">
- <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
- <XButton
- style="float: right"
- type="primary"
- preIcon="ep:delete"
- title="选择其它流程"
- @click="selectProcessInstance = undefined"
- />
- </div>
- <el-col :span="16" :offset="6" style="margin-top: 20px">
- <form-create
- :rule="detailForm.rule"
- v-model:api="fApi"
- :option="detailForm.option"
- @submit="submitForm"
- />
- </el-col>
- </el-card>
- <el-card class="box-card">
- <div class="clearfix">
- <span class="el-icon-picture-outline">流程图</span>
- </div>
- <!-- TODO 芋艿：待完成？？？ -->
- <my-process-viewer
- key="designer"
- v-model="bpmnXML"
- :value="bpmnXML"
- v-bind="bpmnControlForm"
- :prefix="bpmnControlForm.prefix"
- />
- </el-card>
- </div>
- </ContentWrap>
-</template>
-<script setup lang="ts">
-// 业务相关的 import
-import { allSchemas } from './process.create'
-import * as DefinitionApi from '@/api/bpm/definition'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import { DICT_TYPE } from '@/utils/dict'
-
-const router = useRouter() // 路由
-const message = useMessage() // 消息
-
-// ========== 列表相关 ==========
-
-const [registerTable] = useXTable({
- allSchemas: allSchemas,
- params: {
- suspensionState: 1
- },
- getListApi: DefinitionApi.getProcessDefinitionListApi,
- isList: true
-})
-
-// ========== 表单相关 ==========
-
-const fApi = ref<ApiAttrs>()
-
-// 流程表单详情
-const detailForm = ref({
- rule: [],
- option: {}
-})
-
-// 流程表单
-const selectProcessInstance = ref() // 选择的流程实例
-/** 处理选择流程的按钮操作 **/
-const handleSelect = async (row) => {
- // 设置选择的流程
- selectProcessInstance.value = row
-
- // 情况一：流程表单
- if (row.formType == 10) {
- // 设置表单
- setConfAndFields2(detailForm, row.formConf, row.formFields)
-
- // 加载流程图
- DefinitionApi.getProcessDefinitionBpmnXMLApi(row.id).then((response) => {
- bpmnXML.value = response
- })
- // 情况二：业务表单
- } else if (row.formCustomCreatePath) {
- await router.push({
- path: row.formCustomCreatePath
- })
- // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
- }
-}
-
-/** 提交按钮 */
-const submitForm = async (formData) => {
- if (!fApi.value || !selectProcessInstance.value) {
- return
- }
-
- // 提交请求
- fApi.value.btn.loading(true)
- try {
- await ProcessInstanceApi.createProcessInstanceApi({
- processDefinitionId: selectProcessInstance.value.id,
- variables: formData
- })
- // 提示
- message.success('发起流程成功')
- // this.$tab.closeOpenPage();
- router.go(-1)
- } finally {
- fApi.value.btn.loading(false)
- }
-}
-
-// ========== 流程图相关 ==========
-
-// // BPMN 数据
-const bpmnXML = ref(null)
-const bpmnControlForm = ref({
- prefix: 'flowable'
-})
-</script>
-
-<style lang="scss">
-.my-process-designer {
- height: calc(100vh - 200px);
-}
-
-.box-card {
- width: 100%;
- margin-bottom: 20px;
-}
-</style>
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
new file mode 100644
index 00000000..dd043eae
--- /dev/null
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -0,0 +1,130 @@
+<template>
+ <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+ <ContentWrap v-if="!selectProcessInstance">
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="流程名称" align="center" prop="name" />
+ <el-table-column label="流程分类" align="center" prop="category">
+ <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="version">
+ <template #default="scope">
+ <el-tag>v{{ scope.row.version }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="流程描述" align="center" prop="description" />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button link type="primary" @click="handleSelect(scope.row)">
+ <Icon icon="ep:plus" /> 选择
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </ContentWrap>
+
+ <!-- 第二步，填写表单，进行流程的提交 -->
+ <ContentWrap v-else>
+ <el-card class="box-card">
+ <div class="clearfix">
+ <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
+ <el-button style="float: right" type="primary" @click="selectProcessInstance = undefined">
+ <Icon icon="ep:delete" /> 选择其它流程
+ </el-button>
+ </div>
+ <el-col :span="16" :offset="6" style="margin-top: 20px">
+ <form-create
+ :rule="detailForm.rule"
+ v-model:api="fApi"
+ :option="detailForm.option"
+ @submit="submitForm"
+ />
+ </el-col>
+ </el-card>
+ <!-- 流程图预览 -->
+ <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
+ </ContentWrap>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+const router = useRouter() // 路由
+const message = useMessage() // 消息
+
+// ========== 列表相关 ==========
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ suspensionState: 1
+})
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ list.value = await DefinitionApi.getProcessDefinitionList(queryParams)
+ } finally {
+ loading.value = false
+ }
+}
+
+// ========== 表单相关 ==========
+const bpmnXML = ref(null) // BPMN 数据
+const fApi = ref<ApiAttrs>()
+const detailForm = ref({
+ // 流程表单详情
+ rule: [],
+ option: {}
+})
+const selectProcessInstance = ref() // 选择的流程实例
+
+/** 处理选择流程的按钮操作 **/
+const handleSelect = async (row) => {
+ // 设置选择的流程
+ selectProcessInstance.value = row
+
+ // 情况一：流程表单
+ if (row.formType == 10) {
+ // 设置表单
+ setConfAndFields2(detailForm, row.formConf, row.formFields)
+ // 加载流程图
+ bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(row.id)
+ // 情况二：业务表单
+ } else if (row.formCustomCreatePath) {
+ await router.push({
+ path: row.formCustomCreatePath
+ })
+ // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+ }
+}
+
+/** 提交按钮 */
+const submitForm = async (formData) => {
+ if (!fApi.value || !selectProcessInstance.value) {
+ return
+ }
+ // 提交请求
+ fApi.value.btn.loading(true)
+ try {
+ await ProcessInstanceApi.createProcessInstanceApi({
+ processDefinitionId: selectProcessInstance.value.id,
+ variables: formData
+ })
+ // 提示
+ message.success('发起流程成功')
+ router.go(-1)
+ } finally {
+ fApi.value.btn.loading(false)
+ }
+}
+
+/** 初始化 */
+onMounted(() => {
+ getList()
+})
+</script>
diff --git a/src/views/bpm/processInstance/detail.vue b/src/views/bpm/processInstance/detail.vue
deleted file mode 100644
index b6d52a4c..00000000
--- a/src/views/bpm/processInstance/detail.vue
+++ /dev/null
@@ -1,490 +0,0 @@
-<template>
- <ContentWrap>
- <!-- 审批信息 -->
- <el-card
- class="box-card"
- v-loading="processInstanceLoading"
- v-for="(item, index) in runningTasks"
- :key="index"
- >
- <template #header>
- <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
- </template>
- <el-col :span="16" :offset="6">
- <el-form
- :ref="'form' + index"
- :model="auditForms[index]"
- :rules="auditRule"
- label-width="100px"
- >
- <el-form-item label="流程名" v-if="processInstance && processInstance.name">
- {{ processInstance.name }}
- </el-form-item>
- <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
- {{ processInstance.startUser.nickname }}
- <el-tag type="info" size="small">{{ processInstance.startUser.deptName }}</el-tag>
- </el-form-item>
- <el-form-item label="审批建议" prop="reason">
- <el-input
- type="textarea"
- v-model="auditForms[index].reason"
- placeholder="请输入审批建议"
- />
- </el-form-item>
- </el-form>
- <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
- <XButton
- pre-icon="ep:select"
- type="success"
- title="通过"
- @click="handleAudit(item, true)"
- />
- <XButton
- pre-icon="ep:close"
- type="danger"
- title="不通过"
- @click="handleAudit(item, false)"
- />
- <XButton
- pre-icon="ep:edit"
- type="primary"
- title="转办"
- @click="handleUpdateAssignee(item)"
- />
- <XButton
- pre-icon="ep:position"
- type="primary"
- title="委派"
- @click="handleDelegate(item)"
- />
- <XButton pre-icon="ep:back" type="warning" title="委派" @click="handleBack(item)" />
- </div>
- </el-col>
- </el-card>
-
- <!-- 申请信息 -->
- <el-card class="box-card" v-loading="processInstanceLoading">
- <template #header>
- <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
- </template>
- <!-- 情况一：流程表单 -->
- <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6">
- <form-create
- ref="fApi"
- :rule="detailForm.rule"
- :option="detailForm.option"
- v-model="detailForm.value"
- />
- </el-col>
- <!-- 情况二：流程表单 -->
- <div v-if="processInstance?.processDefinition?.formType === 20">
- <router-link
- :to="
- processInstance.processDefinition.formCustomViewPath +
- '?id=' +
- processInstance.businessKey
- "
- >
- <XButton type="primary" preIcon="ep:view" title="点击查看" />
- </router-link>
- </div>
- </el-card>
-
- <!-- 审批记录 -->
- <el-card class="box-card" v-loading="tasksLoad">
- <template #header>
- <span class="el-icon-picture-outline">审批记录</span>
- </template>
- <el-col :span="16" :offset="4">
- <div class="block">
- <el-timeline>
- <el-timeline-item
- v-for="(item, index) in tasks"
- :key="index"
- :icon="getTimelineItemIcon(item)"
- :type="getTimelineItemType(item)"
- >
- <p style="font-weight: 700">任务：{{ item.name }}</p>
- <el-card :body-style="{ padding: '10px' }">
- <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
- 审批人：{{ item.assigneeUser.nickname }}
- <el-tag type="info" size="small">{{ item.assigneeUser.deptName }}</el-tag>
- </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') }}
- </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') }}
- </label>
- <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
- 耗时：
- </label>
- <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
- {{ formatPast2(item?.durationInMillis) }}
- </label>
- <p v-if="item.reason">
- <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
- </p>
- </el-card>
- </el-timeline-item>
- </el-timeline>
- </div>
- </el-col>
- </el-card>
-
- <!-- 高亮流程图 -->
- <el-card class="box-card" v-loading="processInstanceLoading">
- <template #header>
- <span class="el-icon-picture-outline">流程图</span>
- </template>
- <my-process-viewer
- key="designer"
- v-model="bpmnXML"
- :value="bpmnXML"
- v-bind="bpmnControlForm"
- :prefix="bpmnControlForm.prefix"
- :activityData="activityList"
- :processInstanceData="processInstance"
- :taskData="tasks"
- />
- </el-card>
-
- <!-- 对话框(转派审批人) -->
- <XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
- <el-form
- ref="updateAssigneeFormRef"
- :model="updateAssigneeForm"
- :rules="updateAssigneeRules"
- label-width="110px"
- >
- <el-form-item label="新审批人" prop="assigneeUserId">
- <el-select v-model="updateAssigneeForm.assigneeUserId" 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>
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- type="primary"
- :title="t('action.save')"
- :loading="updateAssigneeLoading"
- @click="submitUpdateAssigneeForm"
- />
- <!-- 按钮：关闭 -->
- <XButton
- :loading="updateAssigneeLoading"
- :title="t('dialog.close')"
- @click="updateAssigneeLoading = false"
- />
- </template>
- </XModal>
- </ContentWrap>
-</template>
-<script setup lang="ts">
-import dayjs from 'dayjs'
-import * as UserApi from '@/api/system/user'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import * as DefinitionApi from '@/api/bpm/definition'
-import * as TaskApi from '@/api/bpm/task'
-import * as ActivityApi from '@/api/bpm/activity'
-import { formatPast2 } from '@/utils/formatTime'
-import { setConfAndFields2 } from '@/utils/formCreate'
-// import { OptionAttrs } from '@form-create/element-ui/types/config'
-import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import { useUserStore } from '@/store/modules/user'
-
-const { query } = useRoute() // 查询参数
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-const { proxy } = getCurrentInstance() as any
-
-// ========== 审批信息 ==========
-const id = query.id as unknown as number
-const processInstanceLoading = ref(false) // 流程实例的加载中
-const processInstance = ref<any>({}) // 流程实例
-const runningTasks = ref<any[]>([]) // 运行中的任务
-const auditForms = ref<any[]>([]) // 审批任务的表单
-const auditRule = reactive({
- reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
-})
-
-// 处理审批通过和不通过的操作
-const handleAudit = async (task, pass) => {
- // 1.1 获得对应表单
- const index = runningTasks.value.indexOf(task)
- const auditFormRef = proxy.$refs['form' + index][0]
- // alert(auditFormRef)
-
- // 1.2 校验表单
- const elForm = unref(auditFormRef)
- if (!elForm) return
- const valid = await elForm.validate()
- if (!valid) return
-
- // 2.1 提交审批
- const data = {
- id: task.id,
- reason: auditForms.value[index].reason
- }
- if (pass) {
- await TaskApi.approveTask(data)
- message.success('审批通过成功')
- } else {
- await TaskApi.rejectTask(data)
- message.success('审批不通过成功')
- }
- // 2.2 加载最新数据
- getDetail()
-}
-
-// ========== 申请信息 ==========
-const fApi = ref<ApiAttrs>()
-const userId = useUserStore().getUser.id // 当前登录的编号
-// 流程表单详情
-const detailForm = ref({
- rule: [],
- option: {},
- value: {}
-})
-
-// ========== 审批记录 ==========
-const tasksLoad = ref(true)
-const tasks = ref<any[]>([])
-
-const getTimelineItemIcon = (item) => {
- if (item.result === 1) {
- return 'el-icon-time'
- }
- if (item.result === 2) {
- return 'el-icon-check'
- }
- if (item.result === 3) {
- return 'el-icon-close'
- }
- if (item.result === 4) {
- return 'el-icon-remove-outline'
- }
- return ''
-}
-const getTimelineItemType = (item) => {
- if (item.result === 1) {
- return 'primary'
- }
- if (item.result === 2) {
- return 'success'
- }
- if (item.result === 3) {
- return 'danger'
- }
- if (item.result === 4) {
- return 'info'
- }
- return ''
-}
-
-// ========== 审批记录 ==========
-const updateAssigneeVisible = ref(false)
-const updateAssigneeLoading = ref(false)
-const updateAssigneeForm = ref({
- id: undefined,
- assigneeUserId: undefined
-})
-const updateAssigneeRules = ref({
- assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
-})
-const updateAssigneeFormRef = ref()
-const userOptions = ref<any[]>([])
-
-// 处理转派审批人
-const handleUpdateAssignee = (task) => {
- // 设置表单
- resetUpdateAssigneeForm()
- updateAssigneeForm.value.id = task.id
- // 设置为打开
- updateAssigneeVisible.value = true
-}
-
-// 提交转派审批人
-const submitUpdateAssigneeForm = async () => {
- // 1. 校验表单
- const elForm = unref(updateAssigneeFormRef)
- if (!elForm) return
- const valid = await elForm.validate()
- if (!valid) return
-
- // 2.1 提交审批
- updateAssigneeLoading.value = true
- try {
- await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
- // 2.2 设置为隐藏
- updateAssigneeVisible.value = false
- // 加载最新数据
- getDetail()
- } finally {
- updateAssigneeLoading.value = false
- }
-}
-
-// 重置转派审批人表单
-const resetUpdateAssigneeForm = () => {
- updateAssigneeForm.value = {
- id: undefined,
- assigneeUserId: undefined
- }
- updateAssigneeFormRef.value?.resetFields()
-}
-
-/** 处理审批退回的操作 */
-const handleDelegate = async (task) => {
- message.error('暂不支持【委派】功能，可以使用【转派】替代！')
- console.log(task)
-}
-
-/** 处理审批退回的操作 */
-const handleBack = async (task) => {
- message.error('暂不支持【退回】功能！')
- // 可参考 http://blog.wya1.com/article/636697030/details/7296
- // const data = {
- // id: task.id,
- // assigneeUserId: 1
- // }
- // backTask(data).then(response => {
- // this.$modal.msgSuccess("回退成功！");
- // this.getDetail(); // 获得最新详情
- // });
- console.log(task)
-}
-
-// ========== 高亮流程图 ==========
-const bpmnXML = ref(null)
-const bpmnControlForm = ref({
- prefix: 'flowable'
-})
-const activityList = ref([])
-
-// ========== 初始化 ==========
-onMounted(() => {
- // 加载详情
- getDetail()
- // 加载用户的列表
- UserApi.getListSimpleUsersApi().then((data) => {
- userOptions.value.push(...data)
- })
-})
-
-const getDetail = () => {
- // 1. 获得流程实例相关
- processInstanceLoading.value = true
- ProcessInstanceApi.getProcessInstanceApi(id)
- .then((data) => {
- if (!data) {
- message.error('查询不到流程信息！')
- return
- }
- processInstance.value = data
-
- // 设置表单信息
- const processDefinition = data.processDefinition
- if (processDefinition.formType === 10) {
- setConfAndFields2(
- detailForm,
- processDefinition.formConf,
- processDefinition.formFields,
- data.formVariables
- )
- nextTick().then(() => {
- fApi.value?.fapi?.btn.show(false)
- fApi.value?.fapi?.resetBtn.show(false)
- fApi.value?.fapi?.disabled(true)
- })
- }
-
- // 加载流程图
- DefinitionApi.getProcessDefinitionBpmnXMLApi(processDefinition.id).then((data) => {
- bpmnXML.value = data
- })
-
- // 加载活动列表
- ActivityApi.getActivityList({
- processInstanceId: data.id
- }).then((data) => {
- activityList.value = data
- })
- })
- .finally(() => {
- processInstanceLoading.value = false
- })
-
- // 2. 获得流程任务列表（审批记录）
- tasksLoad.value = true
- runningTasks.value = []
- auditForms.value = []
- TaskApi.getTaskListByProcessInstanceId(id)
- .then((data) => {
- // 审批记录
- tasks.value = []
- // 移除已取消的审批
- data.forEach((task) => {
- if (task.result !== 4) {
- tasks.value.push(task)
- }
- })
- // 排序，将未完成的排在前面，已完成的排在后面；
- tasks.value.sort((a, b) => {
- // 有已完成的情况，按照完成时间倒序
- if (a.endTime && b.endTime) {
- return b.endTime - a.endTime
- } else if (a.endTime) {
- return 1
- } else if (b.endTime) {
- return -1
- // 都是未完成，按照创建时间倒序
- } else {
- return b.createTime - a.createTime
- }
- })
-
- // 需要审核的记录
- tasks.value.forEach((task) => {
- // 1.1 只有待处理才需要
- if (task.result !== 1) {
- return
- }
- // 1.2 自己不是处理人
- if (!task.assigneeUser || task.assigneeUser.id !== userId) {
- return
- }
- // 2. 添加到处理任务
- runningTasks.value.push({ ...task })
- auditForms.value.push({
- reason: ''
- })
- })
- })
- .finally(() => {
- tasksLoad.value = false
- })
-}
-</script>
-
-<style lang="scss">
-.my-process-designer {
- height: calc(100vh - 200px);
-}
-
-.box-card {
- width: 100%;
- margin-bottom: 20px;
-}
-</style>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
new file mode 100644
index 00000000..3a3e244b
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -0,0 +1,55 @@
+<template>
+ <el-card class="box-card" v-loading="loading">
+ <template #header>
+ <span class="el-icon-picture-outline">流程图</span>
+ </template>
+ <my-process-viewer
+ key="designer"
+ :value="bpmnXml"
+ v-bind="bpmnControlForm"
+ :prefix="bpmnControlForm.prefix"
+ :activityData="activityList"
+ :processInstanceData="processInstance"
+ :taskData="tasks"
+ />
+ </el-card>
+</template>
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+import * as ActivityApi from '@/api/bpm/activity'
+// import * as DefinitionApi from '@/api/bpm/definition'
+
+const props = defineProps({
+ loading: propTypes.bool, // 是否加载中
+ id: propTypes.string, // 流程实例的编号
+ processInstance: propTypes.any, // 流程实例的信息
+ tasks: propTypes.array, // 流程任务的数组
+ bpmnXml: propTypes.string // BPMN XML
+})
+
+const bpmnControlForm = ref({
+ prefix: 'flowable'
+})
+const activityList = ref([]) // 任务列表
+// const bpmnXML = computed(() => { // TODO 芋艿：不晓得为啊哈不能这么搞
+// if (!props.processInstance || !props.processInstance.processDefinition) {
+// return
+// }
+// return DefinitionApi.getProcessDefinitionBpmnXML(props.processInstance.processDefinition.id)
+// })
+
+/** 初始化 */
+onMounted(async () => {
+ if (props.id) {
+ activityList.value = await ActivityApi.getActivityList({
+ processInstanceId: props.id
+ })
+ }
+})
+</script>
+<style>
+.box-card {
+ width: 100%;
+ margin-bottom: 20px;
+}
+</style>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
new file mode 100644
index 00000000..3bbabcc6
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
@@ -0,0 +1,89 @@
+<template>
+ <el-card class="box-card" v-loading="loading">
+ <template #header>
+ <span class="el-icon-picture-outline">审批记录</span>
+ </template>
+ <el-col :span="16" :offset="4">
+ <div class="block">
+ <el-timeline>
+ <el-timeline-item
+ v-for="(item, index) in tasks"
+ :key="index"
+ :icon="getTimelineItemIcon(item)"
+ :type="getTimelineItemType(item)"
+ >
+ <p style="font-weight: 700">任务：{{ item.name }}</p>
+ <el-card :body-style="{ padding: '10px' }">
+ <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
+ 审批人：{{ item.assigneeUser.nickname }}
+ <el-tag type="info" size="small">{{ item.assigneeUser.deptName }}</el-tag>
+ </label>
+ <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
+ <label style="color: #8a909c; font-weight: normal">
+ {{ parseTime(item?.createTime) }}
+ </label>
+ <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
+ 审批时间：
+ </label>
+ <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
+ {{ parseTime(item?.endTime) }}
+ </label>
+ <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
+ 耗时：
+ </label>
+ <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
+ {{ formatPast2(item?.durationInMillis) }}
+ </label>
+ <p v-if="item.reason">
+ <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
+ </p>
+ </el-card>
+ </el-timeline-item>
+ </el-timeline>
+ </div>
+ </el-col>
+ </el-card>
+</template>
+<script setup lang="ts">
+import { parseTime, formatPast2 } from '@/utils/formatTime'
+import { propTypes } from '@/utils/propTypes'
+
+defineProps({
+ loading: propTypes.bool, // 是否加载中
+ tasks: propTypes.array // 流程任务的数组
+})
+
+/** 获得任务对应的 icon */
+const getTimelineItemIcon = (item) => {
+ if (item.result === 1) {
+ return 'el-icon-time'
+ }
+ if (item.result === 2) {
+ return 'el-icon-check'
+ }
+ if (item.result === 3) {
+ return 'el-icon-close'
+ }
+ if (item.result === 4) {
+ return 'el-icon-remove-outline'
+ }
+ return ''
+}
+
+/** 获得任务对应的颜色 */
+const getTimelineItemType = (item) => {
+ if (item.result === 1) {
+ return 'primary'
+ }
+ if (item.result === 2) {
+ return 'success'
+ }
+ if (item.result === 3) {
+ return 'danger'
+ }
+ if (item.result === 4) {
+ return 'info'
+ }
+ return ''
+}
+</script>
diff --git a/src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue b/src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue
new file mode 100644
index 00000000..7f9cfd48
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue
@@ -0,0 +1,81 @@
+<template>
+ <Dialog title="转派审批人" v-model="modelVisible" width="500">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="110px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="新审批人" prop="assigneeUserId">
+ <el-select v-model="formData.assigneeUserId" clearable style="width: 100%">
+ <el-option
+ v-for="item in userList"
+ :key="item.id"
+ :label="item.nickname"
+ :value="item.id"
+ />
+ </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 * as TaskApi from '@/api/bpm/task'
+import * as UserApi from '@/api/system/user'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+ id: '',
+ assigneeUserId: undefined
+})
+const formRules = ref({
+ assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
+})
+
+const formRef = ref() // 表单 Ref
+const userList = ref<any[]>([]) // 用户列表
+
+/** 打开弹窗 */
+const open = async (id: string) => {
+ modelVisible.value = true
+ resetForm()
+ formData.value.id = id
+ // 获得用户列表
+ userList.value = await UserApi.getSimpleUserList()
+}
+defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ await TaskApi.updateTaskAssignee(formData.value)
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: '',
+ assigneeUserId: undefined
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
new file mode 100644
index 00000000..3a48b3b3
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -0,0 +1,277 @@
+<template>
+ <ContentWrap>
+ <!-- 审批信息 -->
+ <el-card
+ class="box-card"
+ v-loading="processInstanceLoading"
+ v-for="(item, index) in runningTasks"
+ :key="index"
+ >
+ <template #header>
+ <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
+ </template>
+ <el-col :span="16" :offset="6">
+ <el-form
+ :ref="'form' + index"
+ :model="auditForms[index]"
+ :rules="auditRule"
+ label-width="100px"
+ >
+ <el-form-item label="流程名" v-if="processInstance && processInstance.name">
+ {{ processInstance.name }}
+ </el-form-item>
+ <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
+ {{ processInstance.startUser.nickname }}
+ <el-tag type="info" size="small">{{ processInstance.startUser.deptName }}</el-tag>
+ </el-form-item>
+ <el-form-item label="审批建议" prop="reason">
+ <el-input
+ type="textarea"
+ v-model="auditForms[index].reason"
+ placeholder="请输入审批建议"
+ />
+ </el-form-item>
+ </el-form>
+ <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
+ <el-button type="success" @click="handleAudit(item, true)">
+ <Icon icon="ep:select" /> 通过
+ </el-button>
+ <el-button type="danger" @click="handleAudit(item, false)">
+ <Icon icon="ep:close" /> 不通过
+ </el-button>
+ <el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
+ <Icon icon="ep:edit" /> 转办
+ </el-button>
+ <el-button type="primary" @click="handleDelegate(item)">
+ <Icon icon="ep:position" /> 委派
+ </el-button>
+ <el-button type="warning" @click="handleBack(item)">
+ <Icon icon="ep:back" /> 回退
+ </el-button>
+ </div>
+ </el-col>
+ </el-card>
+
+ <!-- 申请信息 -->
+ <el-card class="box-card" v-loading="processInstanceLoading">
+ <template #header>
+ <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
+ </template>
+ <!-- 情况一：流程表单 -->
+ <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="16" :offset="6">
+ <form-create
+ ref="fApi"
+ :rule="detailForm.rule"
+ :option="detailForm.option"
+ v-model="detailForm.value"
+ />
+ </el-col>
+ <!-- 情况二：流程表单 -->
+ <div v-if="processInstance?.processDefinition?.formType === 20">
+ <router-link
+ :to="
+ processInstance.processDefinition.formCustomViewPath +
+ '?id=' +
+ processInstance.businessKey
+ "
+ >
+ <el-button type="primary"><Icon icon="ep:view" /> 点击查看</el-button>
+ </router-link>
+ </div>
+ </el-card>
+
+ <!-- 审批记录 -->
+ <ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks" />
+
+ <!-- 高亮流程图 -->
+ <ProcessInstanceBpmnViewer
+ :id="id"
+ :process-instance="processInstance"
+ :loading="processInstanceLoading"
+ :tasks="tasks"
+ :bpmn-xml="bpmnXML"
+ />
+
+ <!-- 弹窗：转派审批人 -->
+ <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
+ </ContentWrap>
+</template>
+<script setup lang="ts">
+import { useUserStore } from '@/store/modules/user'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as TaskApi from '@/api/bpm/task'
+import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue'
+import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
+const { query } = useRoute() // 查询参数
+const message = useMessage() // 消息弹窗
+const { proxy } = getCurrentInstance() as any
+
+const userId = useUserStore().getUser.id // 当前登录的编号
+const id = query.id as unknown as number // 流程实例的编号
+const processInstanceLoading = ref(false) // 流程实例的加载中
+const processInstance = ref<any>({}) // 流程实例
+const bpmnXML = ref('') // BPMN XML
+const tasksLoad = ref(true) // 任务的加载中
+const tasks = ref<any[]>([]) // 任务列表
+// ========== 审批信息 ==========
+const runningTasks = ref<any[]>([]) // 运行中的任务
+const auditForms = ref<any[]>([]) // 审批任务的表单
+const auditRule = reactive({
+ reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
+})
+// ========== 申请信息 ==========
+const fApi = ref<ApiAttrs>() //
+const detailForm = ref({
+ // 流程表单详情
+ rule: [],
+ option: {},
+ value: {}
+})
+
+/** 处理审批通过和不通过的操作 */
+const handleAudit = async (task, pass) => {
+ // 1.1 获得对应表单
+ const index = runningTasks.value.indexOf(task)
+ const auditFormRef = proxy.$refs['form' + index][0]
+ // 1.2 校验表单
+ const elForm = unref(auditFormRef)
+ if (!elForm) return
+ const valid = await elForm.validate()
+ if (!valid) return
+
+ // 2.1 提交审批
+ const data = {
+ id: task.id,
+ reason: auditForms.value[index].reason
+ }
+ if (pass) {
+ await TaskApi.approveTask(data)
+ message.success('审批通过成功')
+ } else {
+ await TaskApi.rejectTask(data)
+ message.success('审批不通过成功')
+ }
+ // 2.2 加载最新数据
+ getDetail()
+}
+
+/** 转派审批人 */
+const taskUpdateAssigneeFormRef = ref()
+const openTaskUpdateAssigneeForm = (id: string) => {
+ taskUpdateAssigneeFormRef.value.open(id)
+}
+
+/** 处理审批退回的操作 */
+const handleDelegate = async (task) => {
+ message.error('暂不支持【委派】功能，可以使用【转派】替代！')
+ console.log(task)
+}
+
+/** 处理审批退回的操作 */
+const handleBack = async (task) => {
+ message.error('暂不支持【退回】功能！')
+ console.log(task)
+}
+
+/** 获得详情 */
+const getDetail = () => {
+ // 1. 获得流程实例相关
+ getProcessInstance()
+ // 2. 获得流程任务列表（审批记录）
+ getTaskList()
+}
+
+/** 加载流程实例 */
+const getProcessInstance = async () => {
+ try {
+ processInstanceLoading.value = true
+ const data = await ProcessInstanceApi.getProcessInstanceApi(id)
+ if (!data) {
+ message.error('查询不到流程信息！')
+ return
+ }
+ processInstance.value = data
+
+ // 设置表单信息
+ const processDefinition = data.processDefinition
+ if (processDefinition.formType === 10) {
+ setConfAndFields2(
+ detailForm,
+ processDefinition.formConf,
+ processDefinition.formFields,
+ data.formVariables
+ )
+ nextTick().then(() => {
+ fApi.value?.fapi?.btn.show(false)
+ fApi.value?.fapi?.resetBtn.show(false)
+ fApi.value?.fapi?.disabled(true)
+ })
+ }
+
+ // 加载流程图
+ bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id)
+ } finally {
+ processInstanceLoading.value = false
+ }
+}
+
+/** 加载任务列表 */
+const getTaskList = async () => {
+ try {
+ // 获得未取消的任务
+ tasksLoad.value = true
+ const data = await TaskApi.getTaskListByProcessInstanceId(id)
+ tasks.value = []
+ // 1.1 移除已取消的审批
+ data.forEach((task) => {
+ if (task.result !== 4) {
+ tasks.value.push(task)
+ }
+ })
+ // 1.2 排序，将未完成的排在前面，已完成的排在后面；
+ tasks.value.sort((a, b) => {
+ // 有已完成的情况，按照完成时间倒序
+ if (a.endTime && b.endTime) {
+ return b.endTime - a.endTime
+ } else if (a.endTime) {
+ return 1
+ } else if (b.endTime) {
+ return -1
+ // 都是未完成，按照创建时间倒序
+ } else {
+ return b.createTime - a.createTime
+ }
+ })
+
+ // 获得需要自己审批的任务
+ runningTasks.value = []
+ auditForms.value = []
+ tasks.value.forEach((task) => {
+ // 2.1 只有待处理才需要
+ if (task.result !== 1) {
+ return
+ }
+ // 2.2 自己不是处理人
+ if (!task.assigneeUser || task.assigneeUser.id !== userId) {
+ return
+ }
+ // 2.3 添加到处理任务
+ runningTasks.value.push({ ...task })
+ auditForms.value.push({
+ reason: ''
+ })
+ })
+ } finally {
+ tasksLoad.value = false
+ }
+}
+
+/** 初始化 */
+onMounted(() => {
+ getDetail()
+})
+</script>
diff --git a/src/views/bpm/processInstance/process.create.ts b/src/views/bpm/processInstance/process.create.ts
deleted file mode 100644
index 7516c0b4..00000000
--- a/src/views/bpm/processInstance/process.create.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-// crudSchemas
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: null,
- action: true,
- columns: [
- {
- title: '流程名称',
- field: 'name'
- },
- {
- title: '流程分类',
- field: 'category',
- dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
- dictClass: 'number',
- table: {
- slots: {
- default: 'category_default'
- }
- }
- },
- {
- title: '流程版本',
- field: 'version',
- table: {
- slots: {
- default: 'version_default'
- }
- }
- },
- {
- title: '流程描述',
- field: 'description'
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/bpm/taskAssignRule/TaskAssignRuleForm.vue b/src/views/bpm/taskAssignRule/TaskAssignRuleForm.vue
new file mode 100644
index 00000000..a452cab9
--- /dev/null
+++ b/src/views/bpm/taskAssignRule/TaskAssignRuleForm.vue
@@ -0,0 +1,247 @@
+<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>
diff --git a/src/views/bpm/taskAssignRule/index.vue b/src/views/bpm/taskAssignRule/index.vue
index 012e6f68..4a4e76f8 100644
--- a/src/views/bpm/taskAssignRule/index.vue
+++ b/src/views/bpm/taskAssignRule/index.vue
@@ -1,186 +1,73 @@
<template>
<ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable" ref="xGrid">
- <template #options_default="{ row }">
- <span :key="option" v-for="option in row.options">
- <el-tag>
- {{ getAssignRuleOptionName(row.type, option) }}
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="任务名" align="center" prop="taskDefinitionName" />
+ <el-table-column label="任务标识" align="center" prop="taskDefinitionKey" />
+ <el-table-column label="规则类型" align="center" prop="type">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE" :value="scope.row.type" />
+ </template>
+ </el-table-column>
+ <el-table-column label="规则范围" align="center" prop="options">
+ <template #default="scope">
+ <el-tag class="mr-5px" :key="option" v-for="option in scope.row.options">
+ {{ getAssignRuleOptionName(scope.row.type, option) }}
</el-tag>
-
- </span>
- </template>
- <!-- 操作 -->
- <template #actionbtns_default="{ row }" v-if="modelId">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['bpm:task-assign-rule:update']"
- @click="handleUpdate(row)"
- />
- </template>
- </XTable>
-
- <!-- 添加/修改弹窗 -->
- <XModal v-model="dialogVisible" title="修改任务规则" width="800" height="35%">
- <el-form ref="formRef" :model="formData" :rules="rules" 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 getDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)"
- :key="parseInt(dict.value)"
- :label="dict.label"
- :value="parseInt(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="parseInt(dict.value)"
- :label="dict.label"
- :value="parseInt(dict.value)"
- />
- </el-select>
- </el-form-item>
- </el-form>
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm"
- />
- <!-- 按钮：关闭 -->
- <XButton
- :loading="actionLoading"
- :title="t('dialog.close')"
- @click="dialogVisible = false"
- />
- </template>
- </XModal>
+ </template>
+ </el-table-column>
+ <el-table-column v-if="queryParams.modelId" label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm(scope.row)"
+ v-hasPermi="['bpm:task-assign-rule:update']"
+ >
+ 修改
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
</ContentWrap>
+ <!-- 添加/修改弹窗 -->
+ <TaskAssignRuleForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="TaskAssignRule">
-// 全局相关的 import
-import { FormInstance } from 'element-plus'
-// 业务相关的 import
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
-import { listSimpleRolesApi } from '@/api/system/role'
-import { listSimplePostsApi } from '@/api/system/post'
-import { getListSimpleUsersApi } from '@/api/system/user'
-import { listSimpleUserGroupsApi } from '@/api/bpm/userGroup'
-import { listSimpleDeptApi } from '@/api/system/dept'
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
-import { handleTree, defaultProps } from '@/utils/tree'
-import { allSchemas, rules, idShowActionClick } from './taskAssignRule.data'
+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'
+import TaskAssignRuleForm from './TaskAssignRuleForm.vue'
+const { query } = useRoute() // 查询参数
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-const { query } = useRoute()
-const xGrid = ref()
-
-// ========== 列表相关 ==========
-
-const roleOptions = ref() // 角色列表
-const deptOptions = ref() // 部门列表
-const deptTreeOptions = ref()
-const postOptions = ref() // 岗位列表
-const userOptions = ref() // 用户列表
-const userGroupOptions = ref() // 用户组列表
-const taskAssignScriptDictDatas = getDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT)
-
-// 流程模型的编号。如果 modelId 非空，则用于流程模型的查看与配置
-const modelId = query.modelId
-// 流程定义的编号。如果 processDefinitionId 非空，则用于流程定义的查看，不支持配置
-const processDefinitionId = query.processDefinitionId
-let isShow = idShowActionClick(modelId)
-
-// 查询参数
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
const queryParams = reactive({
- modelId: modelId,
- processDefinitionId: processDefinitionId
-})
-const [registerTable, { reload }] = useXTable({
- allSchemas: allSchemas,
- params: queryParams,
- getListApi: TaskAssignRuleApi.getTaskAssignRuleList,
- isList: true
+ modelId: query.modelId, // 流程模型的编号。如果 modelId 非空，则用于流程模型的查看与配置
+ processDefinitionId: query.processDefinitionId // 流程定义的编号。如果 processDefinitionId 非空，则用于流程定义的查看，不支持配置
})
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
+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 getList = async () => {
+ loading.value = true
+ try {
+ list.value = await TaskAssignRuleApi.getTaskAssignRuleList(queryParams)
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 翻译规则范围 */
+// TODO 芋艿：各种 ts 报错
const getAssignRuleOptionName = (type, option) => {
if (type === 10) {
for (const roleOption of roleOptions.value) {
@@ -223,136 +110,24 @@ const getAssignRuleOptionName = (type, option) => {
return '未知(' + option + ')'
}
-// ========== 修改相关 ==========
-
-// 修改任务责任表单
-const actionLoading = ref(false) // 遮罩层
-const dialogVisible = ref(false) // 是否显示弹出层
-const formRef = ref<FormInstance>()
-const formData = ref() // 表单数据
-
-// 提交按钮
-const submitForm = async () => {
- // 参数校验
- const elForm = unref(formRef)
- if (!elForm) return
- const valid = await elForm.validate()
- if (!valid) return
- // 构建表单
- let 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
- // 设置提交中
- actionLoading.value = true
- // 提交请求
- try {
- const data = form 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'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (row: TaskAssignRuleApi.TaskAssignVO) => {
+ formRef.value.open(queryParams.modelId, row)
}
-// 修改任务分配规则
-const handleUpdate = (row) => {
- // 1. 先重置表单
- formData.value = {}
- // 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)
- }
- // 打开弹窗
- dialogVisible.value = true
- actionLoading.value = false
-}
-
-// ========== 初始化 ==========
-onMounted(() => {
+/** 初始化 */
+onMounted(async () => {
+ await getList()
// 获得角色列表
- roleOptions.value = []
- listSimpleRolesApi().then((data) => {
- roleOptions.value.push(...data)
- })
+ roleOptions.value = await RoleApi.getSimpleRoleList()
// 获得部门列表
- deptOptions.value = []
- deptTreeOptions.value = []
- listSimpleDeptApi().then((data) => {
- deptOptions.value.push(...data)
- deptTreeOptions.value.push(...handleTree(data, 'id'))
- })
+ deptOptions.value = await DeptApi.getSimpleDeptList()
// 获得岗位列表
- postOptions.value = []
- listSimplePostsApi().then((data) => {
- postOptions.value.push(...data)
- })
+ postOptions.value = await PostApi.getSimplePostList()
// 获得用户列表
- userOptions.value = []
- getListSimpleUsersApi().then((data) => {
- userOptions.value.push(...data)
- })
+ userOptions.value = await UserApi.getSimpleUserList()
// 获得用户组列表
- userGroupOptions.value = []
- listSimpleUserGroupsApi().then((data) => {
- userGroupOptions.value.push(...data)
- })
- if (!isShow) {
- setTimeout(() => {
- xGrid.value.Ref.hideColumn('actionbtns')
- }, 100)
- }
+ userGroupOptions.value = await UserGroupApi.getSimpleUserGroupList()
})
</script>
diff --git a/src/views/bpm/taskAssignRule/taskAssignRule.data.ts b/src/views/bpm/taskAssignRule/taskAssignRule.data.ts
deleted file mode 100644
index cad74325..00000000
--- a/src/views/bpm/taskAssignRule/taskAssignRule.data.ts
+++ /dev/null
@@ -1,54 +0,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)
diff --git a/src/views/infra/apiAccessLog/ApiAccessLogDetail.vue b/src/views/infra/apiAccessLog/ApiAccessLogDetail.vue
new file mode 100644
index 00000000..d046a521
--- /dev/null
+++ b/src/views/infra/apiAccessLog/ApiAccessLogDetail.vue
@@ -0,0 +1,65 @@
+<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>
diff --git a/src/views/infra/apiAccessLog/apiAccessLog.data.ts b/src/views/infra/apiAccessLog/apiAccessLog.data.ts
deleted file mode 100644
index cb9e97a7..00000000
--- a/src/views/infra/apiAccessLog/apiAccessLog.data.ts
+++ /dev/null
@@ -1,74 +0,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)
diff --git a/src/views/infra/apiAccessLog/index.vue b/src/views/infra/apiAccessLog/index.vue
index 6a09927d..3102d39d 100644
--- a/src/views/infra/apiAccessLog/index.vue
+++ b/src/views/infra/apiAccessLog/index.vue
@@ -1,62 +1,220 @@
<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 queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
-// 详情操作
-const handleDetail = (row: ApiAccessLogApi.ApiAccessLogVO) => {
- // 设置数据
- detailData.value = row
- dialogTitle.value = t('action.detail')
- dialogVisible.value = true
+/** 查询列表 */
+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>
diff --git a/src/views/infra/apiErrorLog/ApiErrorLogDetail.vue b/src/views/infra/apiErrorLog/ApiErrorLogDetail.vue
new file mode 100644
index 00000000..5076fe00
--- /dev/null
+++ b/src/views/infra/apiErrorLog/ApiErrorLogDetail.vue
@@ -0,0 +1,79 @@
+<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>
diff --git a/src/views/infra/apiErrorLog/apiErrorLog.data.ts b/src/views/infra/apiErrorLog/apiErrorLog.data.ts
deleted file mode 100644
index a539c167..00000000
--- a/src/views/infra/apiErrorLog/apiErrorLog.data.ts
+++ /dev/null
@@ -1,76 +0,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)
diff --git a/src/views/infra/apiErrorLog/index.vue b/src/views/infra/apiErrorLog/index.vue
index 4193351a..800b5043 100644
--- a/src/views/infra/apiErrorLog/index.vue
+++ b/src/views/infra/apiErrorLog/index.vue
@@ -1,99 +1,248 @@
<template>
<ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <!-- 操作：导出 -->
- <template #toolbar_buttons>
- <XButton
- type="warning"
- preIcon="ep:download"
- :title="t('action.export')"
- @click="exportList('错误数据.xls')"
+ <!-- 搜索工作栏 -->
+ <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>
- <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)"
+ </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 getIntDictOptions(DICT_TYPE.USER_TYPE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="应用名" prop="applicationName">
+ <el-input
+ v-model="queryParams.applicationName"
+ placeholder="请输入应用名"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
/>
- <XTextButton
- preIcon="ep:cpu"
- title="已处理"
- v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
- v-hasPermi="['infra:api-error-log:update-status']"
- @click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.DONE, '已处理')"
+ </el-form-item>
+ <el-form-item label="异常时间" prop="exceptionTime">
+ <el-date-picker
+ v-model="queryParams.exceptionTime"
+ 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"
/>
- <XTextButton
- preIcon="ep:mute-notification"
- title="已忽略"
- v-if="row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
- v-hasPermi="['infra:api-error-log:update-status']"
- @click="handleProcessClick(row, InfraApiErrorLogProcessStatusEnum.IGNORE, '已忽略')"
- />
- </template>
- </XTable>
+ </el-form-item>
+ <el-form-item label="处理状态" prop="processStatus">
+ <el-select
+ v-model="queryParams.processStatus"
+ placeholder="请选择处理状态"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button @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>
</ContentWrap>
- <XModal v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(详情) -->
- <Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
- <!-- 操作按钮 -->
- <template #footer>
- <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <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" width="200" />
+ <el-table-column label="请求方法" align="center" prop="requestMethod" width="80" />
+ <el-table-column label="请求地址" align="center" prop="requestUrl" width="180" />
+ <el-table-column
+ label="异常发生时间"
+ align="center"
+ prop="exceptionTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="异常名" align="center" prop="exceptionName" width="180" />
+ <el-table-column label="处理状态" align="center" prop="processStatus">
+ <template #default="scope">
+ <dict-tag
+ :type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS"
+ :value="scope.row.processStatus"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center" width="200">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openDetail(scope.row)"
+ v-hasPermi="['infra:api-error-log:query']"
+ >
+ 详细
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
+ @click="handleProcess(scope.row.id, InfraApiErrorLogProcessStatusEnum.DONE)"
+ v-hasPermi="['infra:api-error-log:update-status']"
+ >
+ 已处理
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ v-if="scope.row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT"
+ @click="handleProcess(scope.row.id, InfraApiErrorLogProcessStatusEnum.IGNORE)"
+ v-hasPermi="['infra:api-error-log:update-status']"
+ >
+ 已忽略
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页组件 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：详情 -->
+ <ApiErrorLogDetail ref="detailRef" />
</template>
+
<script setup lang="ts" name="ApiErrorLog">
-import { allSchemas } from './apiErrorLog.data'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
+import ApiErrorLogDetail from './ApiErrorLogDetail.vue'
import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
-const { t } = useI18n() // 国际化
-const message = useMessage()
+const message = useMessage() // 消息弹窗
-// ========== 列表相关 ==========
-const [registerTable, { reload, exportList }] = useXTable({
- allSchemas: allSchemas,
- getListApi: ApiErrorLogApi.getApiErrorLogPageApi,
- exportListApi: ApiErrorLogApi.exportApiErrorLogApi
+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,
+ processStatus: null,
+ exceptionTime: []
})
-// ========== 详情相关 ==========
-const detailData = ref() // 详情 Ref
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('') // 弹出层标题
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
-// 详情操作
-const handleDetail = (row: ApiErrorLogApi.ApiErrorLogVO) => {
- // 设置数据
- detailData.value = row
- dialogTitle.value = t('action.detail')
- dialogVisible.value = true
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await ApiErrorLogApi.getApiErrorLogPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
}
-// 异常处理操作
-const handleProcessClick = (
- row: ApiErrorLogApi.ApiErrorLogVO,
- processSttatus: number,
- type: string
-) => {
- message
- .confirm('确认标记为' + type + '?', t('common.reminder'))
- .then(async () => {
- await ApiErrorLogApi.updateApiErrorLogPageApi(row.id, processSttatus)
- message.success(t('common.updateSuccess'))
- })
- .finally(async () => {
- // 刷新列表
- await reload()
- })
- .catch(() => {})
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 详情操作 */
+const detailRef = ref()
+const openDetail = (data: ApiErrorLogApi.ApiErrorLogVO) => {
+ detailRef.value.open(data)
+}
+
+/** 处理已处理 / 已忽略的操作 **/
+const handleProcess = async (id: number, processStatus: number) => {
+ try {
+ // 操作的二次确认
+ const type = processStatus === InfraApiErrorLogProcessStatusEnum.DONE ? '已处理' : '已忽略'
+ await message.confirm('确认标记为' + type + '?')
+ // 执行操作
+ await ApiErrorLogApi.updateApiErrorLogPage(id, processStatus)
+ await message.success(type)
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await ApiErrorLogApi.exportApiErrorLog(queryParams)
+ download.excel(data, '异常日志.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/infra/build/index.vue b/src/views/infra/build/index.vue
index 6f577e95..00b56fea 100644
--- a/src/views/infra/build/index.vue
+++ b/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>
diff --git a/src/views/infra/codegen/EditTable.vue b/src/views/infra/codegen/EditTable.vue
index 820d23ca..714b2761 100644
--- a/src/views/infra/codegen/EditTable.vue
+++ b/src/views/infra/codegen/EditTable.vue
@@ -1,67 +1,80 @@
<template>
- <ContentWrap>
- <ContentDetailWrap :title="title" @back="push('/infra/codegen')">
- <el-tabs v-model="activeName">
- <el-tab-pane label="基本信息" name="basicInfo">
- <BasicInfoForm ref="basicInfoRef" :basicInfo="tableCurrentRow" />
- </el-tab-pane>
- <el-tab-pane label="字段信息" name="cloum">
- <CloumInfoForm ref="cloumInfoRef" :info="cloumCurrentRow" />
- </el-tab-pane>
- </el-tabs>
- <template #right>
- <XButton
- type="primary"
- :title="t('action.save')"
- :loading="loading"
- @click="submitForm()"
- />
- </template>
- </ContentDetailWrap>
- </ContentWrap>
+ <content-wrap v-loading="formLoading">
+ <el-tabs v-model="activeName">
+ <el-tab-pane label="基本信息" name="basicInfo">
+ <basic-info-form ref="basicInfoRef" :table="formData.table" />
+ </el-tab-pane>
+ <el-tab-pane label="字段信息" name="colum">
+ <colum-info-form ref="columInfoRef" :columns="formData.columns" />
+ </el-tab-pane>
+ <el-tab-pane label="生成信息" name="generateInfo">
+ <generate-info-form ref="generateInfoRef" :table="formData.table" />
+ </el-tab-pane>
+ </el-tabs>
+ <el-form>
+ <el-form-item style="float: right">
+ <el-button type="primary" @click="submitForm" :loading="formLoading">保存</el-button>
+ <el-button @click="close">返回</el-button>
+ </el-form-item>
+ </el-form>
+ </content-wrap>
</template>
<script setup lang="ts">
-import { BasicInfoForm, CloumInfoForm } from './components'
-import { getCodegenTableApi, updateCodegenTableApi } from '@/api/infra/codegen'
-import { CodegenTableVO, CodegenColumnVO, CodegenUpdateReqVO } from '@/api/infra/codegen/types'
-
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { BasicInfoForm, ColumInfoForm, GenerateInfoForm } from './components'
+import * as CodegenApi from '@/api/infra/codegen'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
-const { push } = useRouter()
-const { query } = useRoute()
-const loading = ref(false)
-const title = ref('代码生成')
-const activeName = ref('basicInfo')
-const cloumInfoRef = ref(null)
-const tableCurrentRow = ref<CodegenTableVO>()
-const cloumCurrentRow = ref<CodegenColumnVO[]>([])
-const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
+const { push, currentRoute } = useRouter() // 路由
+const { query } = useRoute() // 查询参数
+const { delView } = useTagsViewStore() // 视图操作
-const getList = async () => {
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const activeName = ref('basicInfo') // Tag 激活的窗口
+const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
+const columInfoRef = ref<ComponentRef<typeof ColumInfoForm>>()
+const generateInfoRef = ref<ComponentRef<typeof GenerateInfoForm>>()
+const formData = ref<CodegenApi.CodegenUpdateReqVO>({
+ table: {},
+ columns: []
+})
+
+/** 获得详情 */
+const getDetail = async () => {
const id = query.id as unknown as number
- if (id) {
- // 获取表详细信息
- const res = await getCodegenTableApi(id)
- title.value = '修改[ ' + res.table.tableName + ' ]生成配置'
- tableCurrentRow.value = res.table
- cloumCurrentRow.value = res.columns
+ if (!id) {
+ return
+ }
+ formLoading.value = true
+ try {
+ formData.value = await CodegenApi.getCodegenTable(id)
+ } finally {
+ formLoading.value = false
}
}
+
+/** 提交按钮 */
const submitForm = async () => {
- const basicInfo = unref(basicInfoRef)
- const basicForm = await basicInfo?.elFormRef?.validate()?.catch(() => {})
- if (basicForm) {
- const basicInfoData = (await basicInfo?.getFormData()) as CodegenTableVO
- const genTable: CodegenUpdateReqVO = {
- table: basicInfoData,
- columns: cloumCurrentRow.value
- }
- await updateCodegenTableApi(genTable)
+ // 参数校验
+ if (!unref(formData)) return
+ await unref(basicInfoRef)?.validate()
+ await unref(generateInfoRef)?.validate()
+ try {
+ // 提交请求
+ await CodegenApi.updateCodegenTable(formData.value)
message.success(t('common.updateSuccess'))
- push('/infra/codegen')
- }
+ close()
+ } catch {}
}
+
+/** 关闭按钮 */
+const close = () => {
+ delView(unref(currentRoute))
+ push('/infra/codegen')
+}
+
+/** 初始化 */
onMounted(() => {
- getList()
+ getDetail()
})
</script>
diff --git a/src/views/infra/codegen/ImportTable.vue b/src/views/infra/codegen/ImportTable.vue
new file mode 100644
index 00000000..b89b2923
--- /dev/null
+++ b/src/views/infra/codegen/ImportTable.vue
@@ -0,0 +1,142 @@
+<template>
+ <Dialog title="导入表" v-model="modelVisible" width="800px">
+ <!-- 搜索栏 -->
+ <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+ <el-form-item label="数据源" prop="dataSourceConfigId">
+ <el-select
+ v-model="queryParams.dataSourceConfigId"
+ placeholder="请选择数据源"
+ class="!w-240px"
+ >
+ <el-option
+ v-for="config in dataSourceConfigList"
+ :key="config.id"
+ :label="config.name"
+ :value="config.id"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="表名称" prop="name">
+ <el-input
+ v-model="queryParams.name"
+ placeholder="请输入表名称"
+ clearable
+ @keyup.enter="getList"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="表描述" prop="comment">
+ <el-input
+ v-model="queryParams.comment"
+ placeholder="请输入表描述"
+ clearable
+ @keyup.enter="getList"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="getList"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+ <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+ </el-form-item>
+ </el-form>
+ <!-- 列表 -->
+ <el-row>
+ <el-table
+ v-loading="dbTableLoading"
+ @row-click="handleRowClick"
+ ref="tableRef"
+ :data="dbTableList"
+ @selection-change="handleSelectionChange"
+ height="260px"
+ >
+ <el-table-column type="selection" width="55" />
+ <el-table-column prop="name" label="表名称" :show-overflow-tooltip="true" />
+ <el-table-column prop="comment" label="表描述" :show-overflow-tooltip="true" />
+ </el-table>
+ </el-row>
+ <!-- 操作 -->
+ <template #footer>
+ <el-button @click="handleImportTable" type="primary" :disabled="tableList.length === 0">
+ 导入
+ </el-button>
+ <el-button @click="close">关闭</el-button>
+ </template>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import * as CodegenApi from '@/api/infra/codegen'
+import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
+import { ElTable } from 'element-plus'
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const dbTableLoading = ref(true) // 数据源的加载中
+const dbTableList = ref<CodegenApi.DatabaseTableVO[]>([]) // 表的列表
+const queryParams = reactive({
+ name: undefined,
+ comment: undefined,
+ dataSourceConfigId: 0
+})
+const queryFormRef = ref() // 搜索的表单
+const dataSourceConfigList = ref<DataSourceConfigApi.DataSourceConfigVO[]>([]) // 数据源列表
+
+/** 查询表数据 */
+const getList = async () => {
+ dbTableLoading.value = true
+ try {
+ dbTableList.value = await CodegenApi.getSchemaTableList(queryParams)
+ } finally {
+ dbTableLoading.value = false
+ }
+}
+
+/** 重置操作 */
+const resetQuery = async () => {
+ queryParams.name = undefined
+ queryParams.comment = undefined
+ queryParams.dataSourceConfigId = dataSourceConfigList.value[0].id as number
+ await getList()
+}
+
+/** 打开弹窗 */
+const open = async () => {
+ // 加载数据源的列表
+ dataSourceConfigList.value = await DataSourceConfigApi.getDataSourceConfigList()
+ queryParams.dataSourceConfigId = dataSourceConfigList.value[0].id as number
+ modelVisible.value = true
+ // 加载表的列表
+ await getList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 关闭弹窗 */
+const close = () => {
+ modelVisible.value = false
+ tableList.value = []
+}
+
+const tableRef = ref<typeof ElTable>() // 表格的 Ref
+const tableList = ref<string[]>([]) // 选中的表名
+
+/** 处理某一行的点击 */
+const handleRowClick = (row) => {
+ unref(tableRef)?.toggleRowSelection(row)
+}
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection) => {
+ tableList.value = selection.map((item) => item.name)
+}
+
+/** 导入按钮操作 */
+const handleImportTable = async () => {
+ await CodegenApi.createCodegenList({
+ dataSourceConfigId: queryParams.dataSourceConfigId,
+ tableNames: tableList.value
+ })
+ message.success('导入成功')
+ emit('success')
+ close()
+}
+const emit = defineEmits(['success'])
+</script>
diff --git a/src/views/infra/codegen/components/Preview.vue b/src/views/infra/codegen/PreviewCode.vue
similarity index 61%
rename from src/views/infra/codegen/components/Preview.vue
rename to src/views/infra/codegen/PreviewCode.vue
index 2d9482ff..df521f5a 100644
--- a/src/views/infra/codegen/components/Preview.vue
+++ b/src/views/infra/codegen/PreviewCode.vue
@@ -1,7 +1,20 @@
<template>
- <XModal title="预览" v-model="preview.open">
+ <Dialog
+ title="代码预览"
+ v-model="modelVisible"
+ align-center
+ width="80%"
+ class="app-infra-codegen-preview-container"
+ >
<div class="flex">
- <el-card class="w-1/4" :gutter="12" shadow="hover">
+ <!-- 代码目录树 -->
+ <el-card
+ class="w-1/3"
+ :gutter="12"
+ shadow="hover"
+ v-loading="loading"
+ element-loading-text="生成文件目录中..."
+ >
<el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
<el-tree
ref="treeRef"
@@ -10,10 +23,18 @@
:expand-on-click-node="false"
highlight-current
@node-click="handleNodeClick"
+ default-expand-all
/>
</el-scrollbar>
</el-card>
- <el-card class="w-3/4 ml-3" :gutter="12" shadow="hover">
+ <!-- 代码 -->
+ <el-card
+ class="w-2/3 ml-3"
+ :gutter="12"
+ shadow="hover"
+ v-loading="loading"
+ element-loading-text="加载代码中..."
+ >
<el-tabs v-model="preview.activeName">
<el-tab-pane
v-for="item in previewCodegen"
@@ -21,51 +42,69 @@
:name="item.filePath"
:key="item.filePath"
>
- <XTextButton style="float: right" :title="t('common.copy')" @click="copy(item.code)" />
- <pre>{{ item.code }}</pre>
+ <el-button text type="primary" class="float-right" @click="copy(item.code)">
+ {{ t('common.copy') }}
+ </el-button>
+ <div v-highlight>
+ <code>{{ item.code }}</code>
+ </div>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
- </XModal>
+ </Dialog>
</template>
<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
import { handleTree2 } from '@/utils/tree'
-import { previewCodegenApi } from '@/api/infra/codegen'
-import { CodegenTableVO, CodegenPreviewVO } from '@/api/infra/codegen/types'
-
+import * as CodegenApi from '@/api/infra/codegen'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
-// ======== 显示页面 ========
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const loading = ref(false) // 加载中的状态
const preview = reactive({
- open: false,
- titel: '代码预览',
- fileTree: [],
- activeName: ''
+ fileTree: [], // 文件树
+ activeName: '' // 激活的文件名
})
-const previewCodegen = ref<CodegenPreviewVO[]>()
-const show = async (row: CodegenTableVO) => {
- const res = await previewCodegenApi(row.id)
- let file = handleFiles(res)
- previewCodegen.value = res
- preview.fileTree = handleTree2(file, 'id', 'parentId', 'children', '/')
- preview.activeName = res[0].filePath
- preview.open = true
-}
+const previewCodegen = ref<CodegenApi.CodegenPreviewVO[]>()
+
+/** 点击文件 */
const handleNodeClick = async (data, node) => {
if (node && !node.isLeaf) {
return false
}
preview.activeName = data.id
}
+
/** 生成 files 目录 **/
interface filesType {
id: string
label: string
parentId: string
}
-const handleFiles = (datas: CodegenPreviewVO[]) => {
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+ modelVisible.value = true
+ try {
+ loading.value = true
+ // 生成代码
+ const data = await CodegenApi.previewCodegen(id)
+ previewCodegen.value = data
+ // 处理文件
+ let file = handleFiles(data)
+ preview.fileTree = handleTree2(file, 'id', 'parentId', 'children', '/')
+ // 点击首个文件
+ preview.activeName = data[0].filePath
+ } finally {
+ loading.value = false
+ }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 处理文件 */
+const handleFiles = (datas: CodegenApi.CodegenPreviewVO[]) => {
let exists = {} // key：file 的 id；value：true
let files: filesType[] = []
// 遍历每个元素
@@ -127,19 +166,25 @@ const handleFiles = (datas: CodegenPreviewVO[]) => {
}
return files
}
+
/** 复制 **/
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'))
- }
+ return
+ }
+ await copy()
+ if (unref(copied)) {
+ message.success(t('common.copySuccess'))
}
}
-defineExpose({
- show
-})
</script>
+<style lang="scss">
+.app-infra-codegen-preview-container {
+ .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
+ white-space: nowrap;
+ display: inline-block;
+ }
+}
+</style>
diff --git a/src/views/infra/codegen/codegen.data.ts b/src/views/infra/codegen/codegen.data.ts
deleted file mode 100644
index f3723a35..00000000
--- a/src/views/infra/codegen/codegen.data.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
- title: [required],
- type: [required],
- status: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'seq',
- action: true,
- actionWidth: '400px',
- columns: [
- {
- title: '表名称',
- field: 'tableName',
- isSearch: true
- },
- {
- title: '表描述',
- field: 'tableComment',
- isSearch: true
- },
- {
- title: '实体',
- field: 'className',
- isSearch: true
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- },
- {
- title: t('common.updateTime'),
- field: 'updateTime',
- formatter: 'formatDate',
- isForm: false
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/infra/codegen/components/BasicInfoForm.vue b/src/views/infra/codegen/components/BasicInfoForm.vue
index 2009553f..73174cbc 100644
--- a/src/views/infra/codegen/components/BasicInfoForm.vue
+++ b/src/views/infra/codegen/components/BasicInfoForm.vue
@@ -1,183 +1,85 @@
<template>
- <Form :rules="rules" @register="register" />
+ <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="表名称" prop="tableName">
+ <el-input placeholder="请输入仓库名称" v-model="formData.tableName" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="表描述" prop="tableComment">
+ <el-input placeholder="请输入" v-model="formData.tableComment" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item prop="className">
+ <template #label>
+ <span>
+ 实体类名称
+ <el-tooltip
+ content="默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。"
+ placement="top"
+ >
+ <Icon icon="ep:question-filled" class="" />
+ </el-tooltip>
+ </span>
+ </template>
+ <el-input placeholder="请输入" v-model="formData.className" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="作者" prop="author">
+ <el-input placeholder="请输入" v-model="formData.author" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="备注" prop="remark">
+ <el-input type="textarea" :rows="3" v-model="formData.remark" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
</template>
<script setup lang="ts">
-import { useForm } from '@/hooks/web/useForm'
-import { FormSchema } from '@/types/form'
-import { CodegenTableVO } from '@/api/infra/codegen/types'
-import { getIntDictOptions } from '@/utils/dict'
-import { listSimpleMenusApi } from '@/api/system/menu'
-import { handleTree, defaultProps } from '@/utils/tree'
+import * as CodegenApi from '@/api/infra/codegen'
import { PropType } from 'vue'
const props = defineProps({
- basicInfo: {
- type: Object as PropType<Nullable<CodegenTableVO>>,
+ table: {
+ type: Object as PropType<Nullable<CodegenApi.CodegenTableVO>>,
default: () => null
}
})
-const templateTypeOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)
-const sceneOptions = getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)
-const menuOptions = ref<any>([]) // 树形结构
-const getTree = async () => {
- const res = await listSimpleMenusApi()
- menuOptions.value = handleTree(res)
-}
-
+const formRef = ref()
+const formData = ref({
+ tableName: '',
+ tableComment: '',
+ className: '',
+ author: '',
+ remark: ''
+})
const rules = reactive({
tableName: [required],
tableComment: [required],
className: [required],
- author: [required],
- templateType: [required],
- scene: [required],
- moduleName: [required],
- businessName: [required],
- businessPackage: [required],
- classComment: [required]
-})
-const schema = reactive<FormSchema[]>([
- {
- label: '上级菜单',
- field: 'parentMenuId',
- component: 'TreeSelect',
- componentProps: {
- data: menuOptions,
- props: defaultProps,
- checkStrictly: true,
- nodeKey: 'id'
- },
- labelMessage: '分配到指定菜单下，例如 系统管理',
- colProps: {
- span: 24
- }
- },
- {
- label: '表名称',
- field: 'tableName',
- component: 'Input',
- colProps: {
- span: 12
- }
- },
- {
- label: '表描述',
- field: 'tableComment',
- component: 'Input',
- colProps: {
- span: 12
- }
- },
- {
- label: '实体类名称',
- field: 'className',
- component: 'Input',
- colProps: {
- span: 12
- }
- },
- {
- label: '类名称',
- field: 'className',
- component: 'Input',
- labelMessage: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等',
- colProps: {
- span: 12
- }
- },
- {
- label: '生成模板',
- field: 'templateType',
- component: 'Select',
- componentProps: {
- options: templateTypeOptions
- },
- colProps: {
- span: 12
- }
- },
- {
- label: '生成场景',
- field: 'scene',
- component: 'Select',
- componentProps: {
- options: sceneOptions
- },
- colProps: {
- span: 12
- }
- },
- {
- label: '模块名',
- field: 'moduleName',
- component: 'Input',
- labelMessage: '模块名，即一级目录，例如 system、infra、tool 等等',
- colProps: {
- span: 12
- }
- },
- {
- label: '业务名',
- field: 'businessName',
- component: 'Input',
- labelMessage: '业务名，即二级目录，例如 user、permission、dict 等等',
- colProps: {
- span: 12
- }
- },
- {
- label: '类描述',
- field: 'classComment',
- component: 'Input',
- labelMessage: '用作类描述，例如 用户',
- colProps: {
- span: 12
- }
- },
- {
- label: '作者',
- field: 'author',
- component: 'Input',
- colProps: {
- span: 12
- }
- },
- {
- label: '备注',
- field: 'remark',
- component: 'Input',
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- }
-])
-const { register, methods, elFormRef } = useForm({
- schema
+ author: [required]
})
+
+/** 监听 table 属性，复制给 formData 属性 */
watch(
- () => props.basicInfo,
- (basicInfo) => {
- if (!basicInfo) return
- const { setValues } = methods
- setValues(basicInfo)
+ () => props.table,
+ (table) => {
+ if (!table) return
+ formData.value = table
},
{
deep: true,
immediate: true
}
)
-// ========== 初始化 ==========
-onMounted(async () => {
- await getTree()
-})
defineExpose({
- elFormRef,
- getFormData: methods.getFormData
+ validate: async () => unref(formRef)?.validate()
})
</script>
diff --git a/src/views/infra/codegen/components/CloumInfoForm.vue b/src/views/infra/codegen/components/CloumInfoForm.vue
deleted file mode 100644
index 0b6ea697..00000000
--- a/src/views/infra/codegen/components/CloumInfoForm.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
- <vxe-table
- ref="dragTable"
- border
- :data="info"
- max-height="600"
- stripe
- class="xtable-scrollbar"
- :column-config="{ resizable: true }"
- >
- <vxe-column title="字段列名" field="columnName" fixed="left" width="10%" />
- <vxe-colgroup title="基础属性">
- <vxe-column title="字段描述" field="columnComment" width="10%">
- <template #default="{ row }">
- <vxe-input v-model="row.columnComment" placeholder="请输入字段描述" />
- </template>
- </vxe-column>
- <vxe-column title="物理类型" field="dataType" width="10%" />
- <vxe-column title="Java类型" width="10%" field="javaType">
- <template #default="{ row }">
- <vxe-select v-model="row.javaType" placeholder="请选择Java类型">
- <vxe-option label="Long" value="Long" />
- <vxe-option label="String" value="String" />
- <vxe-option label="Integer" value="Integer" />
- <vxe-option label="Double" value="Double" />
- <vxe-option label="BigDecimal" value="BigDecimal" />
- <vxe-option label="LocalDateTime" value="LocalDateTime" />
- <vxe-option label="Boolean" value="Boolean" />
- </vxe-select>
- </template>
- </vxe-column>
- <vxe-column title="java属性" width="8%" field="javaField">
- <template #default="{ row }">
- <vxe-input v-model="row.javaField" placeholder="请输入java属性" />
- </template>
- </vxe-column>
- </vxe-colgroup>
- <vxe-colgroup title="增删改查">
- <vxe-column title="插入" width="40px" field="createOperation">
- <template #default="{ row }">
- <vxe-checkbox true-label="true" false-label="false" v-model="row.createOperation" />
- </template>
- </vxe-column>
- <vxe-column title="编辑" width="40px" field="updateOperation">
- <template #default="{ row }">
- <vxe-checkbox true-label="true" false-label="false" v-model="row.updateOperation" />
- </template>
- </vxe-column>
- <vxe-column title="列表" width="40px" field="listOperationResult">
- <template #default="{ row }">
- <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperationResult" />
- </template>
- </vxe-column>
- <vxe-column title="查询" width="40px" field="listOperation">
- <template #default="{ row }">
- <vxe-checkbox true-label="true" false-label="false" v-model="row.listOperation" />
- </template>
- </vxe-column>
- <vxe-column title="允许空" width="40px" field="nullable">
- <template #default="{ row }">
- <vxe-checkbox true-label="true" false-label="false" v-model="row.nullable" />
- </template>
- </vxe-column>
- <vxe-column title="查询方式" width="60px" field="listOperationCondition">
- <template #default="{ row }">
- <vxe-select v-model="row.listOperationCondition" placeholder="请选择查询方式">
- <vxe-option label="=" value="=" />
- <vxe-option label="!=" value="!=" />
- <vxe-option label=">" value=">" />
- <vxe-option label=">=" value=">=" />
- <vxe-option label="<" value="<>" />
- <vxe-option label="<=" value="<=" />
- <vxe-option label="LIKE" value="LIKE" />
- <vxe-option label="BETWEEN" value="BETWEEN" />
- </vxe-select>
- </template>
- </vxe-column>
- </vxe-colgroup>
- <vxe-column title="显示类型" width="10%" field="htmlType">
- <template #default="{ row }">
- <vxe-select v-model="row.htmlType" placeholder="请选择显示类型">
- <vxe-option label="文本框" value="input" />
- <vxe-option label="文本域" value="textarea" />
- <vxe-option label="下拉框" value="select" />
- <vxe-option label="单选框" value="radio" />
- <vxe-option label="复选框" value="checkbox" />
- <vxe-option label="日期控件" value="datetime" />
- <vxe-option label="图片上传" value="imageUpload" />
- <vxe-option label="文件上传" value="fileUpload" />
- <vxe-option label="富文本控件" value="editor" />
- </vxe-select>
- </template>
- </vxe-column>
- <vxe-column title="字典类型" width="10%" field="dictType">
- <template #default="{ row }">
- <vxe-select v-model="row.dictType" clearable filterable placeholder="请选择字典类型">
- <vxe-option
- v-for="dict in dictOptions"
- :key="dict.id"
- :label="dict.name"
- :value="dict.type"
- />
- </vxe-select>
- </template>
- </vxe-column>
- <vxe-column title="示例" field="example">
- <template #default="{ row }">
- <vxe-input v-model="row.example" placeholder="请输入示例" />
- </template>
- </vxe-column>
- </vxe-table>
-</template>
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { DictTypeVO } from '@/api/system/dict/types'
-import { CodegenColumnVO } from '@/api/infra/codegen/types'
-import { listSimpleDictTypeApi } from '@/api/system/dict/dict.type'
-
-const props = defineProps({
- info: {
- type: Array as unknown as PropType<CodegenColumnVO[]>,
- default: () => null
- }
-})
-/** 查询字典下拉列表 */
-const dictOptions = ref<DictTypeVO[]>()
-const getDictOptions = async () => {
- const res = await listSimpleDictTypeApi()
- dictOptions.value = res
-}
-onMounted(async () => {
- await getDictOptions()
-})
-defineExpose({
- info: props.info
-})
-</script>
diff --git a/src/views/infra/codegen/components/ColumInfoForm.vue b/src/views/infra/codegen/components/ColumInfoForm.vue
new file mode 100644
index 00000000..5d2a036d
--- /dev/null
+++ b/src/views/infra/codegen/components/ColumInfoForm.vue
@@ -0,0 +1,151 @@
+<template>
+ <el-table ref="dragTable" :data="formData" row-key="columnId" :max-height="tableHeight">
+ <el-table-column
+ label="字段列名"
+ prop="columnName"
+ min-width="10%"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column label="字段描述" min-width="10%">
+ <template #default="scope">
+ <el-input v-model="scope.row.columnComment" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="物理类型"
+ prop="dataType"
+ min-width="10%"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column label="Java类型" min-width="11%">
+ <template #default="scope">
+ <el-select v-model="scope.row.javaType">
+ <el-option label="Long" value="Long" />
+ <el-option label="String" value="String" />
+ <el-option label="Integer" value="Integer" />
+ <el-option label="Double" value="Double" />
+ <el-option label="BigDecimal" value="BigDecimal" />
+ <el-option label="LocalDateTime" value="LocalDateTime" />
+ <el-option label="Boolean" value="Boolean" />
+ </el-select>
+ </template>
+ </el-table-column>
+ <el-table-column label="java属性" min-width="10%">
+ <template #default="scope">
+ <el-input v-model="scope.row.javaField" />
+ </template>
+ </el-table-column>
+ <el-table-column label="插入" min-width="4%">
+ <template #default="scope">
+ <el-checkbox true-label="true" false-label="false" v-model="scope.row.createOperation" />
+ </template>
+ </el-table-column>
+ <el-table-column label="编辑" min-width="4%">
+ <template #default="scope">
+ <el-checkbox true-label="true" false-label="false" v-model="scope.row.updateOperation" />
+ </template>
+ </el-table-column>
+ <el-table-column label="列表" min-width="4%">
+ <template #default="scope">
+ <el-checkbox
+ true-label="true"
+ false-label="false"
+ v-model="scope.row.listOperationResult"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="查询" min-width="4%">
+ <template #default="scope">
+ <el-checkbox true-label="true" false-label="false" v-model="scope.row.listOperation" />
+ </template>
+ </el-table-column>
+ <el-table-column label="查询方式" min-width="10%">
+ <template #default="scope">
+ <el-select v-model="scope.row.listOperationCondition">
+ <el-option label="=" value="=" />
+ <el-option label="!=" value="!=" />
+ <el-option label=">" value=">" />
+ <el-option label=">=" value=">=" />
+ <el-option label="<" value="<>" />
+ <el-option label="<=" value="<=" />
+ <el-option label="LIKE" value="LIKE" />
+ <el-option label="BETWEEN" value="BETWEEN" />
+ </el-select>
+ </template>
+ </el-table-column>
+ <el-table-column label="允许空" min-width="5%">
+ <template #default="scope">
+ <el-checkbox true-label="true" false-label="false" v-model="scope.row.nullable" />
+ </template>
+ </el-table-column>
+ <el-table-column label="显示类型" min-width="12%">
+ <template #default="scope">
+ <el-select v-model="scope.row.htmlType">
+ <el-option label="文本框" value="input" />
+ <el-option label="文本域" value="textarea" />
+ <el-option label="下拉框" value="select" />
+ <el-option label="单选框" value="radio" />
+ <el-option label="复选框" value="checkbox" />
+ <el-option label="日期控件" value="datetime" />
+ <el-option label="图片上传" value="imageUpload" />
+ <el-option label="文件上传" value="fileUpload" />
+ <el-option label="富文本控件" value="editor" />
+ </el-select>
+ </template>
+ </el-table-column>
+ <el-table-column label="字典类型" min-width="12%">
+ <template #default="scope">
+ <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
+ <el-option
+ v-for="dict in dictOptions"
+ :key="dict.id"
+ :label="dict.name"
+ :value="dict.type"
+ />
+ </el-select>
+ </template>
+ </el-table-column>
+ <el-table-column label="示例" min-width="10%">
+ <template #default="scope">
+ <el-input v-model="scope.row.example" />
+ </template>
+ </el-table-column>
+ </el-table>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import * as CodegenApi from '@/api/infra/codegen'
+import * as DictDataApi from '@/api/system/dict/dict.type'
+
+const props = defineProps({
+ columns: {
+ type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>,
+ default: () => null
+ }
+})
+
+const formData = ref<CodegenApi.CodegenColumnVO[]>([])
+const tableHeight = document.documentElement.scrollHeight - 350 + 'px'
+
+/** 查询字典下拉列表 */
+const dictOptions = ref<DictDataApi.DictTypeVO[]>()
+const getDictOptions = async () => {
+ dictOptions.value = await DictDataApi.getSimpleDictTypeList()
+}
+
+watch(
+ () => props.columns,
+ (columns) => {
+ if (!columns) return
+ formData.value = columns
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+)
+
+onMounted(async () => {
+ await getDictOptions()
+})
+</script>
diff --git a/src/views/infra/codegen/components/GenerateInfoForm.vue b/src/views/infra/codegen/components/GenerateInfoForm.vue
new file mode 100644
index 00000000..356ee6df
--- /dev/null
+++ b/src/views/infra/codegen/components/GenerateInfoForm.vue
@@ -0,0 +1,375 @@
+<template>
+ <el-form ref="formRef" :model="formData" :rules="rules" label-width="150px">
+ <el-row>
+ <el-col :span="12">
+ <el-form-item prop="templateType" label="生成模板">
+ <el-select v-model="formData.templateType" @change="tplSelectChange">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item prop="scene" label="生成场景">
+ <el-select v-model="formData.scene">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+
+ <!-- <el-col :span="12">-->
+ <!-- <el-form-item prop="packageName">-->
+ <!-- <span slot="label">-->
+ <!-- 生成包路径-->
+ <!-- <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">-->
+ <!-- <i class="el-icon-question"></i>-->
+ <!-- </el-tooltip>-->
+ <!-- </span>-->
+ <!-- <el-input v-model="formData.packageName" />-->
+ <!-- </el-form-item>-->
+ <!-- </el-col>-->
+
+ <el-col :span="12">
+ <el-form-item prop="moduleName">
+ <template #label>
+ <span>
+ 模块名
+ <el-tooltip
+ content="模块名，即一级目录，例如 system、infra、tool 等等"
+ placement="top"
+ >
+ <Icon icon="ep:question-filled" />
+ </el-tooltip>
+ </span>
+ </template>
+ <el-input v-model="formData.moduleName" />
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item prop="businessName">
+ <template #label>
+ <span>
+ 业务名
+ <el-tooltip
+ content="业务名，即二级目录，例如 user、permission、dict 等等"
+ placement="top"
+ >
+ <Icon icon="ep:question-filled" />
+ </el-tooltip>
+ </span>
+ </template>
+ <el-input v-model="formData.businessName" />
+ </el-form-item>
+ </el-col>
+
+ <!-- <el-col :span="12">-->
+ <!-- <el-form-item prop="businessPackage">-->
+ <!-- <span slot="label">-->
+ <!-- 业务包-->
+ <!-- <el-tooltip content="业务包，自定义二级目录。例如说，我们希望将 dictType 和 dictData 归类成 dict 业务" placement="top">-->
+ <!-- <i class="el-icon-question"></i>-->
+ <!-- </el-tooltip>-->
+ <!-- </span>-->
+ <!-- <el-input v-model="formData.businessPackage" />-->
+ <!-- </el-form-item>-->
+ <!-- </el-col>-->
+
+ <el-col :span="12">
+ <el-form-item prop="className">
+ <template #label>
+ <span>
+ 类名称
+ <el-tooltip
+ content="类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等"
+ placement="top"
+ >
+ <Icon icon="ep:question-filled" />
+ </el-tooltip>
+ </span>
+ </template>
+ <el-input v-model="formData.className" />
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item prop="classComment">
+ <template #label>
+ <span>
+ 类描述
+ <el-tooltip content="用作类描述，例如 用户" placement="top">
+ <Icon icon="ep:question-filled" />
+ </el-tooltip>
+ </span>
+ </template>
+ <el-input v-model="formData.classComment" />
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ <span>
+ 上级菜单
+ <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
+ <Icon icon="ep:question-filled" />
+ </el-tooltip>
+ </span>
+ </template>
+ <el-tree-select
+ v-model="formData.parentMenuId"
+ placeholder="请选择系统菜单"
+ node-key="id"
+ check-strictly
+ :data="menus"
+ :props="menuTreeProps"
+ />
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24" v-if="formData.genType === '1'">
+ <el-form-item prop="genPath">
+ <template #label>
+ <span>
+ 自定义路径
+ <el-tooltip
+ content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下"
+ placement="top"
+ >
+ <Icon icon="ep:question-filled" />
+ </el-tooltip>
+ </span>
+ </template>
+ <el-input v-model="formData.genPath">
+ <template #append>
+ <el-dropdown>
+ <el-button type="primary">
+ 最近路径快速选择
+ <i class="el-icon-arrow-down el-icon--right"></i>
+ </el-button>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item @click="formData.genPath = '/'">
+ 恢复默认的生成基础路径
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row v-show="formData.tplCategory === 'tree'">
+ <h4 class="form-header">其他信息</h4>
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ <span>
+ 树编码字段
+ <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
+ <Icon icon="ep:question-filled" />
+ </el-tooltip>
+ </span>
+ </template>
+ <el-select v-model="formData.treeCode" placeholder="请选择">
+ <el-option
+ v-for="(column, index) in formData.columns"
+ :key="index"
+ :label="column.columnName + '：' + column.columnComment"
+ :value="column.columnName"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ <span>
+ 树父编码字段
+ <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
+ <Icon icon="ep:question-filled" />
+ </el-tooltip>
+ </span>
+ </template>
+ <el-select v-model="formData.treeParentCode" placeholder="请选择">
+ <el-option
+ v-for="(column, index) in formData.columns"
+ :key="index"
+ :label="column.columnName + '：' + column.columnComment"
+ :value="column.columnName"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ <span>
+ 树名称字段
+ <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
+ <Icon icon="ep:question-filled" />
+ </el-tooltip>
+ </span>
+ </template>
+
+ <el-select v-model="formData.treeName" placeholder="请选择">
+ <el-option
+ v-for="(column, index) in formData.columns"
+ :key="index"
+ :label="column.columnName + '：' + column.columnComment"
+ :value="column.columnName"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row v-show="formData.tplCategory === 'sub'">
+ <h4 class="form-header">关联信息</h4>
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ <span>
+ 关联子表的表名
+ <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
+ <Icon icon="ep:question-filled" />
+ </el-tooltip>
+ </span>
+ </template>
+ <el-select v-model="formData.subTableName" placeholder="请选择" @change="subSelectChange">
+ <el-option
+ v-for="(table0, index) in tables"
+ :key="index"
+ :label="table0.tableName + '：' + table0.tableComment"
+ :value="table0.tableName"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item>
+ <template #label>
+ <span>
+ 子表关联的外键名
+ <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
+ <Icon icon="ep:question-filled" />
+ </el-tooltip>
+ </span>
+ </template>
+ <el-select v-model="formData.subTableFkName" placeholder="请选择">
+ <el-option
+ v-for="(column, index) in subColumns"
+ :key="index"
+ :label="column.columnName + '：' + column.columnComment"
+ :value="column.columnName"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { handleTree } from '@/utils/tree'
+import * as CodegenApi from '@/api/infra/codegen'
+import * as MenuApi from '@/api/system/menu'
+import { PropType } from 'vue'
+
+const message = useMessage() // 消息弹窗
+const props = defineProps({
+ table: {
+ type: Object as PropType<Nullable<CodegenApi.CodegenTableVO>>,
+ default: () => null
+ }
+})
+
+const formRef = ref()
+const formData = ref({
+ templateType: null,
+ scene: null,
+ moduleName: '',
+ businessName: '',
+ className: '',
+ classComment: '',
+ parentMenuId: null,
+ genPath: '',
+ treeCode: '',
+ treeParentCode: '',
+ treeName: '',
+ tplCategory: '',
+ subTableName: '',
+ subTableFkName: '',
+ genType: ''
+})
+
+const rules = reactive({
+ templateType: [required],
+ scene: [required],
+ moduleName: [required],
+ businessName: [required],
+ businessPackage: [required],
+ className: [required],
+ classComment: [required]
+})
+
+const tables = ref([])
+const subColumns = ref([])
+const menus = ref<any[]>([])
+const menuTreeProps = {
+ label: 'name'
+}
+
+/** 选择子表名触发 */
+const subSelectChange = () => {
+ formData.value.subTableFkName = ''
+}
+
+/** 选择生成模板触发 */
+const tplSelectChange = (value) => {
+ if (value !== 1) {
+ // TODO 芋艿：暂时不考虑支持树形结构
+ message.error(
+ '暂时不考虑支持【树形】和【主子表】的代码生成。原因是：导致 vm 模板过于复杂，不利于胖友二次开发'
+ )
+ return false
+ }
+ if (value !== 'sub') {
+ formData.value.subTableName = ''
+ formData.value.subTableFkName = ''
+ }
+}
+
+watch(
+ () => props.table,
+ (table) => {
+ if (!table) return
+ formData.value = table as any
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+)
+
+onMounted(async () => {
+ try {
+ const resp = await MenuApi.getSimpleMenusList()
+ menus.value = handleTree(resp)
+ } catch {}
+})
+
+defineExpose({
+ validate: async () => unref(formRef)?.validate()
+})
+</script>
diff --git a/src/views/infra/codegen/components/ImportTable.vue b/src/views/infra/codegen/components/ImportTable.vue
deleted file mode 100644
index 38a81541..00000000
--- a/src/views/infra/codegen/components/ImportTable.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
- <!-- 导入表 -->
- <XModal title="导入表" v-model="visible">
- <el-form :model="queryParams" ref="queryRef" :inline="true">
- <el-form-item label="数据源" prop="dataSourceConfigId">
- <el-select v-model="queryParams.dataSourceConfigId" placeholder="请选择数据源" clearable>
- <el-option
- v-for="config in dataSourceConfigs"
- :key="config.id"
- :label="config.name"
- :value="config.id"
- />
- </el-select>
- </el-form-item>
- <el-form-item label="表名称" prop="name">
- <el-input v-model="queryParams.name" placeholder="请输入表名称" clearable />
- </el-form-item>
- <el-form-item label="表描述" prop="comment">
- <el-input v-model="queryParams.comment" placeholder="请输入表描述" clearable />
- </el-form-item>
- <el-form-item>
- <XButton
- type="primary"
- preIcon="ep:search"
- :title="t('common.query')"
- @click="handleQuery()"
- />
- <XButton preIcon="ep:refresh-right" :title="t('common.reset')" @click="resetQuery()" />
- </el-form-item>
- </el-form>
- <vxe-table
- ref="xTable"
- :data="dbTableList"
- v-loading="dbLoading"
- :checkbox-config="{ highlight: true, range: true }"
- height="260px"
- class="xtable-scrollbar"
- >
- <vxe-column type="checkbox" width="60" />
- <vxe-column field="name" title="表名称" />
- <vxe-column field="comment" title="表描述" />
- </vxe-table>
- <template #footer>
- <div class="dialog-footer">
- <XButton type="primary" :title="t('action.import')" @click="handleImportTable()" />
- <XButton :title="t('dialog.close')" @click="handleClose()" />
- </div>
- </template>
- </XModal>
-</template>
-<script setup lang="ts">
-import { VxeTableInstance } from 'vxe-table'
-import type { DatabaseTableVO } from '@/api/infra/codegen/types'
-import { getSchemaTableListApi, createCodegenListApi } from '@/api/infra/codegen'
-import { getDataSourceConfigListApi, DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-const emit = defineEmits(['ok'])
-// ======== 显示页面 ========
-const visible = ref(false)
-const dbLoading = ref(true)
-const queryParams = reactive({
- name: undefined,
- comment: undefined,
- dataSourceConfigId: 0
-})
-const dataSourceConfigs = ref<DataSourceConfigVO[]>([])
-const show = async () => {
- const res = await getDataSourceConfigListApi()
- dataSourceConfigs.value = res
- queryParams.dataSourceConfigId = dataSourceConfigs.value[0].id
- visible.value = true
- await getList()
-}
-/** 查询表数据 */
-const dbTableList = ref<DatabaseTableVO[]>([])
-
-/** 查询表数据 */
-const getList = async () => {
- dbLoading.value = true
- const res = await getSchemaTableListApi(queryParams)
- dbTableList.value = res
- dbLoading.value = false
-}
-// 查询操作
-const handleQuery = async () => {
- await getList()
-}
-// 重置操作
-const resetQuery = async () => {
- queryParams.name = undefined
- queryParams.comment = undefined
- queryParams.dataSourceConfigId = 0
- await getList()
-}
-const xTable = ref<VxeTableInstance>()
-/** 多选框选中数据 */
-const tables = ref<string[]>([])
-
-/** 导入按钮操作 */
-const handleImportTable = async () => {
- if (xTable.value?.getCheckboxRecords().length === 0) {
- message.error('请选择要导入的表')
- return
- }
- xTable.value?.getCheckboxRecords().forEach((item) => {
- tables.value.push(item.name)
- })
- await createCodegenListApi({
- dataSourceConfigId: queryParams.dataSourceConfigId,
- tableNames: tables.value
- })
- message.success('导入成功')
- emit('ok')
- handleClose()
-}
-const handleClose = () => {
- visible.value = false
- tables.value = []
-}
-defineExpose({
- show
-})
-</script>
diff --git a/src/views/infra/codegen/components/index.ts b/src/views/infra/codegen/components/index.ts
index b84c5a03..1634a76f 100644
--- a/src/views/infra/codegen/components/index.ts
+++ b/src/views/infra/codegen/components/index.ts
@@ -1,5 +1,4 @@
import BasicInfoForm from './BasicInfoForm.vue'
-import CloumInfoForm from './CloumInfoForm.vue'
-import ImportTable from './ImportTable.vue'
-import Preview from './Preview.vue'
-export { BasicInfoForm, CloumInfoForm, ImportTable, Preview }
+import ColumInfoForm from './ColumInfoForm.vue'
+import GenerateInfoForm from './GenerateInfoForm.vue'
+export { BasicInfoForm, ColumInfoForm, GenerateInfoForm }
diff --git a/src/views/infra/codegen/index.vue b/src/views/infra/codegen/index.vue
index 8337d2d4..4325f702 100644
--- a/src/views/infra/codegen/index.vue
+++ b/src/views/infra/codegen/index.vue
@@ -1,107 +1,243 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：导入 -->
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.import')"
- v-hasPermi="['infra:codegen:create']"
- @click="openImportTable()"
+ <!-- 搜索 -->
+ <content-wrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="表名称" prop="tableName">
+ <el-input
+ v-model="queryParams.tableName"
+ placeholder="请输入表名称"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
/>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：预览 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.preview')"
- v-hasPermi="['infra:codegen:query']"
- @click="handlePreview(row)"
+ </el-form-item>
+ <el-form-item label="表描述" prop="tableComment">
+ <el-input
+ v-model="queryParams.tableComment"
+ placeholder="请输入表描述"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
/>
- <!-- 操作：编辑 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['infra:codegen:update']"
- @click="handleUpdate(row.id)"
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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"
/>
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['infra:codegen:delete']"
- @click="deleteData(row.id)"
- />
- <!-- 操作：同步 -->
- <XTextButton
- preIcon="ep:refresh"
- :title="t('action.sync')"
- v-hasPermi="['infra:codegen:update']"
- @click="handleSynchDb(row)"
- />
- <!-- 操作：生成 -->
- <XTextButton
- preIcon="ep:download"
- :title="t('action.generate')"
- v-hasPermi="['infra:codegen:download']"
- @click="handleGenTable(row)"
- />
- </template>
- </XTable>
- </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" v-hasPermi="['infra:codegen:create']" @click="openImportTable()">
+ <Icon icon="ep:zoom-in" 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">
+ <template #default="scope">
+ {{
+ dataSourceConfigList.find((config) => config.id === scope.row.dataSourceConfigId)?.name
+ }}
+ </template>
+ </el-table-column>
+ <el-table-column label="表名称" align="center" prop="tableName" width="200" />
+ <el-table-column
+ label="表描述"
+ align="center"
+ prop="tableComment"
+ :show-overflow-tooltip="true"
+ width="200"
+ />
+ <el-table-column label="实体" align="center" prop="className" width="200" />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column
+ label="更新时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center" width="300px" fixed="right">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="handlePreview(scope.row)"
+ v-hasPermi="['infra:codegen:preview']"
+ >
+ 预览
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="handleUpdate(scope.row.id)"
+ v-hasPermi="['infra:codegen:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['infra:codegen:delete']"
+ >
+ 删除
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="handleSyncDB(scope.row)"
+ v-hasPermi="['infra:codegen:update']"
+ >
+ 同步
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="handleGenTable(scope.row)"
+ v-hasPermi="['infra:codegen:download']"
+ >
+ 生成代码
+ </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>
+
<!-- 弹窗：导入表 -->
- <ImportTable ref="importRef" @ok="reload()" />
+ <ImportTable ref="importRef" success="getList" />
<!-- 弹窗：预览代码 -->
- <Preview ref="previewRef" />
+ <PreviewCode ref="previewRef" />
</template>
<script setup lang="ts" name="Codegen">
+import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as CodegenApi from '@/api/infra/codegen'
-import { CodegenTableVO } from '@/api/infra/codegen/types'
-import { allSchemas } from './codegen.data'
-import { ImportTable, Preview } from './components'
-
-const { t } = useI18n() // 国际化
+import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
+import ImportTable from './ImportTable.vue'
+import PreviewCode from './PreviewCode.vue'
const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由跳转
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- getListApi: CodegenApi.getCodegenTablePageApi,
- deleteApi: CodegenApi.deleteCodegenTableApi
-})
-// 导入操作
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ tableName: undefined,
+ tableComment: undefined,
+ createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const dataSourceConfigList = ref<DataSourceConfigApi.DataSourceConfigVO[]>([]) // 数据源列表
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await CodegenApi.getCodegenTablePage(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 importRef = ref()
const openImportTable = () => {
- importRef.value.show()
-}
-// 预览操作
-const previewRef = ref()
-const handlePreview = (row: CodegenTableVO) => {
- previewRef.value.show(row)
-}
-// 编辑操作
-const handleUpdate = (rowId: number) => {
- push('/codegen/edit?id=' + rowId)
-}
-// 同步操作
-const handleSynchDb = (row: CodegenTableVO) => {
- // 基于 DB 同步
- const tableName = row.tableName
- message
- .confirm('确认要强制同步' + tableName + '表结构吗?', t('common.reminder'))
- .then(async () => {
- await CodegenApi.syncCodegenFromDBApi(row.id)
- message.success('同步成功')
- })
+ importRef.value.open()
}
-// 生成代码操作
-const handleGenTable = async (row: CodegenTableVO) => {
- const res = await CodegenApi.downloadCodegenApi(row.id)
+/** 编辑操作 */
+const handleUpdate = (id: number) => {
+ push('/codegen/edit?id=' + id)
+}
+
+/** 预览操作 */
+const previewRef = ref()
+const handlePreview = (row: CodegenApi.CodegenTableVO) => {
+ previewRef.value.open(row.id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await CodegenApi.deleteCodegenTable(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 同步操作 */
+const handleSyncDB = async (row: CodegenApi.CodegenTableVO) => {
+ // 基于 DB 同步
+ const tableName = row.tableName
+ try {
+ await message.confirm('确认要强制同步' + tableName + '表结构吗?', t('common.reminder'))
+ await CodegenApi.syncCodegenFromDB(row.id)
+ message.success('同步成功')
+ } catch {}
+}
+
+/** 生成代码操作 */
+const handleGenTable = async (row: CodegenApi.CodegenTableVO) => {
+ const res = await CodegenApi.downloadCodegen(row.id)
download.zip(res, 'codegen-' + row.className + '.zip')
}
+
+/** 初始化 **/
+onMounted(async () => {
+ await getList()
+ // 加载数据源列表
+ dataSourceConfigList.value = await DataSourceConfigApi.getDataSourceConfigList()
+})
</script>
diff --git a/src/views/infra/config/config.data.ts b/src/views/infra/config/config.data.ts
deleted file mode 100644
index 41acfa15..00000000
--- a/src/views/infra/config/config.data.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
- category: [required],
- name: [required],
- key: [required],
- value: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: null,
- action: true,
- columns: [
- {
- title: '参数分类',
- field: 'category'
- },
- {
- title: '参数名称',
- field: 'name',
- isSearch: true
- },
- {
- title: '参数键名',
- field: 'key',
- isSearch: true
- },
- {
- title: '参数键值',
- field: 'value'
- },
- {
- title: '系统内置',
- field: 'type',
- dictType: DICT_TYPE.INFRA_CONFIG_TYPE,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '是否可见',
- field: 'visible',
- table: {
- slots: {
- default: 'visible_default'
- }
- },
- form: {
- component: 'RadioButton',
- componentProps: {
- options: [
- { label: '是', value: true },
- { label: '否', value: false }
- ]
- }
- }
- },
- {
- title: t('form.remark'),
- field: 'remark',
- isTable: false,
- form: {
- component: 'Input',
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- }
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/infra/config/form.vue b/src/views/infra/config/form.vue
new file mode 100644
index 00000000..8d96b629
--- /dev/null
+++ b/src/views/infra/config/form.vue
@@ -0,0 +1,129 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="参数分类" prop="category">
+ <el-input v-model="formData.category" placeholder="请输入参数分类" />
+ </el-form-item>
+ <el-form-item label="参数名称" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入参数名称" />
+ </el-form-item>
+ <el-form-item label="参数键名" prop="key">
+ <el-input v-model="formData.key" placeholder="请输入参数键名" />
+ </el-form-item>
+ <el-form-item label="参数键值" prop="value">
+ <el-input v-model="formData.value" placeholder="请输入参数键值" />
+ </el-form-item>
+ <el-form-item label="是否可见" prop="visible">
+ <el-radio-group v-model="formData.visible">
+ <el-radio
+ v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+ :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, getBoolDictOptions } from '@/utils/dict'
+import * as ConfigApi from '@/api/infra/config'
+
+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,
+ category: '',
+ name: '',
+ key: '',
+ value: '',
+ visible: true,
+ remark: ''
+})
+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 openModal = 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 ConfigApi.getConfig(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+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 ConfigApi.ConfigVO
+ if (formType.value === 'create') {
+ await ConfigApi.createConfig(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await ConfigApi.updateConfig(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ category: '',
+ name: '',
+ key: '',
+ value: '',
+ visible: true,
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/infra/config/index.vue b/src/views/infra/config/index.vue
index b2bc8a8b..5fcafc07 100644
--- a/src/views/infra/config/index.vue
+++ b/src/views/infra/config/index.vue
@@ -1,185 +1,218 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['infra:config:create']"
- @click="handleCreate()"
- />
- <!-- 操作：导出 -->
- <XButton
- type="warning"
- preIcon="ep:download"
- :title="t('action.export')"
- v-hasPermi="['infra:config:export']"
- @click="exportList('配置.xls')"
- />
- </template>
- <template #visible_default="{ row }">
- <span>{{ row.visible ? '是' : '否' }} </span>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['infra:config:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['infra:config:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['infra:config:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
-
- <XModal v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- ref="formRef"
- />
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
+ <!-- 搜索 -->
+ <content-wrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
>
- <template #visible="{ row }">
- <span>{{ row.visible ? '是' : '否' }} </span>
- </template>
- </Descriptions>
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
+ <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 label="参数键名" prop="key">
+ <el-input
+ v-model="queryParams.key"
+ placeholder="请输入参数键名"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="系统内置" prop="type">
+ <el-select
+ v-model="queryParams.type"
+ placeholder="请选择系统内置"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE)"
+ :key="parseInt(dict.value)"
+ :label="dict.label"
+ :value="parseInt(dict.value)"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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>
+ <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="openModal('create')" v-hasPermi="['infra:config:create']">
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['infra:config: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="category" />
+ <el-table-column label="参数名称" align="center" prop="name" :show-overflow-tooltip="true" />
+ <el-table-column label="参数键名" align="center" prop="key" :show-overflow-tooltip="true" />
+ <el-table-column label="参数键值" align="center" prop="value" />
+ <el-table-column label="是否可见" align="center" prop="visible">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.visible" />
+ </template>
+ </el-table-column>
+ <el-table-column label="系统内置" align="center" prop="type">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.INFRA_CONFIG_TYPE" :value="scope.row.type" />
+ </template>
+ </el-table-column>
+ <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
/>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openModal('update', scope.row.id)"
+ v-hasPermi="['infra:config:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['infra:config: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>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <config-form ref="modalRef" @success="getList" />
</template>
<script setup lang="ts" name="Config">
-import type { FormExpose } from '@/components/Form'
-// 业务相关的 import
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
import * as ConfigApi from '@/api/infra/config'
-import { rules, allSchemas } from './config.data'
-
-const { t } = useI18n() // 国际化
+import ConfigForm from './form.vue'
const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
- allSchemas: allSchemas,
- getListApi: ConfigApi.getConfigPageApi,
- deleteApi: ConfigApi.deleteConfigApi,
- exportListApi: ConfigApi.exportConfigApi
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ name: undefined,
+ key: undefined,
+ type: undefined,
+ createTime: []
})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = async () => {
- setDialogTile('create')
- await nextTick()
- console.log(allSchemas.formSchema, 'allSchemas.formSchema')
- if (allSchemas.formSchema[2].field !== 'key') {
- unref(formRef)?.addSchema(
- {
- field: 'key',
- label: '参数键名',
- component: 'Input'
- },
- 2
- )
- unref(formRef)?.addSchema(
- {
- field: 'value',
- label: '参数键值',
- component: 'Input'
- },
- 3
- )
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await ConfigApi.getConfigPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
}
}
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await ConfigApi.getConfigApi(rowId)
- unref(formRef)?.delSchema('key')
- unref(formRef)?.delSchema('value')
-
- unref(formRef)?.setValues(res)
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- const res = await ConfigApi.getConfigApi(rowId)
- detailData.value = res
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
}
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as ConfigApi.ConfigVO
- if (actionType.value === 'create') {
- await ConfigApi.createConfigApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await ConfigApi.updateConfigApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+ modalRef.value.openModal(type, id)
}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await ConfigApi.deleteConfig(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await ConfigApi.exportConfigApi(queryParams)
+ download.excel(data, '参数配置.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/infra/dataSourceConfig/dataSourceConfig.data.ts b/src/views/infra/dataSourceConfig/dataSourceConfig.data.ts
deleted file mode 100644
index a790ad17..00000000
--- a/src/views/infra/dataSourceConfig/dataSourceConfig.data.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-// 国际化
-const { t } = useI18n()
-// 表单校验
-export const rules = reactive({
- name: [required],
- url: [required],
- username: [required],
- password: [required]
-})
-// 新增 + 修改
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'seq',
- action: true,
- columns: [
- {
- title: '数据源名称',
- field: 'name'
- },
- {
- title: '数据源连接',
- field: 'url',
- form: {
- component: 'Input',
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- }
- },
- {
- title: '用户名',
- field: 'username'
- },
- {
- title: '密码',
- field: 'password',
- isTable: false
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/infra/dataSourceConfig/form.vue b/src/views/infra/dataSourceConfig/form.vue
new file mode 100644
index 00000000..cd79e24b
--- /dev/null
+++ b/src/views/infra/dataSourceConfig/form.vue
@@ -0,0 +1,109 @@
+<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="数据源连接" prop="url">
+ <el-input v-model="formData.url" placeholder="请输入数据源连接" />
+ </el-form-item>
+ <el-form-item label="用户名" prop="username">
+ <el-input v-model="formData.username" placeholder="请输入用户名" />
+ </el-form-item>
+ <el-form-item label="密码" prop="password">
+ <el-input v-model="formData.password" 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 DataSourceConfigApi from '@/api/infra/dataSourceConfig'
+
+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<DataSourceConfigApi.DataSourceConfigVO>({
+ id: undefined,
+ name: '',
+ url: '',
+ username: '',
+ password: ''
+})
+const formRules = reactive({
+ name: [{ required: true, message: '数据源名称不能为空', trigger: 'blur' }],
+ url: [{ required: true, message: '数据源连接不能为空', trigger: 'blur' }],
+ username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
+ password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = 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 DataSourceConfigApi.getDataSourceConfig(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+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 DataSourceConfigApi.DataSourceConfigVO
+ if (formType.value === 'create') {
+ await DataSourceConfigApi.createDataSourceConfig(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await DataSourceConfigApi.updateDataSourceConfig(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: '',
+ url: '',
+ username: '',
+ password: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/infra/dataSourceConfig/index.vue b/src/views/infra/dataSourceConfig/index.vue
index 1e3db49d..ab3523e7 100644
--- a/src/views/infra/dataSourceConfig/index.vue
+++ b/src/views/infra/dataSourceConfig/index.vue
@@ -1,145 +1,102 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <XButton
+ <content-wrap>
+ <!-- 搜索工作栏 -->
+ <el-form class="-mb-15px" :inline="true">
+ <el-form-item>
+ <el-button
type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
+ @click="openModal('create')"
v-hasPermi="['infra:data-source-config:create']"
- @click="handleCreate()"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['infra:data-source-config:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['infra:data-source-config:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['infra:data-source-config:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <XModal v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- ref="formRef"
- />
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="loading"
- @click="submitForm()"
+ >
+ <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" align="center">
+ <el-table-column label="主键编号" align="center" prop="id" />
+ <el-table-column label="数据源名称" align="center" prop="name" />
+ <el-table-column label="数据源连接" align="center" prop="url" :show-overflow-tooltip="true" />
+ <el-table-column label="用户名" align="center" prop="username" />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
/>
- <!-- 按钮：关闭 -->
- <XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openModal('update', scope.row.id)"
+ v-hasPermi="['infra:data-source-config:update']"
+ :disabled="scope.row.id === 0"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['infra:data-source-config:delete']"
+ :disabled="scope.row.id === 0"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </content-wrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <data-source-config-form ref="modalRef" @success="getList" />
</template>
<script setup lang="ts" name="DataSourceConfig">
-import type { FormExpose } from '@/components/Form'
-// 业务相关的 import
-import * as DataSourceConfiggApi from '@/api/infra/dataSourceConfig'
-import { rules, allSchemas } from './dataSourceConfig.data'
-
-const { t } = useI18n() // 国际化
+import { dateFormatter } from '@/utils/formatTime'
+import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
+import DataSourceConfigForm from './form.vue'
const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- isList: true,
- getListApi: DataSourceConfiggApi.getDataSourceConfigListApi,
- deleteApi: DataSourceConfiggApi.deleteDataSourceConfigApi
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ list.value = await DataSourceConfigApi.getDataSourceConfigList()
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+ modalRef.value.openModal(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await DataSourceConfigApi.deleteDataSourceConfig(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
})
-// ========== CRUD 相关 ==========
-const loading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await DataSourceConfiggApi.getDataSourceConfigApi(rowId)
- unref(formRef)?.setValues(res)
-}
-
-// 详情操作
-const handleDetail = async (rowId: number) => {
- // 设置数据
- const res = await DataSourceConfiggApi.getDataSourceConfigApi(rowId)
- detailData.value = res
- setDialogTile('detail')
-}
-
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- loading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as DataSourceConfiggApi.DataSourceConfigVO
- if (actionType.value === 'create') {
- await DataSourceConfiggApi.createDataSourceConfigApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await DataSourceConfiggApi.updateDataSourceConfigApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- loading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
-}
</script>
diff --git a/src/views/infra/file/form.vue b/src/views/infra/file/form.vue
new file mode 100644
index 00000000..b0a76e0e
--- /dev/null
+++ b/src/views/infra/file/form.vue
@@ -0,0 +1,81 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-upload
+ ref="uploadRef"
+ :limit="1"
+ accept=".jpg, .png, .gif"
+ :auto-upload="false"
+ drag
+ :headers="headers"
+ :action="url"
+ :data="data"
+ :disabled="formLoading"
+ :on-change="handleFileChange"
+ :on-progress="handleFileUploadProgress"
+ :on-success="handleFileSuccess"
+ >
+ <i class="el-icon-upload"></i>
+ <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
+ <template #tip>
+ <div class="el-upload__tip" style="color: red">
+ 提示：仅允许导入 jpg、png、gif 格式文件！
+ </div>
+ </template>
+ </el-upload>
+ <template #footer>
+ <el-button @click="submitFileForm" type="primary" :disabled="formLoading">确 定</el-button>
+ <el-button @click="modelVisible = false">取 消</el-button>
+ </template>
+ </Dialog>
+</template>
+
+<script setup lang="ts">
+import { Dialog } from '@/components/Dialog'
+import { getAccessToken } from '@/utils/auth'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const url = import.meta.env.VITE_UPLOAD_URL
+const headers = { Authorization: 'Bearer ' + getAccessToken() }
+const data = ref({ path: '' })
+const uploadRef = ref()
+
+/** 打开弹窗 */
+const openModal = async () => {
+ modelVisible.value = true
+ modelTitle.value = t('action.fileUpload')
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+/** 处理上传的文件发生变化 */
+const handleFileChange = (file) => {
+ data.value.path = file.name
+}
+
+/** 处理文件上传中 */
+const handleFileUploadProgress = () => {
+ formLoading.value = true // 禁止修改
+}
+
+/** 发起文件上传 */
+const submitFileForm = () => {
+ unref(uploadRef)?.submit()
+}
+
+/** 文件上传成功处理 */
+const handleFileSuccess = () => {
+ // 清理
+ modelVisible.value = false
+ formLoading.value = false
+ unref(uploadRef)?.clearFiles()
+ // 提示成功，并刷新
+ message.success(t('common.createSuccess'))
+ emit('success')
+}
+</script>
diff --git a/src/views/infra/file/index.vue b/src/views/infra/file/index.vue
new file mode 100644
index 00000000..32b35562
--- /dev/null
+++ b/src/views/infra/file/index.vue
@@ -0,0 +1,154 @@
+<template>
+ <!-- 搜索 -->
+ <content-wrap>
+ <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
+ <el-form-item label="文件路径" prop="path">
+ <el-input
+ v-model="queryParams.path"
+ placeholder="请输入文件路径"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="文件类型" prop="type" width="80">
+ <el-input
+ v-model="queryParams.type"
+ placeholder="请输入文件类型"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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')]"
+ />
+ </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="openModal">
+ <Icon icon="ep:upload" class="mr-5px" /> 上传文件
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </content-wrap>
+
+ <!-- 列表 -->
+ <content-wrap>
+ <el-table v-loading="loading" :data="list" align="center">
+ <el-table-column label="文件名" align="center" prop="name" :show-overflow-tooltip="true" />
+ <el-table-column label="文件路径" align="center" prop="path" :show-overflow-tooltip="true" />
+ <el-table-column label="URL" align="center" prop="url" :show-overflow-tooltip="true" />
+ <el-table-column
+ label="文件大小"
+ align="center"
+ prop="size"
+ width="120"
+ :formatter="fileSizeFormatter"
+ />
+ <el-table-column label="文件类型" align="center" prop="type" width="180px" />
+ <el-table-column
+ label="上传时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['infra:config: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>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <file-upload-form ref="modalRef" @success="getList" />
+</template>
+<script setup lang="ts" name="Config">
+import { fileSizeFormatter } from '@/utils'
+import { dateFormatter } from '@/utils/formatTime'
+import * as FileApi from '@/api/infra/file'
+import FileUploadForm from './form.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: undefined,
+ type: undefined,
+ createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await FileApi.getFilePage(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 modalRef = ref()
+const openModal = () => {
+ modalRef.value.openModal()
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await FileApi.deleteFile(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
+</script>
diff --git a/src/views/infra/fileConfig/fileConfig.data.ts b/src/views/infra/fileConfig/fileConfig.data.ts
deleted file mode 100644
index ae351cfa..00000000
--- a/src/views/infra/fileConfig/fileConfig.data.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
- name: [required],
- storage: [required],
- config: {
- basePath: [required],
- host: [required],
- port: [required],
- username: [required],
- password: [required],
- mode: [required],
- endpoint: [required],
- bucket: [required],
- accessKey: [required],
- accessSecret: [required],
- domain: [required]
- }
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'id',
- primaryTitle: '配置编号',
- action: true,
- actionWidth: '400px',
- columns: [
- {
- title: '配置名',
- field: 'name',
- isSearch: true
- },
- {
- title: '存储器',
- field: 'storage',
- dictType: DICT_TYPE.INFRA_FILE_STORAGE,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '主配置',
- field: 'master',
- dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
- dictClass: 'boolean'
- },
- {
- title: t('form.remark'),
- field: 'remark',
- form: {
- component: 'Input',
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- }
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/infra/fileConfig/form.vue b/src/views/infra/fileConfig/form.vue
new file mode 100644
index 00000000..f08ba4c4
--- /dev/null
+++ b/src/views/infra/fileConfig/form.vue
@@ -0,0 +1,193 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ 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="remark">
+ <el-input v-model="formData.remark" placeholder="请输入备注" />
+ </el-form-item>
+ <el-form-item label="存储器" prop="storage">
+ <el-select
+ v-model="formData.storage"
+ placeholder="请选择存储器"
+ :disabled="formData.id !== undefined"
+ >
+ <el-option
+ v-for="dict in getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="parseInt(dict.value)"
+ />
+ </el-select>
+ </el-form-item>
+ <!-- DB -->
+ <!-- Local / FTP / SFTP -->
+ <el-form-item
+ v-if="formData.storage >= 10 && formData.storage <= 12"
+ label="基础路径"
+ prop="config.basePath"
+ >
+ <el-input v-model="formData.config.basePath" placeholder="请输入基础路径" />
+ </el-form-item>
+ <el-form-item
+ v-if="formData.storage >= 11 && formData.storage <= 12"
+ label="主机地址"
+ prop="config.host"
+ >
+ <el-input v-model="formData.config.host" placeholder="请输入主机地址" />
+ </el-form-item>
+ <el-form-item
+ v-if="formData.storage >= 11 && formData.storage <= 12"
+ label="主机端口"
+ prop="config.port"
+ >
+ <el-input-number :min="0" v-model="formData.config.port" placeholder="请输入主机端口" />
+ </el-form-item>
+ <el-form-item
+ v-if="formData.storage >= 11 && formData.storage <= 12"
+ label="用户名"
+ prop="config.username"
+ >
+ <el-input v-model="formData.config.username" placeholder="请输入密码" />
+ </el-form-item>
+ <el-form-item
+ v-if="formData.storage >= 11 && formData.storage <= 12"
+ label="密码"
+ prop="config.password"
+ >
+ <el-input v-model="formData.config.password" placeholder="请输入密码" />
+ </el-form-item>
+ <el-form-item v-if="formData.storage === 11" label="连接模式" prop="config.mode">
+ <el-radio-group v-model="formData.config.mode">
+ <el-radio key="Active" label="Active">主动模式</el-radio>
+ <el-radio key="Passive" label="Passive">主动模式</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <!-- S3 -->
+ <el-form-item v-if="formData.storage === 20" label="节点地址" prop="config.endpoint">
+ <el-input v-model="formData.config.endpoint" placeholder="请输入节点地址" />
+ </el-form-item>
+ <el-form-item v-if="formData.storage === 20" label="存储 bucket" prop="config.bucket">
+ <el-input v-model="formData.config.bucket" placeholder="请输入 bucket" />
+ </el-form-item>
+ <el-form-item v-if="formData.storage === 20" label="accessKey" prop="config.accessKey">
+ <el-input v-model="formData.config.accessKey" placeholder="请输入 accessKey" />
+ </el-form-item>
+ <el-form-item v-if="formData.storage === 20" label="accessSecret" prop="config.accessSecret">
+ <el-input v-model="formData.config.accessSecret" placeholder="请输入 accessSecret" />
+ </el-form-item>
+ <!-- 通用 -->
+ <el-form-item v-if="formData.storage === 20" label="自定义域名">
+ <!-- 无需参数校验，所以去掉 prop -->
+ <el-input v-model="formData.config.domain" placeholder="请输入自定义域名" />
+ </el-form-item>
+ <el-form-item v-else-if="formData.storage" label="自定义域名" prop="config.domain">
+ <el-input v-model="formData.config.domain" 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, getDictOptions } from '@/utils/dict'
+import * as FileConfigApi from '@/api/infra/fileConfig'
+
+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: '',
+ storage: '',
+ remark: '',
+ config: {}
+})
+const formRules = reactive({
+ name: [{ required: true, message: '配置名不能为空', trigger: 'blur' }],
+ storage: [{ required: true, message: '存储器不能为空', trigger: 'change' }],
+ config: {
+ basePath: [{ required: true, message: '基础路径不能为空', trigger: 'blur' }],
+ host: [{ required: true, message: '主机地址不能为空', trigger: 'blur' }],
+ port: [{ required: true, message: '主机端口不能为空', trigger: 'blur' }],
+ username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
+ password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
+ mode: [{ required: true, message: '连接模式不能为空', trigger: 'change' }],
+ endpoint: [{ required: true, message: '节点地址不能为空', trigger: 'blur' }],
+ bucket: [{ required: true, message: '存储 bucket 不能为空', trigger: 'blur' }],
+ accessKey: [{ required: true, message: 'accessKey 不能为空', trigger: 'blur' }],
+ accessSecret: [{ required: true, message: 'accessSecret 不能为空', trigger: 'blur' }],
+ domain: [{ required: true, message: '自定义域名不能为空', trigger: 'blur' }]
+ }
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = 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 FileConfigApi.getFileConfig(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+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 FileConfigApi.FileConfigVO
+ if (formType.value === 'create') {
+ await FileConfigApi.createFileConfig(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await FileConfigApi.updateFileConfig(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: '',
+ storage: '',
+ remark: '',
+ config: {}
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/infra/fileConfig/index.vue b/src/views/infra/fileConfig/index.vue
index bd9a978a..ca0fac15 100644
--- a/src/views/infra/fileConfig/index.vue
+++ b/src/views/infra/fileConfig/index.vue
@@ -1,294 +1,198 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['infra:file-config:create']"
- @click="handleCreate(formRef)"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：编辑 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['infra:file-config:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['infra:file-config:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：主配置 -->
- <XTextButton
- preIcon="ep:flag"
- title="主配置"
- v-hasPermi="['infra:file-config:update']"
- @click="handleMaster(row)"
- />
- <!-- 操作：测试 -->
- <XTextButton preIcon="ep:share" :title="t('action.test')" @click="handleTest(row.id)" />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['infra:file-config:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <XModal v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <el-form
- ref="formRef"
- v-if="['create', 'update'].includes(actionType)"
- :model="form"
- :rules="rules"
- label-width="120px"
- >
+ <!-- 搜索 -->
+ <content-wrap>
+ <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
<el-form-item label="配置名" prop="name">
- <el-input v-model="form.name" placeholder="请输入配置名" />
- </el-form-item>
- <el-form-item label="备注" prop="remark">
- <el-input v-model="form.remark" placeholder="请输入备注" />
+ <el-input
+ v-model="queryParams.name"
+ placeholder="请输入配置名"
+ clearable
+ @keyup.enter="handleQuery"
+ />
</el-form-item>
<el-form-item label="存储器" prop="storage">
- <el-select v-model="form.storage" placeholder="请选择存储器" :disabled="form.id !== 0">
+ <el-select v-model="queryParams.storage" placeholder="请选择存储器" clearable>
<el-option
- v-for="(dict, index) in getIntDictOptions(DICT_TYPE.INFRA_FILE_STORAGE)"
- :key="index"
+ v-for="dict in getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE)"
+ :key="parseInt(dict.value)"
:label="dict.label"
- :value="dict.value"
+ :value="parseInt(dict.value)"
/>
</el-select>
</el-form-item>
- <!-- DB -->
- <!-- Local / FTP / SFTP -->
- <el-form-item
- v-if="form.storage >= 10 && form.storage <= 12"
- label="基础路径"
- prop="config.basePath"
- >
- <el-input v-model="form.config.basePath" placeholder="请输入基础路径" />
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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')]"
+ />
</el-form-item>
- <el-form-item
- v-if="form.storage >= 11 && form.storage <= 12"
- label="主机地址"
- prop="config.host"
- >
- <el-input v-model="form.config.host" placeholder="请输入主机地址" />
- </el-form-item>
- <el-form-item
- v-if="form.storage >= 11 && form.storage <= 12"
- label="主机端口"
- prop="config.port"
- >
- <el-input-number :min="0" v-model="form.config.port" placeholder="请输入主机端口" />
- </el-form-item>
- <el-form-item
- v-if="form.storage >= 11 && form.storage <= 12"
- label="用户名"
- prop="config.username"
- >
- <el-input v-model="form.config.username" placeholder="请输入密码" />
- </el-form-item>
- <el-form-item
- v-if="form.storage >= 11 && form.storage <= 12"
- label="密码"
- prop="config.password"
- >
- <el-input v-model="form.config.password" placeholder="请输入密码" />
- </el-form-item>
- <el-form-item v-if="form.storage === 11" label="连接模式" prop="config.mode">
- <el-radio-group v-model="form.config.mode">
- <el-radio key="Active" label="Active">主动模式</el-radio>
- <el-radio key="Passive" label="Passive">主动模式</el-radio>
- </el-radio-group>
- </el-form-item>
- <!-- S3 -->
- <el-form-item v-if="form.storage === 20" label="节点地址" prop="config.endpoint">
- <el-input v-model="form.config.endpoint" placeholder="请输入节点地址" />
- </el-form-item>
- <el-form-item v-if="form.storage === 20" label="存储 bucket" prop="config.bucket">
- <el-input v-model="form.config.bucket" placeholder="请输入 bucket" />
- </el-form-item>
- <el-form-item v-if="form.storage === 20" label="accessKey" prop="config.accessKey">
- <el-input v-model="form.config.accessKey" placeholder="请输入 accessKey" />
- </el-form-item>
- <el-form-item v-if="form.storage === 20" label="accessSecret" prop="config.accessSecret">
- <el-input v-model="form.config.accessSecret" placeholder="请输入 accessSecret" />
- </el-form-item>
- <!-- 通用 -->
- <el-form-item v-if="form.storage === 20" label="自定义域名">
- <!-- 无需参数校验，所以去掉 prop -->
- <el-input v-model="form.config.domain" placeholder="请输入自定义域名" />
- </el-form-item>
- <el-form-item v-else-if="form.storage" label="自定义域名" prop="config.domain">
- <el-input v-model="form.config.domain" placeholder="请输入自定义域名" />
+ <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="openModal('create')"
+ v-hasPermi="['infra:file-config:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
</el-form-item>
</el-form>
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm(formRef)"
+ </content-wrap>
+
+ <!-- 列表 -->
+ <content-wrap>
+ <el-table v-loading="loading" :data="list" align="center">
+ <el-table-column label="编号" align="center" prop="id" />
+ <el-table-column label="配置名" align="center" prop="name" />
+ <el-table-column label="存储器" align="center" prop="storage">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.INFRA_FILE_STORAGE" :value="scope.row.storage" />
+ </template>
+ </el-table-column>
+ <el-table-column label="备注" align="center" prop="remark" />
+ <el-table-column label="主配置" align="center" prop="primary">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
/>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ <el-table-column label="操作" align="center" width="240px">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openModal('update', scope.row.id)"
+ v-hasPermi="['infra:file-config:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ :disabled="scope.row.master"
+ @click="handleMaster(scope.row.id)"
+ v-hasPermi="['infra:file-config:update']"
+ >
+ 主配置
+ </el-button>
+ <el-button link type="primary" @click="handleTest(scope.row.id)"> 测试 </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['infra:config: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>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <file-config-form ref="modalRef" @success="getList" />
</template>
-<script setup lang="ts" name="FileConfig">
-import type { FormInstance } from 'element-plus'
-// 业务相关的 import
+<script setup lang="ts" name="Config">
import * as FileConfigApi from '@/api/infra/fileConfig'
-import { rules, allSchemas } from './fileConfig.data'
-import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
-
-const { t } = useI18n() // 国际化
+import FileConfigForm from './form.vue'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- getListApi: FileConfigApi.getFileConfigPageApi,
- deleteApi: FileConfigApi.deleteFileConfigApi
-})
+const { t } = useI18n() // 国际化
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormInstance>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-const form = ref<FileConfigApi.FileConfigVO>({
- id: 0,
- name: '',
- storage: null,
- master: false,
- visible: false,
- config: {
- basePath: '',
- host: '',
- port: 0,
- username: '',
- password: '',
- mode: '',
- endpoint: '',
- bucket: '',
- accessKey: '',
- accessSecret: '',
- domain: ''
- },
- remark: '',
- createTime: new Date()
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ name: undefined,
+ storage: undefined,
+ createTime: []
})
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
+const queryFormRef = ref() // 搜索的表单
-// 新增操作
-const handleCreate = (formEl: FormInstance | undefined) => {
- setDialogTile('create')
- formEl?.resetFields()
- form.value = {
- id: 0,
- name: '',
- storage: null,
- master: false,
- visible: false,
- config: {
- basePath: '',
- host: '',
- port: 0,
- username: '',
- password: '',
- mode: '',
- endpoint: '',
- bucket: '',
- accessKey: '',
- accessSecret: '',
- domain: ''
- },
- remark: '',
- createTime: new Date()
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await FileConfigApi.getFileConfigPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
}
}
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- // 设置数据
- const res = await FileConfigApi.getFileConfigApi(rowId)
- form.value = res
- setDialogTile('update')
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- // 设置数据
- const res = await FileConfigApi.getFileConfigApi(rowId)
- detailData.value = res
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
}
-// 主配置操作
-const handleMaster = (row: FileConfigApi.FileConfigVO) => {
- message
- .confirm('是否确认修改配置【 ' + row.name + ' 】为主配置?', t('common.reminder'))
- .then(async () => {
- await FileConfigApi.updateFileConfigMasterApi(row.id)
- await reload()
- })
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+ modalRef.value.openModal(type, id)
}
-const handleTest = async (rowId: number) => {
- const res = await FileConfigApi.testFileConfigApi(rowId)
- message.alert('测试通过，上传文件成功！访问地址：' + res)
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await FileConfigApi.deleteFileConfig(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
}
-// 提交按钮
-const submitForm = async (formEl: FormInstance | undefined) => {
- if (!formEl) return
- formEl.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- if (actionType.value === 'create') {
- await FileConfigApi.createFileConfigApi(form.value)
- message.success(t('common.createSuccess'))
- } else {
- await FileConfigApi.updateFileConfigApi(form.value)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- await reload()
- }
- }
- })
+/** 主配置按钮操作 */
+const handleMaster = async (id) => {
+ try {
+ await message.confirm('是否确认修改配置编号为"' + id + '"的数据项为主配置?')
+ await FileConfigApi.updateFileConfigMaster(id)
+ message.success(t('common.updateSuccess'))
+ await getList()
+ } catch {}
}
+
+/** 测试按钮操作 */
+const handleTest = async (id) => {
+ try {
+ const response = await FileConfigApi.testFileConfig(id)
+ message.alert('测试通过，上传文件成功！访问地址：' + response)
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/infra/fileList/fileList.data.ts b/src/views/infra/fileList/fileList.data.ts
deleted file mode 100644
index 29be6dae..00000000
--- a/src/views/infra/fileList/fileList.data.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'seq',
- action: true,
- columns: [
- {
- title: '文件名',
- field: 'name'
- },
- {
- title: '文件路径',
- field: 'path',
- isSearch: true
- },
- {
- title: 'URL',
- field: 'url',
- table: {
- cellRender: {
- name: 'XPreview'
- }
- }
- },
- {
- title: '文件大小',
- field: 'size',
- formatter: 'formatSize'
- },
- {
- title: '文件类型',
- field: 'type',
- isSearch: true
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/infra/fileList/index.vue b/src/views/infra/fileList/index.vue
deleted file mode 100644
index b9bfb815..00000000
--- a/src/views/infra/fileList/index.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <XButton
- type="primary"
- preIcon="ep:upload"
- title="上传文件"
- @click="uploadDialogVisible = true"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <XTextButton
- preIcon="ep:copy-document"
- :title="t('common.copy')"
- @click="handleCopy(row.url)"
- />
- <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['infra:file:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <XModal v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(详情) -->
- <Descriptions :schema="allSchemas.detailSchema" :data="detailData">
- <template #url="{ row }">
- <el-image
- v-if="row.type === 'jpg' || 'png' || 'gif'"
- style="width: 100px; height: 100px"
- :src="row.url"
- :key="row.url"
- lazy
- />
- <span>{{ row.url }}</span>
- </template>
- </Descriptions>
- <!-- 操作按钮 -->
- <template #footer>
- <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
- <XModal v-model="uploadDialogVisible" :title="uploadDialogTitle">
- <el-upload
- ref="uploadRef"
- :action="updateUrl + '?updateSupport=' + updateSupport"
- :headers="uploadHeaders"
- :drag="true"
- :limit="1"
- :multiple="true"
- :show-file-list="true"
- :disabled="uploadDisabled"
- :before-upload="beforeUpload"
- :on-exceed="handleExceed"
- :on-success="handleFileSuccess"
- :on-error="excelUploadError"
- :before-remove="beforeRemove"
- :auto-upload="false"
- accept=".jpg, .png, .gif"
- >
- <Icon icon="ep:upload-filled" />
- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
- <template #tip>
- <div class="el-upload__tip">请上传 .jpg, .png, .gif 标准格式文件</div>
- </template>
- </el-upload>
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- type="primary"
- preIcon="ep:upload-filled"
- :title="t('action.save')"
- @click="submitFileForm()"
- />
- <!-- 按钮：关闭 -->
- <XButton :title="t('dialog.close')" @click="uploadDialogVisible = false" />
- </template>
- </XModal>
-</template>
-<script setup lang="ts" name="FileList">
-import type { UploadInstance, UploadRawFile, UploadProps } from 'element-plus'
-// 业务相关的 import
-import { allSchemas } from './fileList.data'
-import * as FileApi from '@/api/infra/fileList'
-import { getAccessToken, getTenantId } from '@/utils/auth'
-import { useClipboard } from '@vueuse/core'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- getListApi: FileApi.getFilePageApi,
- deleteApi: FileApi.deleteFileApi
-})
-
-const detailData = ref() // 详情 Ref
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('') // 弹出层标题
-const uploadDialogVisible = ref(false)
-const uploadDialogTitle = ref('上传')
-const updateSupport = ref(0)
-const uploadDisabled = ref(false)
-const uploadRef = ref<UploadInstance>()
-let updateUrl = import.meta.env.VITE_UPLOAD_URL
-const uploadHeaders = ref()
-// 文件上传之前判断
-const beforeUpload = (file: UploadRawFile) => {
- const isImg = file.type === 'image/jpeg' || 'image/gif' || 'image/png'
- const isLt5M = file.size / 1024 / 1024 < 5
- if (!isImg) message.error('上传文件只能是 jpeg / gif / png 格式!')
- if (!isLt5M) message.error('上传文件大小不能超过 5MB!')
- return isImg && isLt5M
-}
-// 处理上传的文件发生变化
-// const handleFileChange = (uploadFile: UploadFile): void => {
-// uploadRef.value.data.path = uploadFile.name
-// }
-// 文件上传
-const submitFileForm = () => {
- uploadHeaders.value = {
- Authorization: 'Bearer ' + getAccessToken(),
- 'tenant-id': getTenantId()
- }
- uploadDisabled.value = true
- uploadRef.value!.submit()
-}
-// 文件上传成功
-const handleFileSuccess = async (response: any): Promise<void> => {
- if (response.code !== 0) {
- message.error(response.msg)
- return
- }
- message.success('上传成功')
- uploadDialogVisible.value = false
- uploadDisabled.value = false
- await reload()
-}
-const beforeRemove: UploadProps['beforeRemove'] = () => {
- uploadDisabled.value = false
-}
-// 文件数超出提示
-const handleExceed = (): void => {
- message.error('最多只能上传一个文件！')
-}
-// 上传错误提示
-const excelUploadError = (): void => {
- message.error('导入数据失败，请您重新上传！')
-}
-
-// 详情操作
-const handleDetail = (row: FileApi.FileVO) => {
- // 设置数据
- detailData.value = row
- dialogTitle.value = t('action.detail')
- dialogVisible.value = true
-}
-
-// ========== 复制相关 ==========
-const handleCopy = 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'))
- }
- }
-}
-</script>
diff --git a/src/views/infra/job/JobDetail.vue b/src/views/infra/job/JobDetail.vue
new file mode 100644
index 00000000..081c50de
--- /dev/null
+++ b/src/views/infra/job/JobDetail.vue
@@ -0,0 +1,71 @@
+<template>
+ <Dialog title="任务详细" v-model="modelVisible" width="700px">
+ <el-descriptions border :column="1">
+ <el-descriptions-item label="任务编号" min-width="60">
+ {{ detailData.id }}
+ </el-descriptions-item>
+ <el-descriptions-item label="任务名称">
+ {{ detailData.name }}
+ </el-descriptions-item>
+ <el-descriptions-item label="任务名称">
+ <dict-tag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="detailData.status" />
+ </el-descriptions-item>
+ <el-descriptions-item label="处理器的名字">
+ {{ detailData.handlerName }}
+ </el-descriptions-item>
+ <el-descriptions-item label="处理器的参数">
+ {{ detailData.handlerParam }}
+ </el-descriptions-item>
+ <el-descriptions-item label="Cron 表达式">
+ {{ detailData.cronExpression }}
+ </el-descriptions-item>
+ <el-descriptions-item label="重试次数">
+ {{ detailData.retryCount }}
+ </el-descriptions-item>
+ <el-descriptions-item label="重试间隔">
+ {{ detailData.retryInterval + ' 毫秒' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="监控超时时间">
+ {{ detailData.monitorTimeout > 0 ? detailData.monitorTimeout + ' 毫秒' : '未开启' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="后续执行时间">
+ <el-timeline>
+ <el-timeline-item
+ v-for="(nextTime, index) in nextTimes"
+ :key="index"
+ :timestamp="formatDate(nextTime)"
+ >
+ 第 {{ index + 1 }} 次
+ </el-timeline-item>
+ </el-timeline>
+ </el-descriptions-item>
+ </el-descriptions>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as JobApi from '@/api/infra/job'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({}) // 详情数据
+const nextTimes = ref([]) // 下一轮执行时间的数组
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+ modelVisible.value = true
+ // 查看，设置数据
+ if (id) {
+ detailLoading.value = true
+ try {
+ detailData.value = await JobApi.getJob(id)
+ // 获取下一次执行时间
+ nextTimes.value = await JobApi.getJobNextTimes(id)
+ } finally {
+ detailLoading.value = false
+ }
+ }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/src/views/infra/job/form.vue b/src/views/infra/job/JobForm.vue
similarity index 65%
rename from src/views/infra/job/form.vue
rename to src/views/infra/job/JobForm.vue
index 24488fd7..5148d181 100644
--- a/src/views/infra/job/form.vue
+++ b/src/views/infra/job/JobForm.vue
@@ -1,5 +1,4 @@
<template>
- <!-- 添加或修改定时任务对话框 -->
<Dialog :title="modelTitle" v-model="modelVisible">
<el-form
ref="formRef"
@@ -22,14 +21,7 @@
<el-input v-model="formData.handlerParam" placeholder="请输入处理器的参数" />
</el-form-item>
<el-form-item label="CRON 表达式" prop="cronExpression">
- <el-input v-model="formData.cronExpression" placeholder="请输入CRON 表达式">
- <template #append>
- <el-button type="primary" @click="handleShowCron">
- 生成表达式
- <i class="el-icon-time el-icon--right"></i>
- </el-button>
- </template>
- </el-input>
+ <crontab v-model="formData.cronExpression" />
</el-form-item>
<el-form-item label="重试次数" prop="retryCount">
<el-input
@@ -47,30 +39,14 @@
<el-input v-model="formData.monitorTimeout" placeholder="请输入监控超时时间，单位：毫秒" />
</el-form-item>
</el-form>
- <!-- 操作按钮 -->
<template #footer>
- <!-- 按钮：保存 -->
- <div class="dialog-footer">
- <el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
- <el-button @click="modelVisible = false">取 消</el-button>
- </div>
+ <el-button type="primary" @click="submitForm" :loading="formLoading">确 定</el-button>
+ <el-button @click="modelVisible = false">取 消</el-button>
</template>
</Dialog>
- <el-dialog
- title="Cron表达式生成器"
- v-model="openCron"
- append-to-body
- class="scrollbar"
- destroy-on-close
- >
- <crontab @hide="openCron = false" @fill="crontabFill" :expression="expression" />
- </el-dialog>
</template>
<script setup lang="ts" name="JobForm">
import * as JobApi from '@/api/infra/job'
-
-const emit = defineEmits(['success', 'crontabFill']) // 定义 success 事件，用于操作成功后的回调
-
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@@ -78,25 +54,13 @@ const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const defaultFormData = {
+const formData = ref({
id: undefined,
name: '',
- status: 0,
handlerName: '',
handlerParam: '',
- cronExpression: '',
- retryCount: 0,
- retryInterval: 0,
- monitorTimeout: 0,
- createTime: new Date()
-}
-const formData = ref({ ...defaultFormData })
-
-// 是否显示Cron表达式弹出层
-const openCron = ref(false)
-// 传入的表达式
-const expression = ref('')
-// 表单校验
+ cronExpression: ''
+})
const formRules = reactive({
name: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
handlerName: [{ required: true, message: '处理器的名字不能为空', trigger: 'blur' }],
@@ -107,7 +71,7 @@ const formRules = reactive({
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
-const openModal = async (type: string, id?: number) => {
+const open = async (type: string, id?: number) => {
modelVisible.value = true
modelTitle.value = t('action.' + type)
formType.value = type
@@ -116,28 +80,16 @@ const openModal = async (type: string, id?: number) => {
if (id) {
formLoading.value = true
try {
- formData.value = await JobApi.getJobApi(id)
+ formData.value = await JobApi.getJob(id)
} finally {
formLoading.value = false
}
}
}
-defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-/** cron表达式按钮操作 */
-const handleShowCron = () => {
- console.info(123333333333)
- expression.value = formData.value.cronExpression
- openCron.value = true
-}
-
-// cron表达式填充
-const crontabFill = (expression: string) => {
- formData.value.cronExpression = expression
- emit('crontabFill', expression)
-}
-
-// 提交按钮
+/** 提交按钮 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
@@ -148,10 +100,10 @@ const submitForm = async () => {
try {
const data = formData.value as unknown as JobApi.JobVO
if (formType.value === 'create') {
- await JobApi.createJobApi(data)
+ await JobApi.createJob(data)
message.success(t('common.createSuccess'))
} else {
- await JobApi.updateJobApi(data)
+ await JobApi.updateJob(data)
message.success(t('common.updateSuccess'))
}
modelVisible.value = false
@@ -165,7 +117,11 @@ const submitForm = async () => {
/** 重置表单 */
const resetForm = () => {
formData.value = {
- ...defaultFormData
+ id: undefined,
+ name: '',
+ handlerName: '',
+ handlerParam: '',
+ cronExpression: ''
}
formRef.value?.resetFields()
}
diff --git a/src/views/infra/job/JobLogView.vue b/src/views/infra/job/JobLogView.vue
deleted file mode 100644
index c66e0d80..00000000
--- a/src/views/infra/job/JobLogView.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
- <!-- 调度日志详细 -->
- <Dialog title="调度日志详细" v-model="modelVisible" width="700px" append-to-body>
- <el-form ref="form" :model="formData" label-width="120px" size="mini">
- <el-row>
- <el-col :span="12">
- <el-form-item label="日志编号：">{{ formData.id }}</el-form-item>
- <el-form-item label="任务编号：">{{ formData.jobId }}</el-form-item>
- <el-form-item label="处理器的名字：">{{ formData.handlerName }}</el-form-item>
- <el-form-item label="处理器的参数：">{{ formData.handlerParam }}</el-form-item>
- <el-form-item label="第几次执行：">{{ formData.executeIndex }}</el-form-item>
- <el-form-item label="执行时间：">{{
- parseTime(formData.beginTime) + ' ~ ' + parseTime(formData.endTime)
- }}</el-form-item>
- <el-form-item label="执行时长：">{{ formData.duration + ' 毫秒' }}</el-form-item>
- <el-form-item label="任务状态：">
- <dict-tag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="formData.status" />
- </el-form-item>
- <el-form-item label="执行结果：">{{ formData.result }}</el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="close">关 闭</el-button>
- </div>
- </template>
- </Dialog>
-</template>
-<script setup lang="ts" name="JobView">
-import * as JobLogApi from '@/api/infra/jobLog'
-import { DICT_TYPE } from '@/utils/dict'
-import { parseTime } from './utils'
-
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-
-const { t } = useI18n() // 国际化
-
-const modelVisible = ref(false) // 弹窗的是否展示
-const modelTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = ref({
- id: undefined,
- jobId: undefined,
- handlerParam: '',
- handlerName: '',
- executeIndex: '',
- beginTime: undefined,
- endTime: undefined,
- duration: true,
- result: '',
- status: undefined
-})
-
-/** 打开弹窗 */
-const openModal = async (id?: number) => {
- modelVisible.value = true
- modelTitle.value = t('action.detail')
- // 查看，设置数据
- if (id) {
- formLoading.value = true
- try {
- formData.value = await JobLogApi.getJobLogApi(id)
- } finally {
- formLoading.value = false
- }
- }
-}
-defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
-
-const close = () => {
- emit('success')
-}
-</script>
diff --git a/src/views/infra/job/index.vue b/src/views/infra/job/index.vue
index 702b31fe..e113878a 100644
--- a/src/views/infra/job/index.vue
+++ b/src/views/infra/job/index.vue
@@ -1,19 +1,31 @@
<template>
<content-wrap>
- <!-- 搜索栏 -->
- <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
+ <!-- 搜索工作栏 -->
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="100px"
+ >
<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 label="任务状态" prop="status">
- <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable>
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择任务状态"
+ clearable
+ class="!w-240px"
+ >
<el-option
- v-for="dict in getDictOptions(DICT_TYPE.INFRA_JOB_STATUS)"
+ v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_JOB_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@@ -26,6 +38,7 @@
placeholder="请输入处理器的名字"
clearable
@keyup.enter="handleQuery"
+ class="!w-240px"
/>
</el-form-item>
<el-form-item>
@@ -34,7 +47,7 @@
<el-button
type="primary"
plain
- @click="openModal('create')"
+ @click="openForm('create')"
v-hasPermi="['infra:job:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
@@ -48,63 +61,66 @@
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
-
<el-button type="info" plain @click="handleJobLog" v-hasPermi="['infra:job:query']">
<Icon icon="ep:zoom-in" 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.INFRA_JOB_STATUS" :value="scope.row.status" />
- </template> </el-table-column
- >>
+ </template>
+ </el-table-column>
<el-table-column label="处理器的名字" align="center" prop="handlerName" />
<el-table-column label="处理器的参数" align="center" prop="handlerParam" />
<el-table-column label="CRON 表达式" align="center" prop="cronExpression" />
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+ <el-table-column label="操作" align="center" width="200">
<template #default="scope">
<el-button
+ type="primary"
link
- icon="el-icon-edit"
- @click="openModal('update', scope.row.id)"
+ @click="openForm('update', scope.row.id)"
v-hasPermi="['infra:job:update']"
- >修改</el-button
>
+ 修改
+ </el-button>
<el-button
+ type="primary"
link
- icon="el-icon-check"
@click="handleChangeStatus(scope.row)"
v-hasPermi="['infra:job:update']"
- >{{ scope.row.status === InfraJobStatusEnum.STOP ? '开启' : '暂停' }}</el-button
>
+ {{ scope.row.status === InfraJobStatusEnum.STOP ? '开启' : '暂停' }}
+ </el-button>
<el-button
+ type="danger"
link
- icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['infra:job:delete']"
- >删除</el-button
>
+ 删除
+ </el-button>
<el-dropdown
- class="mt-1"
- :teleported="true"
@command="(command) => handleCommand(command, scope.row)"
v-hasPermi="['infra:job:trigger', 'infra:job:query']"
>
- <el-button link icon="el-icon-d-arrow-right">更多</el-button>
+ <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
<template #dropdown>
<el-dropdown-menu>
- <el-dropdown-item command="handleRun" v-if="hasPermi(['infra:job:trigger'])">
+ <el-dropdown-item command="handleRun" v-if="checkPermi(['infra:job:trigger'])">
执行一次
</el-dropdown-item>
- <el-dropdown-item command="handleView" v-if="hasPermi(['infra:job:query'])">
+ <el-dropdown-item command="openDetail" v-if="checkPermi(['infra:job:query'])">
任务详细
</el-dropdown-item>
- <el-dropdown-item command="handleJobLog" v-if="hasPermi(['infra:job:query'])">
+ <el-dropdown-item command="handleJobLog" v-if="checkPermi(['infra:job:query'])">
调度日志
</el-dropdown-item>
</el-dropdown-menu>
@@ -114,8 +130,7 @@
</el-table-column>
</el-table>
<!-- 分页组件 -->
- <pagination
- v-show="total > 0"
+ <Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@@ -124,23 +139,21 @@
</content-wrap>
<!-- 表单弹窗：添加/修改 -->
- <job-form ref="modalRef" @success="getList" />
+ <JobForm ref="formRef" @success="getList" />
<!-- 表单弹窗：查看 -->
- <job-view ref="viewModalRef" @success="getList" />
+ <JobDetail ref="detailRef" />
</template>
-
<script setup lang="ts" name="Job">
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
-import JobForm from './form.vue'
-import JobView from './view.vue'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { checkPermi } from '@/utils/permission'
+import JobForm from './JobForm.vue'
+import JobDetail from './JobDetail.vue'
import download from '@/utils/download'
import * as JobApi from '@/api/infra/job'
import { InfraJobStatusEnum } from '@/utils/constants'
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
-
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
-const { push } = useRouter()
+const { push } = useRouter() // 路由
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
@@ -155,11 +168,11 @@ const queryParams = reactive({
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
-/** 查询参数列表 */
+/** 查询列表 */
const getList = async () => {
loading.value = true
try {
- const data = await JobApi.getJobPageApi(queryParams)
+ const data = await JobApi.getJobPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
@@ -167,30 +180,6 @@ const getList = async () => {
}
}
-const handleChangeStatus = async (row: JobApi.JobVO) => {
- const text = row.status === InfraJobStatusEnum.STOP ? '开启' : '关闭'
-
- const status =
- row.status === InfraJobStatusEnum.STOP ? InfraJobStatusEnum.NORMAL : InfraJobStatusEnum.STOP
- message
- .confirm('确认要' + text + '定时任务编号为"' + row.id + '"的数据项?', t('common.reminder'))
- .then(async () => {
- row.status =
- row.status === InfraJobStatusEnum.NORMAL
- ? InfraJobStatusEnum.NORMAL
- : InfraJobStatusEnum.STOP
- await JobApi.updateJobStatusApi(row.id, status)
- message.success(text + '成功')
- await getList()
- })
- .catch(() => {
- row.status =
- row.status === InfraJobStatusEnum.NORMAL
- ? InfraJobStatusEnum.STOP
- : InfraJobStatusEnum.NORMAL
- })
-}
-
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
@@ -203,10 +192,47 @@ const resetQuery = () => {
handleQuery()
}
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await JobApi.exportJob(queryParams)
+ download.excel(data, '定时任务.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
/** 添加/修改操作 */
-const modalRef = ref()
-const openModal = (type: string, id?: number) => {
- modalRef.value.openModal(type, id)
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
+}
+
+/** 修改状态操作 */
+const handleChangeStatus = async (row: JobApi.JobVO) => {
+ try {
+ // 修改状态的二次确认
+ const text = row.status === InfraJobStatusEnum.STOP ? '开启' : '关闭'
+ await message.confirm(
+ '确认要' + text + '定时任务编号为"' + row.id + '"的数据项?',
+ t('common.reminder')
+ )
+ const status =
+ row.status === InfraJobStatusEnum.STOP ? InfraJobStatusEnum.NORMAL : InfraJobStatusEnum.STOP
+ await JobApi.updateJobStatus(row.id, status)
+ message.success(text + '成功')
+ // 刷新列表
+ await getList()
+ } catch {
+ // 取消后，进行恢复按钮
+ row.status =
+ row.status === InfraJobStatusEnum.NORMAL ? InfraJobStatusEnum.STOP : InfraJobStatusEnum.NORMAL
+ }
}
/** 删除按钮操作 */
@@ -215,43 +241,21 @@ const handleDelete = async (id: number) => {
// 删除的二次确认
await message.delConfirm()
// 发起删除
- await JobApi.deleteJobApi(id)
+ await JobApi.deleteJob(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
-/** 查看操作 */
-const viewModalRef = ref()
-const handleView = (rowId?: number) => {
- viewModalRef.value.openModal(rowId)
-}
-// 执行日志
-const handleJobLog = (rowId?: number) => {
- if (rowId) {
- push('/job/job-log?id=' + rowId)
- } else {
- push('/job/job-log')
- }
-}
-// 执行一次
-const handleRun = (row: JobApi.JobVO) => {
- message.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder')).then(async () => {
- await JobApi.runJobApi(row.id)
- message.success('执行成功')
- await getList()
- })
-}
-
/** '更多'操作按钮 */
const handleCommand = (command, row) => {
switch (command) {
case 'handleRun':
handleRun(row)
break
- case 'handleView':
- handleView(row?.id)
+ case 'openDetail':
+ openDetail(row.id)
break
case 'handleJobLog':
handleJobLog(row?.id)
@@ -261,36 +265,32 @@ const handleCommand = (command, row) => {
}
}
-/** 导出按钮操作 */
-const handleExport = async () => {
+/** 执行一次 */
+const handleRun = async (row: JobApi.JobVO) => {
try {
- // 导出的二次确认
- await message.exportConfirm()
- // 发起导出
- exportLoading.value = true
- const data = await JobApi.exportJobApi(queryParams)
- download.excel(data, '定时任务.xls')
- } catch {
- } finally {
- exportLoading.value = false
- }
+ // 二次确认
+ await message.confirm('确认要立即执行一次' + row.name + '?', t('common.reminder'))
+ // 提交执行
+ await JobApi.runJobApi(row.id)
+ message.success('执行成功')
+ // 刷新列表
+ await getList()
+ } catch {}
}
-// 权限判断：dropdown 与 v-hasPermi有冲突会造成大量的waring，改用v-if调用此方法
-const hasPermi = (permiKeys: string[]) => {
- const { wsCache } = useCache()
- const all_permission = '*:*:*'
- const permissions = wsCache.get(CACHE_KEY.USER).permissions
+/** 查看操作 */
+const detailRef = ref()
+const openDetail = (id: number) => {
+ detailRef.value.open(id)
+}
- if (permiKeys && permiKeys instanceof Array && permiKeys.length > 0) {
- const permissionFlag = permiKeys
-
- const hasPermissions = permissions.some((permission: string) => {
- return all_permission === permission || permissionFlag.includes(permission)
- })
- return hasPermissions
+/** 跳转执行日志 */
+const handleJobLog = (id: number) => {
+ if (id) {
+ push('/job/job-log?id=' + id)
+ } else {
+ push('/job/job-log')
}
- return false
}
/** 初始化 **/
diff --git a/src/views/infra/job/logger/JobLogDetail.vue b/src/views/infra/job/logger/JobLogDetail.vue
new file mode 100644
index 00000000..7c4bab2b
--- /dev/null
+++ b/src/views/infra/job/logger/JobLogDetail.vue
@@ -0,0 +1,57 @@
+<template>
+ <Dialog title="任务详细" v-model="modelVisible" width="700px">
+ <el-descriptions border :column="1">
+ <el-descriptions-item label="日志编号" min-width="60">
+ {{ detailData.id }}
+ </el-descriptions-item>
+ <el-descriptions-item label="任务编号">
+ {{ detailData.jobId }}
+ </el-descriptions-item>
+ <el-descriptions-item label="处理器的名字">
+ {{ detailData.handlerName }}
+ </el-descriptions-item>
+ <el-descriptions-item label="处理器的参数">
+ {{ detailData.handlerParam }}
+ </el-descriptions-item>
+ <el-descriptions-item label="第几次执行">
+ {{ detailData.executeIndex }}
+ </el-descriptions-item>
+ <el-descriptions-item label="执行时间">
+ {{ formatDate(detailData.beginTime) + ' ~ ' + formatDate(detailData.endTime) }}
+ </el-descriptions-item>
+ <el-descriptions-item label="执行时长">
+ {{ detailData.duration + ' 毫秒' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="任务状态">
+ <dict-tag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="detailData.status" />
+ </el-descriptions-item>
+ <el-descriptions-item label="执行结果">
+ {{ detailData.duration + ' result' }}
+ </el-descriptions-item>
+ </el-descriptions>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as JobLogApi from '@/api/infra/jobLog'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({}) // 详情数据
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+ modelVisible.value = true
+ // 查看，设置数据
+ if (id) {
+ detailLoading.value = true
+ try {
+ detailData.value = await JobLogApi.getJobLog(id)
+ } finally {
+ detailLoading.value = false
+ }
+ }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/src/views/infra/job/JobLog.vue b/src/views/infra/job/logger/index.vue
similarity index 74%
rename from src/views/infra/job/JobLog.vue
rename to src/views/infra/job/logger/index.vue
index daa20046..f55a0647 100644
--- a/src/views/infra/job/JobLog.vue
+++ b/src/views/infra/job/logger/index.vue
@@ -1,37 +1,52 @@
<template>
<content-wrap>
- <!-- 搜索栏 -->
- <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="120px">
+ <!-- 搜索工作栏 -->
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="120px"
+ >
<el-form-item label="处理器的名字" prop="handlerName">
<el-input
v-model="queryParams.handlerName"
placeholder="请输入处理器的名字"
clearable
@keyup.enter="handleQuery"
+ class="!w-240px"
/>
</el-form-item>
<el-form-item label="开始执行时间" prop="beginTime">
<el-date-picker
- clearable
v-model="queryParams.beginTime"
type="date"
- value-format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始执行时间"
+ clearable
+ class="!w-240px"
/>
</el-form-item>
<el-form-item label="结束执行时间" prop="endTime">
<el-date-picker
- clearable
v-model="queryParams.endTime"
type="date"
- value-format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择结束执行时间"
+ clearable
+ :default-time="new Date('1 23:59:59')"
+ class="!w-240px"
/>
</el-form-item>
<el-form-item label="任务状态" prop="status">
- <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable>
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择任务状态"
+ clearable
+ class="!w-240px"
+ >
<el-option
- v-for="dict in getDictOptions(DICT_TYPE.INFRA_JOB_LOG_STATUS)"
+ v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_JOB_LOG_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
@@ -52,16 +67,19 @@
</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="jobId" />
<el-table-column label="处理器的名字" align="center" prop="handlerName" />
<el-table-column label="处理器的参数" align="center" prop="handlerParam" />
<el-table-column label="第几次执行" align="center" prop="executeIndex" />
- <el-table-column label="执行时间" align="center" width="180">
+ <el-table-column label="执行时间" align="center" width="170s">
<template #default="scope">
- <span>{{ parseTime(scope.row.beginTime) + ' ~ ' + parseTime(scope.row.endTime) }}</span>
+ <span>{{ formatDate(scope.row.beginTime) + ' ~ ' + formatDate(scope.row.endTime) }}</span>
</template>
</el-table-column>
<el-table-column label="执行时长" align="center" prop="duration">
@@ -74,40 +92,39 @@
<dict-tag :type="DICT_TYPE.INFRA_JOB_LOG_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+ <el-table-column label="操作" align="center">
<template #default="scope">
<el-button
+ type="primary"
link
- icon="el-icon-view"
- @click="handleView(scope.row.id)"
- :loading="exportLoading"
+ @click="openDetail(scope.row.id)"
v-hasPermi="['infra:job:query']"
- >详细
+ >
+ 详细
</el-button>
</template>
</el-table-column>
</el-table>
-
- <pagination
- v-show="total > 0"
+ <!-- 分页组件 -->
+ <Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</content-wrap>
+
<!-- 表单弹窗：查看 -->
- <log-view ref="viewModalRef" @success="getList" />
+ <JobLogDetail ref="detailRef" />
</template>
-
<script setup lang="ts" name="JobLog">
-import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
import download from '@/utils/download'
-import LogView from './JobLogView.vue'
+import JobLogDetail from './JobLogDetail.vue'
import * as JobLogApi from '@/api/infra/jobLog'
-import { parseTime } from './utils'
-
const message = useMessage() // 消息弹窗
+const { query } = useRoute() // 查询参数
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
@@ -115,6 +132,7 @@ const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
+ jobId: query.id,
handlerName: undefined,
beginTime: undefined,
endTime: undefined,
@@ -123,15 +141,11 @@ const queryParams = reactive({
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
-/** 查询参数列表 */
+/** 查询列表 */
const getList = async () => {
loading.value = true
try {
- const data = await JobLogApi.getJobLogPageApi({
- ...queryParams,
- beginTime: queryParams.beginTime ? queryParams.beginTime + ' 00:00:00' : undefined,
- endTime: queryParams.endTime ? queryParams.endTime + ' 23:59:59' : undefined
- })
+ const data = await JobLogApi.getJobLogPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
@@ -152,9 +166,9 @@ const resetQuery = () => {
}
/** 查看操作 */
-const viewModalRef = ref()
-const handleView = (rowId?: number) => {
- viewModalRef.value.openModal(rowId)
+const detailRef = ref()
+const openDetail = (rowId?: number) => {
+ detailRef.value.open(rowId)
}
/** 导出按钮操作 */
@@ -164,7 +178,7 @@ const handleExport = async () => {
await message.exportConfirm()
// 发起导出
exportLoading.value = true
- const data = await JobLogApi.exportJobLogApi(queryParams)
+ const data = await JobLogApi.exportJobLog(queryParams)
download.excel(data, '定时任务执行日志.xls')
} catch {
} finally {
diff --git a/src/views/infra/job/utils.ts b/src/views/infra/job/utils.ts
deleted file mode 100644
index a3774f22..00000000
--- a/src/views/infra/job/utils.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-export const parseTime = (time) => {
- if (!time) {
- return null
- }
- const format = '{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(/{(y|m|d|h|i|s|a)+}/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
-}
diff --git a/src/views/infra/job/view.vue b/src/views/infra/job/view.vue
deleted file mode 100644
index d195e0e3..00000000
--- a/src/views/infra/job/view.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
- <!-- 任务详细 -->
- <Dialog title="任务详细" v-model="modelVisible" width="700px" append-to-body>
- <el-form ref="formRef" :model="formData" label-width="200px">
- <el-row>
- <el-col :span="24">
- <el-form-item label="任务编号：">{{ formData.id }}</el-form-item>
- <el-form-item label="任务名称：">{{ formData.name }}</el-form-item>
- <el-form-item label="任务名称：">
- <dict-tag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="formData.status" />
- </el-form-item>
- <el-form-item label="处理器的名字：">{{ formData.handlerName }}</el-form-item>
- <el-form-item label="处理器的参数：">{{ formData.handlerParam }}</el-form-item>
- <el-form-item label="cron表达式：">{{ formData.cronExpression }}</el-form-item>
- <el-form-item label="重试次数：">{{ formData.retryCount }}</el-form-item>
- <el-form-item label="重试间隔：">{{ formData.retryInterval + ' 毫秒' }}</el-form-item>
- <el-form-item label="监控超时时间：">{{
- formData.monitorTimeout > 0 ? formData.monitorTimeout + ' 毫秒' : '未开启'
- }}</el-form-item>
- <el-form-item label="后续执行时间：">
- <el-timeline class="pt-3">
- <el-timeline-item
- v-for="(activity, index) in nextTimes"
- :key="index"
- :timestamp="parseTime(activity)"
- >
- 第{{ index + 1 }}次
- </el-timeline-item>
- </el-timeline>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="close">关 闭</el-button>
- </div>
- </template>
- </Dialog>
-</template>
-<script setup lang="ts" name="JobView">
-import * as JobApi from '@/api/infra/job'
-import { parseTime } from './utils'
-import { DICT_TYPE } from '@/utils/dict'
-
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-
-const { t } = useI18n() // 国际化
-
-const formRef = ref() // 表单 Ref
-const modelVisible = ref(false) // 弹窗的是否展示
-const modelTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = ref({
- id: undefined,
- name: '',
- handlerParam: '',
- handlerName: '',
- cronExpression: '',
- retryCount: true,
- retryInterval: '',
- monitorTimeout: 0,
- status: 0
-})
-const nextTimes = ref([])
-
-/** 打开弹窗 */
-const openModal = async (id?: number) => {
- modelVisible.value = true
- modelTitle.value = t('action.detail')
- // 查看，设置数据
- if (id) {
- formLoading.value = true
- try {
- formData.value = await JobApi.getJobApi(id)
- // 获取下一次执行时间
- nextTimes.value = await JobApi.getJobNextTimesApi(id)
- } finally {
- formLoading.value = false
- }
- }
-}
-defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
-
-const close = () => {
- modelVisible.value = false
- emit('success')
-}
-</script>
diff --git a/src/views/infra/webSocket/index.vue b/src/views/infra/webSocket/index.vue
index 655045c0..f090ba9b 100644
--- a/src/views/infra/webSocket/index.vue
+++ b/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'
diff --git a/src/views/mall/product/category/CategoryForm.vue b/src/views/mall/product/category/CategoryForm.vue
new file mode 100644
index 00000000..b3e68001
--- /dev/null
+++ b/src/views/mall/product/category/CategoryForm.vue
@@ -0,0 +1,147 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="上级分类" prop="parentId">
+ <el-tree-select
+ v-model="formData.parentId"
+ :data="categoryTree"
+ :props="{ label: 'name', value: 'id' }"
+ :render-after-expand="false"
+ placeholder="请选择上级分类"
+ check-strictly
+ default-expand-all
+ />
+ </el-form-item>
+ <el-form-item label="分类名称" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入分类名称" />
+ </el-form-item>
+ <el-form-item label="分类图片" prop="picUrl">
+ <UploadImg v-model="formData.picUrl" :limit="1" :is-show-tip="false" />
+ <div v-if="formData.parentId === 0" style="font-size: 10px">推荐 200x100 图片分辨率</div>
+ <div v-else style="font-size: 10px">推荐 100x100 图片分辨率</div>
+ </el-form-item>
+ <el-form-item label="分类排序" prop="sort">
+ <el-input-number v-model="formData.sort" controls-position="right" :min="0" />
+ </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="分类描述">
+ <el-input v-model="formData.description" 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 { handleTree } from '@/utils/tree'
+import * as ProductCategoryApi from '@/api/mall/product/category'
+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: '',
+ picUrl: '',
+ status: CommonStatusEnum.ENABLE,
+ description: ''
+})
+const formRules = reactive({
+ parentId: [{ required: true, message: '请选择上级分类', trigger: 'blur' }],
+ name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+ picUrl: [{ required: true, message: '分类图片不能为空', trigger: 'blur' }],
+ sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }],
+ status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const categoryTree = ref<any[]>([]) // 分类树
+
+/** 打开弹窗 */
+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 ProductCategoryApi.getCategory(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+ // 获得分类树
+ await getTree()
+}
+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 ProductCategoryApi.CategoryVO
+ if (formType.value === 'create') {
+ await ProductCategoryApi.createCategory(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await ProductCategoryApi.updateCategory(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: '',
+ picUrl: '',
+ status: CommonStatusEnum.ENABLE,
+ description: ''
+ }
+ formRef.value?.resetFields()
+}
+
+/** 获得分类树 */
+const getTree = async () => {
+ const data = await ProductCategoryApi.getCategoryList({})
+ const tree = handleTree(data, 'id', 'parentId')
+ const menu = { id: 0, name: '顶级分类', children: tree }
+ categoryTree.value = [menu]
+}
+</script>
diff --git a/src/views/mall/product/category/index.vue b/src/views/mall/product/category/index.vue
new file mode 100644
index 00000000..f57e35f8
--- /dev/null
+++ b/src/views/mall/product/category/index.vue
@@ -0,0 +1,144 @@
+<template>
+ <!-- 搜索工作栏 -->
+ <ContentWrap>
+ <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"
+ plain
+ @click="openForm('create')"
+ v-hasPermi="['product:category:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list" row-key="id" default-expand-all>
+ <el-table-column label="分类名称" prop="name" sortable />
+ <el-table-column label="分类图片" align="center" prop="picUrl">
+ <template #default="scope">
+ <img v-if="scope.row.picUrl" :src="scope.row.picUrl" alt="分类图片" class="h-100px" />
+ </template>
+ </el-table-column>
+ <el-table-column label="分类排序" align="center" prop="sort" />
+ <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="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['product:category:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['product:category:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <CategoryForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts" name="ProductCategory">
+import { DICT_TYPE } from '@/utils/dict'
+import { handleTree } from '@/utils/tree'
+import { dateFormatter } from '@/utils/formatTime'
+import * as ProductCategoryApi from '@/api/mall/product/category'
+import CategoryForm from './CategoryForm.vue'
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<any[]>([]) // 列表的数据
+const queryParams = reactive({
+ name: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await ProductCategoryApi.getCategoryList(queryParams)
+ list.value = handleTree(data, 'id', 'parentId')
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ 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: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await ProductCategoryApi.deleteCategory(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
+</script>
diff --git a/src/views/mall/product/property/PropertyForm.vue b/src/views/mall/product/property/PropertyForm.vue
new file mode 100644
index 00000000..393d00ef
--- /dev/null
+++ b/src/views/mall/product/property/PropertyForm.vue
@@ -0,0 +1,95 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="名称" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入名称" />
+ </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>
+ <div class="dialog-footer">
+ <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+ <el-button @click="modelVisible = false">取 消</el-button>
+ </div>
+ </template>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import * as PropertyApi from '@/api/mall/product/property'
+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: ''
+})
+const formRules = reactive({
+ name: [{ required: true, message: '名称不能为空', 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 PropertyApi.getProperty(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 as PropertyApi.PropertyVO
+ if (formType.value === 'create') {
+ await PropertyApi.createProperty(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await PropertyApi.updateProperty(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mall/product/property/index.vue b/src/views/mall/product/property/index.vue
new file mode 100644
index 00000000..ea992923
--- /dev/null
+++ b/src/views/mall/product/property/index.vue
@@ -0,0 +1,160 @@
+<template>
+ <!-- 搜索工作栏 -->
+ <ContentWrap>
+ <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 label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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>
+ <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
+ plain
+ type="primary"
+ @click="openForm('create')"
+ v-hasPermi="['product:property:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="编号" align="center" prop="id" />
+ <el-table-column label="名称" align="center" />
+ <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['product:property:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button link type="primary">
+ <router-link :to="'/property/value/' + scope.row.id">属性值</router-link>
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['product:property:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <PropertyForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts" name="Config">
+import { dateFormatter } from '@/utils/formatTime'
+import * as PropertyApi from '@/api/mall/product/property'
+import PropertyForm from './PropertyForm.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: undefined,
+ createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询参数列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await PropertyApi.getPropertyPage(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 formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await PropertyApi.deleteProperty(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
+</script>
diff --git a/src/views/mall/product/property/value/ValueForm.vue b/src/views/mall/product/property/value/ValueForm.vue
new file mode 100644
index 00000000..e113825a
--- /dev/null
+++ b/src/views/mall/product/property/value/ValueForm.vue
@@ -0,0 +1,102 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="属性编号" prop="category">
+ <el-input v-model="formData.propertyId" disabled="" />
+ </el-form-item>
+ <el-form-item label="名称" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入名称" />
+ </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 * as PropertyApi from '@/api/mall/product/property'
+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,
+ propertyId: undefined,
+ name: '',
+ remark: ''
+})
+const formRules = reactive({
+ propertyId: [{ required: true, message: '属性不能为空', trigger: 'blur' }],
+ name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, propertyId: number, id?: number) => {
+ modelVisible.value = true
+ modelTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+ formData.value.propertyId = propertyId
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ formData.value = await PropertyApi.getPropertyValue(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 as PropertyApi.PropertyValueVO
+ if (formType.value === 'create') {
+ await PropertyApi.createPropertyValue(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await PropertyApi.updatePropertyValue(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ propertyId: undefined,
+ name: '',
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mall/product/property/value/index.vue b/src/views/mall/product/property/value/index.vue
new file mode 100644
index 00000000..85383e63
--- /dev/null
+++ b/src/views/mall/product/property/value/index.vue
@@ -0,0 +1,160 @@
+<template>
+ <!-- 搜索工作栏 -->
+ <ContentWrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="属性项" prop="propertyId">
+ <el-select v-model="queryParams.propertyId" class="!w-240px">
+ <el-option
+ v-for="item in propertyOptions"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </el-form-item>
+ <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
+ plain
+ type="primary"
+ @click="openForm('create')"
+ v-hasPermi="['product:property:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="编号" align="center" prop="id" />
+ <el-table-column label="名称" align="center" prop="name" :show-overflow-tooltip="true" />
+ <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['product:property:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['product:property:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <ValueForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts" name="Config">
+import { dateFormatter } from '@/utils/formatTime'
+import * as PropertyApi from '@/api/mall/product/property'
+import ValueForm from './ValueForm.vue'
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { params } = useRoute() // 查询参数
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ propertyId: Number(params.propertyId),
+ name: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const propertyOptions = ref([]) // 属性项的列表
+
+/** 查询参数列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await PropertyApi.getPropertyValuePage(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 formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, queryParams.propertyId, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await PropertyApi.deleteProperty(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(async () => {
+ await getList()
+ // 属性项下拉框数据
+ propertyOptions.value = await PropertyApi.getPropertyList({})
+})
+</script>
diff --git a/src/views/mp/account/AccountForm.vue b/src/views/mp/account/AccountForm.vue
new file mode 100644
index 00000000..406db8fe
--- /dev/null
+++ b/src/views/mp/account/AccountForm.vue
@@ -0,0 +1,157 @@
+<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>
diff --git a/src/views/mp/account/index.vue b/src/views/mp/account/index.vue
index 497f72ec..2629c658 100644
--- a/src/views/mp/account/index.vue
+++ b/src/views/mp/account/index.vue
@@ -1,3 +1,192 @@
<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
+ try {
+ const data = await AccountApi.getAccountPage(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 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>
diff --git a/src/views/mp/components/img.png b/src/views/mp/components/img.png
new file mode 100644
index 00000000..c25a6e76
Binary files /dev/null and b/src/views/mp/components/img.png differ
diff --git a/src/views/mp/components/wx-location/main.vue b/src/views/mp/components/wx-location/main.vue
new file mode 100644
index 00000000..47eab571
--- /dev/null
+++ b/src/views/mp/components/wx-location/main.vue
@@ -0,0 +1,71 @@
+<!--
+ 【微信消息 - 定位】
+-->
+<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>
diff --git a/src/views/mp/components/wx-material-select/main.vue b/src/views/mp/components/wx-material-select/main.vue
new file mode 100644
index 00000000..26b747e2
--- /dev/null
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -0,0 +1,302 @@
+<!--
+ - Copyright (C) 2018-2019
+ - All rights reserved, Designed By www.joolun.com
+ 芋道源码：
+ ① 移除 avue 组件，使用 ElementUI 原生组件
+-->
+<template>
+ <!-- 类型：图片 -->
+ <div v-if="objData.type === 'image'">
+ <div class="waterfall" v-loading="loading">
+ <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+ <img class="material-img" :src="item.url" />
+ <p class="item-name">{{ item.name }}</p>
+ <el-row class="ope-row">
+ <el-button type="success" @click="selectMaterialFun(item)"
+ >选择
+ <i class="el-icon-circle-check el-icon--right"></i>
+ </el-button>
+ </el-row>
+ </div>
+ </div>
+ <!-- 分页组件 -->
+ <pagination
+ v-show="total > 0"
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getMaterialPageFun"
+ />
+ </div>
+ <!-- 类型：语音 -->
+ <div v-else-if="objData.type === 'voice'">
+ <!-- 列表 -->
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="编号" align="center" prop="mediaId" />
+ <el-table-column label="文件名" align="center" prop="name" />
+ <el-table-column label="语音" align="center">
+ <template #default="scope">
+ <wx-voice-player :url="scope.row.url" />
+ </template>
+ </el-table-column>
+ <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+ <template #default="scope">
+ <span>{{ parseTime(scope.row.createTime) }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="操作"
+ align="center"
+ fixed="right"
+ class-name="small-padding fixed-width"
+ >
+ <template #default="scope">
+ <el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
+ >选择
+ </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="getPage"
+ />
+ </div>
+ <div v-else-if="objData.type === 'video'">
+ <!-- 列表 -->
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="编号" align="center" prop="mediaId" />
+ <el-table-column label="文件名" align="center" prop="name" />
+ <el-table-column label="标题" align="center" prop="title" />
+ <el-table-column label="介绍" align="center" prop="introduction" />
+ <el-table-column label="视频" align="center">
+ <template #default="scope">
+ <wx-video-player :url="scope.row.url" />
+ </template>
+ </el-table-column>
+ <el-table-column label="上传时间" align="center" prop="createTime" width="180">
+ <template #default="scope">
+ <span>{{ parseTime(scope.row.createTime) }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="操作"
+ align="center"
+ fixed="right"
+ class-name="small-padding fixed-width"
+ >
+ <template #default="scope">
+ <el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
+ >选择
+ </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="getMaterialPageFun"
+ />
+ </div>
+ <div v-else-if="objData.type === 'news'">
+ <div class="waterfall" v-loading="loading">
+ <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+ <div v-if="item.content && item.content.newsItem">
+ <wx-news :articles="item.content.newsItem" />
+ <el-row class="ope-row">
+ <el-button type="success" @click="selectMaterialFun(item)">
+ 选择<i class="el-icon-circle-check el-icon--right"></i>
+ </el-button>
+ </el-row>
+ </div>
+ </div>
+ </div>
+ <!-- 分页组件 -->
+ <pagination
+ v-show="total > 0"
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getMaterialPageFun"
+ />
+ </div>
+</template>
+
+<script lang="ts" name="WxMaterialSelect">
+import WxNews from '@/views/mp/components/wx-news/main.vue'
+import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
+import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
+import { getMaterialPage } from '@/api/mp/material'
+import { getFreePublishPage } from '@/api/mp/freePublish'
+import { getDraftPage } from '@/api/mp/draft'
+import { dateFormatter, parseTime } from '@/utils/formatTime'
+import { defineComponent, PropType } from 'vue'
+
+export default defineComponent({
+ components: {
+ WxNews,
+ WxVoicePlayer,
+ WxVideoPlayer
+ },
+ props: {
+ objData: {
+ type: Object, // type - 类型；accountId - 公众号账号编号
+ required: true
+ },
+ newsType: {
+ // 图文类型：1、已发布图文；2、草稿箱图文
+ type: String as PropType<string>,
+ default: '1'
+ }
+ },
+ setup(props, ctx) {
+ // 遮罩层
+ const loading = ref(false)
+ // 总条数
+ const total = ref(0)
+ // 数据列表
+ const list = ref([])
+ // 查询参数
+ const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ accountId: props.objData.accountId
+ })
+ const objDataRef = reactive(props.objData)
+ const newsTypeRef = ref(props.newsType)
+
+ const selectMaterialFun = (item) => {
+ ctx.emit('selectMaterial', item)
+ }
+ /** 搜索按钮操作 */
+ const handleQuery = () => {
+ queryParams.pageNo = 1
+ getPage()
+ }
+ const getPage = () => {
+ loading.value = true
+ if (objDataRef.type === 'news' && newsTypeRef.value === '1') {
+ // 【图文】+ 【已发布】
+ getFreePublishPageFun()
+ } else if (objDataRef.type === 'news' && newsTypeRef.value === '2') {
+ // 【图文】+ 【草稿】
+ getDraftPageFun()
+ } else {
+ // 【素材】
+ getMaterialPageFun()
+ }
+ }
+
+ const getMaterialPageFun = async () => {
+ let data = await getMaterialPage({
+ ...queryParams,
+ type: objDataRef.type
+ })
+ list.value = data.list
+ total.value = data.total
+ loading.value = false
+ }
+ const getFreePublishPageFun = async () => {
+ let data = await getFreePublishPage(queryParams)
+ data.list.foreach((item) => {
+ const newsItem = item.content.newsItem
+ newsItem.forEach((article) => {
+ article.picUrl = article.thumbUrl
+ })
+ })
+ list.value = data.list
+ total.value = data.total
+ loading.value = false
+ }
+
+ const getDraftPageFun = async () => {
+ let data = await getDraftPage(queryParams)
+ data.list.forEach((item) => {
+ const newsItem = item.content.newsItem
+ newsItem.forEach((article) => {
+ article.picUrl = article.thumbUrl
+ })
+ })
+ list.value = data.list
+ total.value = data.total
+ loading.value = false
+ }
+
+ onMounted(async () => {
+ getPage()
+ })
+ return {
+ handleQuery,
+ dateFormatter,
+ selectMaterialFun,
+ getMaterialPageFun,
+ getPage,
+ parseTime,
+ newsTypeRef,
+ queryParams,
+ objDataRef,
+ list,
+ total,
+ loading
+ }
+ }
+})
+</script>
+
+<style lang="scss" scoped>
+/*瀑布流样式*/
+.waterfall {
+ width: 100%;
+ column-gap: 10px;
+ column-count: 5;
+ margin: 0 auto;
+}
+
+.waterfall-item {
+ padding: 10px;
+ margin-bottom: 10px;
+ break-inside: avoid;
+ border: 1px solid #eaeaea;
+}
+
+.material-img {
+ width: 100%;
+}
+
+p {
+ line-height: 30px;
+}
+
+@media (min-width: 992px) and (max-width: 1300px) {
+ .waterfall {
+ column-count: 3;
+ }
+ p {
+ color: red;
+ }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+ .waterfall {
+ column-count: 2;
+ }
+ p {
+ color: orange;
+ }
+}
+
+@media (max-width: 767px) {
+ .waterfall {
+ column-count: 1;
+ }
+}
+
+/*瀑布流样式*/
+</style>
diff --git a/src/views/mp/components/wx-msg/card.scss b/src/views/mp/components/wx-msg/card.scss
new file mode 100644
index 00000000..67ac9219
--- /dev/null
+++ b/src/views/mp/components/wx-msg/card.scss
@@ -0,0 +1,101 @@
+.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;
+}
diff --git a/src/views/mp/components/wx-msg/comment.scss b/src/views/mp/components/wx-msg/comment.scss
new file mode 100644
index 00000000..3f1341b2
--- /dev/null
+++ b/src/views/mp/components/wx-msg/comment.scss
@@ -0,0 +1,88 @@
+/* 来自 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;
+ }
+}
diff --git a/src/views/mp/components/wx-msg/main.vue b/src/views/mp/components/wx-msg/main.vue
new file mode 100644
index 00000000..215b4f97
--- /dev/null
+++ b/src/views/mp/components/wx-msg/main.vue
@@ -0,0 +1,335 @@
+<!--
+ - Copyright (C) 2018-2019
+ - All rights reserved, Designed By www.joolun.com
+ 芋道源码：
+ ① 移除暂时用不到的 websocket
+ ② 代码优化，补充注释，提升阅读性
+-->
+<template>
+ <ContentWrap>
+ <div class="msg-div" :id="'msg-div' + nowStr">
+ <!-- 加载更多 -->
+ <div v-loading="loading"></div>
+ <div v-if="!loading">
+ <div class="el-table__empty-block" v-if="loadMore" @click="loadingMore"
+ ><span class="el-table__empty-text">点击加载更多</span></div
+ >
+ <div class="el-table__empty-block" v-if="!loadMore"
+ ><span class="el-table__empty-text">没有更多了</span></div
+ >
+ </div>
+ <!-- 消息列表 -->
+ <div class="execution" v-for="item in list" :key="item.id">
+ <div class="avue-comment" :class="item.sendFrom === 2 ? 'avue-comment--reverse' : ''">
+ <div class="avatar-div">
+ <img
+ :src="item.sendFrom === 1 ? user.avatar : mp.avatar"
+ class="avue-comment__avatar"
+ />
+ <div class="avue-comment__author"
+ >{{ item.sendFrom === 1 ? user.nickname : mp.nickname }}
+ </div>
+ </div>
+ <div class="avue-comment__main">
+ <div class="avue-comment__header">
+ <div class="avue-comment__create_time">{{ parseTime(item.createTime) }}</div>
+ </div>
+ <div
+ class="avue-comment__body"
+ :style="item.sendFrom === 2 ? 'background: #6BED72;' : ''"
+ >
+ <!-- 【事件】区域 -->
+ <div v-if="item.type === 'event' && item.event === 'subscribe'">
+ <el-tag type="success">关注</el-tag>
+ </div>
+ <div v-else-if="item.type === 'event' && item.event === 'unsubscribe'">
+ <el-tag type="danger">取消关注</el-tag>
+ </div>
+ <div v-else-if="item.type === 'event' && item.event === 'CLICK'">
+ <el-tag>点击菜单</el-tag>
+ 【{{ item.eventKey }}】
+ </div>
+ <div v-else-if="item.type === 'event' && item.event === 'VIEW'">
+ <el-tag>点击菜单链接</el-tag>
+ 【{{ item.eventKey }}】
+ </div>
+ <div v-else-if="item.type === 'event' && item.event === 'scancode_waitmsg'">
+ <el-tag>扫码结果</el-tag>
+ 【{{ item.eventKey }}】
+ </div>
+ <div v-else-if="item.type === 'event' && item.event === 'scancode_push'">
+ <el-tag>扫码结果</el-tag>
+ 【{{ item.eventKey }}】
+ </div>
+ <div v-else-if="item.type === 'event' && item.event === 'pic_sysphoto'">
+ <el-tag>系统拍照发图</el-tag>
+ </div>
+ <div v-else-if="item.type === 'event' && item.event === 'pic_photo_or_album'">
+ <el-tag>拍照或者相册</el-tag>
+ </div>
+ <div v-else-if="item.type === 'event' && item.event === 'pic_weixin'">
+ <el-tag>微信相册</el-tag>
+ </div>
+ <div v-else-if="item.type === 'event' && item.event === 'location_select'">
+ <el-tag>选择地理位置</el-tag>
+ </div>
+ <div v-else-if="item.type === 'event'">
+ <el-tag type="danger">未知事件类型</el-tag>
+ </div>
+ <!-- 【消息】区域 -->
+ <div v-else-if="item.type === 'text'">{{ item.content }}</div>
+ <div v-else-if="item.type === 'voice'">
+ <wx-voice-player :url="item.mediaUrl" :content="item.recognition" />
+ </div>
+ <div v-else-if="item.type === 'image'">
+ <a target="_blank" :href="item.mediaUrl">
+ <img :src="item.mediaUrl" style="width: 100px" />
+ </a>
+ </div>
+ <div
+ v-else-if="item.type === 'video' || item.type === 'shortvideo'"
+ style="text-align: center"
+ >
+ <wx-video-player :url="item.mediaUrl" />
+ </div>
+ <div v-else-if="item.type === 'link'" class="avue-card__detail">
+ <el-link type="success" :underline="false" target="_blank" :href="item.url">
+ <div class="avue-card__title"><i class="el-icon-link"></i>{{ item.title }}</div>
+ </el-link>
+ <div class="avue-card__info" style="height: unset">{{ item.description }}</div>
+ </div>
+ <!-- TODO 芋艿：待完善 -->
+ <div v-else-if="item.type === 'location'">
+ <wx-location
+ :label="item.label"
+ :location-y="item.locationY"
+ :location-x="item.locationX"
+ />
+ </div>
+ <div v-else-if="item.type === 'news'" style="width: 300px">
+ <!-- TODO 芋艿：待测试；详情页也存在类似的情况 -->
+ <wx-news :articles="item.articles" />
+ </div>
+ <div v-else-if="item.type === 'music'">
+ <wx-music
+ :title="item.title"
+ :description="item.description"
+ :thumb-media-url="item.thumbMediaUrl"
+ :music-url="item.musicUrl"
+ :hq-music-url="item.hqMusicUrl"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="msg-send" v-loading="sendLoading">
+ <wx-reply-select ref="replySelect" :objData="objData" />
+ <el-button type="success" size="small" class="send-but" @click="sendMsg">发送(S)</el-button>
+ </div>
+ </ContentWrap>
+</template>
+
+<script lang="ts" name="WxMsg">
+import { getMessagePage, sendMessage } from '@/api/mp/message'
+import WxReplySelect from '@/views/mp/components/wx-reply/main.vue'
+import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
+import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
+import WxNews from '@/views/mp/components/wx-news/main.vue'
+import WxLocation from '@/views/mp/components/wx-location/main.vue'
+import WxMusic from '@/views/mp/components/wx-music/main.vue'
+import { getUser } from '@/api/mp/mpuser'
+import { defineComponent } from 'vue'
+
+const message = useMessage() // 消息弹窗
+import profile from '@/assets/imgs/profile.jpg'
+import wechat from '@/assets/imgs/wechat.png'
+import { parseTime } from '@/utils/formatTime'
+
+export default defineComponent({
+ components: {
+ WxReplySelect,
+ WxVideoPlayer,
+ WxVoicePlayer,
+ WxNews,
+ WxLocation,
+ WxMusic
+ },
+ props: {
+ userId: {
+ type: Number,
+ required: true
+ }
+ },
+ setup(props) {
+ const nowStr = ref(new Date().getTime()) // 当前的时间戳，用于每次消息加载后，回到原位置；具体见 :id="'msg-div' + nowStr" 处
+ const loading = ref(false) // 消息列表是否正在加载中
+ const loadMore = ref(true) // 是否可以加载更多
+ const list = ref<any[]>([]) // 消息列表
+ const queryParams = reactive({
+ pageNo: 1, // 当前页数
+ pageSize: 14, // 每页显示多少条
+ accountId: undefined
+ })
+ const user = reactive({
+ // 由于微信不再提供昵称，直接使用“用户”展示
+ nickname: '用户',
+ avatar: profile,
+ accountId: 0 // 公众号账号编号
+ })
+ const mp = reactive({
+ nickname: '公众号',
+ avatar: wechat
+ })
+
+ // ========= 消息发送 =========
+ const sendLoading = ref(false) // 发送消息是否加载中
+ const objData = reactive({
+ // 微信发送消息
+ type: 'text',
+ accountId: null,
+ articles: []
+ })
+
+ const replySelect = ref(null)
+ // 执行发送
+ const sendMsg = async () => {
+ if (!objData) {
+ return
+ }
+ // // 公众号限制：客服消息，公众号只允许发送一条
+ if (objData.type === 'news' && objData.articles.length > 1) {
+ objData.articles = [objData.articles[0]]
+ message.success('图文消息条数限制在 1 条以内，已默认发送第一条')
+ }
+ let data = await sendMessage(Object.assign({ userId: props.userId }, { ...objData }))
+ sendLoading.value = false
+ list.value = [...list.value, ...[data]]
+ scrollToBottom()
+ //ts檢查的時候會判斷這個組件可能是空的，所以需要進行斷言。
+ //避免 tab 的数据未清理
+ const deleteObj = (replySelect.value as any).deleteObj
+ if (deleteObj) {
+ deleteObj()
+ }
+ }
+ const loadingMore = () => {
+ queryParams.pageNo++
+ getPage(queryParams, null)
+ }
+ const getPage = async (page, params) => {
+ loading.value = true
+ let dataTemp = await getMessagePage(
+ Object.assign(
+ {
+ pageNo: page.pageNo,
+ pageSize: page.pageSize,
+ userId: props.userId,
+ accountId: page.accountId
+ },
+ params
+ )
+ )
+ const msgDiv = document.getElementById('msg-div' + nowStr.value)
+ let scrollHeight = 0
+ if (msgDiv) {
+ scrollHeight = msgDiv.scrollHeight
+ }
+ // 处理数据
+ let data = dataTemp.list.reverse()
+ list.value = [...data, ...list.value]
+ loading.value = false
+ if (data.length < queryParams.pageSize || data.length === 0) {
+ loadMore.value = false
+ }
+ queryParams.pageNo = page.pageNo
+ queryParams.pageSize = page.pageSize
+ // 滚动到原来的位置
+ if (queryParams.pageNo === 1) {
+ // 定位到消息底部
+ scrollToBottom()
+ } else if (data.length !== 0) {
+ // 定位滚动条
+ await nextTick(() => {
+ if (scrollHeight !== 0) {
+ let div = document.getElementById('msg-div' + nowStr.value)
+ if (div && msgDiv) {
+ msgDiv.scrollTop = div.scrollHeight - scrollHeight - 100
+ }
+ }
+ })
+ }
+ }
+ const refreshChange = () => {
+ getPage(queryParams, null)
+ }
+ /** 定位到消息底部 */
+ const scrollToBottom = () => {
+ nextTick(() => {
+ let div = document.getElementById('msg-div' + nowStr.value)
+ if (div) {
+ div.scrollTop = div.scrollHeight
+ }
+ })
+ }
+
+ onMounted(async () => {
+ let data = await getUser(props.userId)
+ user.nickname = data.nickname && data.nickname.length > 0 ? data.nickname : user.nickname
+ user.avatar = data.avatar && user.avatar.length > 0 ? data.avatar : user.avatar
+ user.accountId = data.accountId
+ queryParams.accountId = data.accountId
+ objData.accountId = data.accountId
+ refreshChange()
+ })
+ return {
+ sendMsg,
+ loadingMore,
+ parseTime,
+ scrollToBottom,
+ objData,
+ mp,
+ user,
+ queryParams,
+ list,
+ loadMore,
+ loading,
+ nowStr,
+ sendLoading
+ }
+ }
+})
+</script>
+<style lang="scss" scoped>
+/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc */
+@import './comment.scss';
+@import './card.scss';
+
+.msg-main {
+ margin-top: -30px;
+ padding: 10px;
+}
+
+.msg-div {
+ height: 50vh;
+ overflow: auto;
+ background-color: #eaeaea;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+.msg-send {
+ padding: 10px;
+}
+
+.avatar-div {
+ text-align: center;
+ width: 80px;
+}
+
+.send-but {
+ float: right;
+ margin-top: 8px !important;
+}
+</style>
diff --git a/src/views/mp/components/wx-music/main.vue b/src/views/mp/components/wx-music/main.vue
new file mode 100644
index 00000000..52555f15
--- /dev/null
+++ b/src/views/mp/components/wx-music/main.vue
@@ -0,0 +1,60 @@
+<!--
+ 【微信消息 - 音乐】
+-->
+<template>
+ <div>
+ <el-link
+ type="success"
+ :underline="false"
+ target="_blank"
+ :href="hqMusicUrl ? hqMusicUrl : musicUrl"
+ >
+ <div
+ class="avue-card__body"
+ style="padding: 10px; background-color: #fff; border-radius: 5px"
+ >
+ <div class="avue-card__avatar">
+ <img :src="thumbMediaUrl" alt="" />
+ </div>
+ <div class="avue-card__detail">
+ <div class="avue-card__title" style="margin-bottom: unset">{{ title }}</div>
+ <div class="avue-card__info" style="height: unset">{{ description }}</div>
+ </div>
+ </div>
+ </el-link>
+ </div>
+</template>
+
+<script setup lang="ts" name="WxMusic">
+const props = defineProps({
+ title: {
+ required: false,
+ type: String
+ },
+ description: {
+ required: false,
+ type: String
+ },
+ musicUrl: {
+ required: false,
+ type: String
+ },
+ hqMusicUrl: {
+ required: false,
+ type: String
+ },
+ thumbMediaUrl: {
+ required: true,
+ type: String
+ }
+})
+
+defineExpose({
+ musicUrl: props.musicUrl
+})
+</script>
+
+<style lang="scss" scoped>
+/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scc */
+@import '../wx-msg/card.scss';
+</style>
diff --git a/src/views/mp/components/wx-news/main.vue b/src/views/mp/components/wx-news/main.vue
new file mode 100644
index 00000000..d08e2813
--- /dev/null
+++ b/src/views/mp/components/wx-news/main.vue
@@ -0,0 +1,107 @@
+<!--
+ - Copyright (C) 2018-2019
+ - All rights reserved, Designed By www.joolun.com
+ 【微信消息 - 图文】
+ 芋道源码：
+ ① 代码优化，补充注释，提升阅读性
+-->
+<template>
+ <div class="news-home">
+ <div v-for="(article, index) in articles" :key="index" class="news-div">
+ <!-- 头条 -->
+ <a target="_blank" :href="article.url" v-if="index === 0">
+ <div class="news-main">
+ <div class="news-content">
+ <el-image
+ class="material-img"
+ style="width: 100%; height: 120px"
+ :src="article.picUrl"
+ />
+ <div class="news-content-title">
+ <span>{{ article.title }}</span>
+ </div>
+ </div>
+ </div>
+ </a>
+ <!-- 二条/三条等等 -->
+ <a target="_blank" :href="article.url" v-else>
+ <div class="news-main-item">
+ <div class="news-content-item">
+ <div class="news-content-item-title">{{ article.title }}</div>
+ <div class="news-content-item-img">
+ <img class="material-img" :src="article.picUrl" height="100%" />
+ </div>
+ </div>
+ </div>
+ </a>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+ articles: {
+ type: Array,
+ default: () => null
+ }
+})
+
+defineExpose({
+ articles: props.articles
+})
+</script>
+
+<style lang="scss" scoped>
+.news-home {
+ background-color: #ffffff;
+ width: 100%;
+ margin: auto;
+}
+.news-main {
+ width: 100%;
+ margin: auto;
+}
+.news-content {
+ background-color: #acadae;
+ width: 100%;
+ position: relative;
+}
+.news-content-title {
+ display: inline-block;
+ font-size: 12px;
+ color: #ffffff;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ background-color: black;
+ width: 98%;
+ padding: 1%;
+ opacity: 0.65;
+ white-space: normal;
+ box-sizing: unset !important;
+}
+.news-main-item {
+ background-color: #ffffff;
+ padding: 5px 0;
+ border-top: 1px solid #eaeaea;
+}
+.news-content-item {
+ position: relative;
+}
+.news-content-item-title {
+ display: inline-block;
+ font-size: 10px;
+ width: 70%;
+ margin-left: 1%;
+ white-space: normal;
+}
+.news-content-item-img {
+ display: inline-block;
+ width: 25%;
+ background-color: #acadae;
+ margin-right: 1%;
+}
+.material-img {
+ width: 100%;
+}
+</style>
diff --git a/src/views/mp/components/wx-reply/main.vue b/src/views/mp/components/wx-reply/main.vue
new file mode 100644
index 00000000..a31e9462
--- /dev/null
+++ b/src/views/mp/components/wx-reply/main.vue
@@ -0,0 +1,717 @@
+<!--
+ - Copyright (C) 2018-2019
+ - All rights reserved, Designed By www.joolun.com
+ 芋道源码：
+ ① 移除多余的 rep 为前缀的变量，让 message 消息更简单
+ ② 代码优化，补充注释，提升阅读性
+ ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
+ ④ 支持发送【视频】消息时，支持新建视频
+-->
+<template>
+ <el-tabs type="border-card" v-model="objDataRef.type" @tab-click="handleClick">
+ <!-- 类型 1：文本 -->
+ <el-tab-pane name="text">
+ <template #label>
+ <el-row align="middle">
+ <icon icon="ep:document" />
+ 文本
+ </el-row>
+ </template>
+ <el-input
+ type="textarea"
+ :rows="5"
+ placeholder="请输入内容"
+ v-model="objDataRef.content"
+ @input="inputContent"
+ />
+ </el-tab-pane>
+ <!-- 类型 2：图片 -->
+ <el-tab-pane name="image">
+ <template #label>
+ <el-row align="middle">
+ <icon icon="ep:picture" class="mr-5px" />
+ 图片
+ </el-row>
+ </template>
+ <!-- 情况一：已经选择好素材、或者上传好图片 -->
+ <div class="select-item" v-if="objDataRef.url">
+ <img class="material-img" :src="objDataRef.url" />
+ <p class="item-name" v-if="objDataRef.name">{{ objDataRef.name }}</p>
+ <el-row class="ope-row">
+ <el-button type="danger" circle @click="deleteObj">
+ <icon icon="ep:delete" />
+ </el-button>
+ </el-row>
+ </div>
+ <!-- 情况二：未做完上述操作 -->
+ <el-row v-else style="text-align: center" align="middle">
+ <!-- 选择素材 -->
+ <el-col :span="12" class="col-select">
+ <el-button type="success" @click="openMaterial">
+ 素材库选择
+ <icon icon="ep:circle-check" />
+ </el-button>
+ <el-dialog title="选择图片" v-model="dialogImageVisible" width="90%" append-to-body>
+ <wx-material-select :obj-data="objDataRef" @selectMaterial="selectMaterial" />
+ </el-dialog>
+ </el-col>
+ <!-- 文件上传 -->
+ <el-col :span="12" class="col-add">
+ <el-upload
+ :action="actionUrl"
+ :headers="headers"
+ multiple
+ :limit="1"
+ :file-list="fileList"
+ :data="uploadData"
+ :before-upload="beforeImageUpload"
+ :on-success="handleUploadSuccess"
+ >
+ <el-button type="primary">上传图片</el-button>
+ <template #tip>
+ <span>
+ <div class="el-upload__tip"
+ >支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div
+ ></span
+ >
+ </template>
+ </el-upload>
+ </el-col>
+ </el-row>
+ </el-tab-pane>
+ <!-- 类型 3：语音 -->
+ <el-tab-pane name="voice">
+ <template #label>
+ <el-row align="middle">
+ <icon icon="ep:phone" />
+ 语音
+ </el-row>
+ </template>
+
+ <div class="select-item2" v-if="objDataRef.url">
+ <p class="item-name">{{ objDataRef.name }}</p>
+ <div class="item-infos">
+ <wx-voice-player :url="objDataRef.url" />
+ </div>
+ <el-row class="ope-row">
+ <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
+ </el-row>
+ </div>
+ <el-row v-else style="text-align: center">
+ <!-- 选择素材 -->
+ <el-col :span="12" class="col-select">
+ <el-button type="success" @click="openMaterial">
+ 素材库选择<i class="el-icon-circle-check el-icon--right"></i>
+ </el-button>
+ <el-dialog title="选择语音" v-model="dialogVoiceVisible" width="90%" append-to-body>
+ <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />
+ </el-dialog>
+ </el-col>
+ <!-- 文件上传 -->
+ <el-col :span="12" class="col-add">
+ <el-upload
+ :action="actionUrl"
+ :headers="headers"
+ multiple
+ :limit="1"
+ :file-list="fileList"
+ :data="uploadData"
+ :before-upload="beforeVoiceUpload"
+ :on-success="handleUploadSuccess"
+ >
+ <el-button type="primary">点击上传</el-button>
+ <template #tip>
+ <div class="el-upload__tip"
+ >格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
+ </div>
+ </template>
+ </el-upload>
+ </el-col>
+ </el-row>
+ </el-tab-pane>
+ <!-- 类型 4：视频 -->
+ <el-tab-pane name="video">
+ <template #label>
+ <el-row align="middle">
+ <icon icon="ep:share" />
+ 视频
+ </el-row>
+ </template>
+ <el-row>
+ <el-input
+ v-model="objDataRef.title"
+ class="input-margin-bottom"
+ placeholder="请输入标题"
+ @input="inputContent"
+ />
+ <el-input
+ class="input-margin-bottom"
+ v-model="objDataRef.description"
+ placeholder="请输入描述"
+ @input="inputContent"
+ />
+ <div style="text-align: center">
+ <wx-video-player v-if="objDataRef.url" :url="objDataRef.url" />
+ </div>
+ <el-col>
+ <el-row style="text-align: center" align="middle">
+ <!-- 选择素材 -->
+ <el-col :span="12">
+ <el-button type="success" @click="openMaterial">
+ 素材库选择
+ <icon icon="ep:circle-check" />
+ </el-button>
+ <el-dialog title="选择视频" v-model="dialogVideoVisible" width="90%" append-to-body>
+ <wx-material-select :objData="objDataRef" @selectMaterial="selectMaterial" />
+ </el-dialog>
+ </el-col>
+ <!-- 文件上传 -->
+ <el-col :span="12">
+ <el-upload
+ :action="actionUrl"
+ :headers="headers"
+ multiple
+ :limit="1"
+ :file-list="fileList"
+ :data="uploadData"
+ :before-upload="beforeVideoUpload"
+ :on-success="handleUploadSuccess"
+ >
+ <el-button type="primary"
+ >新建视频
+ <icon icon="ep:upload" />
+ </el-button>
+ </el-upload>
+ </el-col>
+ </el-row>
+ </el-col>
+ </el-row>
+ </el-tab-pane>
+ <!-- 类型 5：图文 -->
+ <el-tab-pane name="news">
+ <template #label>
+ <el-row align="middle">
+ <icon icon="ep:reading" />
+ 图文
+ </el-row>
+ </template>
+ <el-row>
+ <div class="select-item" v-if="objDataRef.articles.size > 0">
+ <wx-news :articles="objDataRef.articles" />
+ <el-col class="ope-row">
+ <el-button type="danger" circle @click="deleteObj">
+ <icon icon="ep:delete" />
+ </el-button>
+ </el-col>
+ </div>
+ <!-- 选择素材 -->
+ <el-col :span="24" v-if="!objDataRef.content">
+ <el-row style="text-align: center" align="middle">
+ <el-col :span="24">
+ <el-button type="success" @click="openMaterial"
+ >{{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文' }}
+ <icon icon="ep:circle-check" />
+ </el-button>
+ </el-col>
+ </el-row>
+ </el-col>
+ <el-dialog title="选择图文" v-model="dialogNewsVisible" width="90%" append-to-body>
+ <wx-material-select
+ :objData="objDataRef"
+ @selectMaterial="selectMaterial"
+ :newsType="newsType"
+ />
+ </el-dialog>
+ </el-row>
+ </el-tab-pane>
+ <!-- 类型 6：音乐 -->
+ <el-tab-pane name="music">
+ <template #label>
+ <el-row align="middle">
+ <icon icon="ep:service" />
+ 音乐
+ </el-row>
+ </template>
+ <el-row align="middle" justify="center">
+ <el-col :span="6">
+ <el-row align="middle" justify="center" class="thumb-div">
+ <el-col :span="24">
+ <el-row align="middle" justify="center">
+ <img
+ style="width: 100px"
+ v-if="objDataRef.thumbMediaUrl"
+ :src="objDataRef.thumbMediaUrl"
+ />
+ <icon v-else icon="ep:plus" />
+ </el-row>
+ <el-row align="middle" justify="center" style="margin-top: 2%">
+ <div class="thumb-but">
+ <el-upload
+ :action="actionUrl"
+ :headers="headers"
+ multiple
+ :limit="1"
+ :file-list="fileList"
+ :data="uploadData"
+ :before-upload="beforeThumbImageUpload"
+ :on-success="handleUploadSuccess"
+ >
+ <template #trigger>
+ <el-button type="text">本地上传</el-button>
+ </template>
+ <el-button type="text" @click="openMaterial" style="margin-left: 5px"
+ >素材库选择
+ </el-button>
+ </el-upload>
+ </div>
+ </el-row>
+ </el-col>
+ </el-row>
+ <el-dialog title="选择图片" v-model="dialogThumbVisible" width="80%" append-to-body>
+ <wx-material-select
+ :objData="{ type: 'image', accountId: objDataRef.accountId }"
+ @selectMaterial="selectMaterial"
+ />
+ </el-dialog>
+ </el-col>
+ <el-col :span="18">
+ <el-input v-model="objDataRef.title" placeholder="请输入标题" @input="inputContent" />
+ <div style="margin: 20px 0"></div>
+ <el-input
+ v-model="objDataRef.description"
+ placeholder="请输入描述"
+ @input="inputContent"
+ />
+ </el-col>
+ </el-row>
+ <div style="margin: 20px 0"></div>
+ <el-input v-model="objDataRef.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />
+ <div style="margin: 20px 0"></div>
+ <el-input
+ v-model="objDataRef.hqMusicUrl"
+ placeholder="请输入高质量音乐链接"
+ @input="inputContent"
+ />
+ </el-tab-pane>
+ </el-tabs>
+</template>
+
+<script lang="ts" name="WxReplySelect">
+import WxNews from '@/views/mp/components/wx-news/main.vue'
+import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
+import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
+import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
+
+import { getAccessToken } from '@/utils/auth'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+ components: {
+ WxNews,
+ WxMaterialSelect,
+ WxVoicePlayer,
+ WxVideoPlayer
+ },
+ props: {
+ objData: {
+ // 消息对象。
+ type: Object, // 设置为 Object 的原因，方便属性的传递
+ required: true
+ },
+ newsType: {
+ // 图文类型：1、已发布图文；2、草稿箱图文
+ type: String,
+ default: '1'
+ }
+ },
+ setup(props) {
+ const objDataRef = reactive(props.objData)
+ const message = useMessage() // 消息弹窗
+ const tempObj = new Map().set(objDataRef.type, Object.assign({}, objDataRef))
+ // ========== 素材选择的弹窗，是否可见 ==========
+ const dialogNewsVisible = ref(false) // 图文
+ const dialogImageVisible = ref(false) // 图片
+ const dialogVoiceVisible = ref(false) // 语音
+ const dialogVideoVisible = ref(false) // 视频
+ const dialogThumbVisible = ref(false) // 缩略图
+ // ========== 文件上传（图片、语音、视频） ==========
+ const fileList = ref([])
+ const uploadData = reactive({
+ accountId: undefined,
+ type: objDataRef.type,
+ title: '',
+ introduction: ''
+ })
+ const actionUrl = ref(
+ import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
+ )
+ const headers = ref({ Authorization: 'Bearer ' + getAccessToken() }) // 设置上传的请求头部
+ const beforeThumbImageUpload = (file) => {
+ const isType =
+ file.type === 'image/jpeg' ||
+ file.type === 'image/png' ||
+ file.type === 'image/gif' ||
+ file.type === 'image/bmp' ||
+ file.type === 'image/jpg'
+ if (!isType) {
+ message.error('上传图片格式不对!')
+ return false
+ }
+ const isLt = file.size / 1024 / 1024 < 2
+ if (!isLt) {
+ message.error('上传图片大小不能超过 2M!')
+ return false
+ }
+ uploadData.accountId = objDataRef.accountId
+ return true
+ }
+ const beforeVoiceUpload = (file) => {
+ // 校验格式
+ const isType =
+ file.type === 'audio/mp3' ||
+ file.type === 'audio/mpeg' ||
+ file.type === 'audio/wma' ||
+ file.type === 'audio/wav' ||
+ file.type === 'audio/amr'
+ if (!isType) {
+ message.error('上传语音格式不对!' + file.type)
+ return false
+ }
+ // 校验大小
+ const isLt = file.size / 1024 / 1024 < 2
+ if (!isLt) {
+ message.error('上传语音大小不能超过 2M!')
+ return false
+ }
+ uploadData.accountId = objDataRef.accountId
+ return true
+ }
+ const beforeImageUpload = (file) => {
+ // 校验格式
+ const isType =
+ file.type === 'image/jpeg' ||
+ file.type === 'image/png' ||
+ file.type === 'image/gif' ||
+ file.type === 'image/bmp' ||
+ file.type === 'image/jpg'
+ if (!isType) {
+ message.error('上传图片格式不对!')
+ return false
+ }
+ // 校验大小
+ const isLt = file.size / 1024 / 1024 < 2
+ if (!isLt) {
+ message.error('上传图片大小不能超过 2M!')
+ return false
+ }
+ uploadData.accountId = objDataRef.accountId
+ return true
+ }
+ const beforeVideoUpload = (file) => {
+ // 校验格式
+ const isType = file.type === 'video/mp4'
+ if (!isType) {
+ message.error('上传视频格式不对!')
+ return false
+ }
+ // 校验大小
+ const isLt = file.size / 1024 / 1024 < 10
+ if (!isLt) {
+ message.error('上传视频大小不能超过 10M!')
+ return false
+ }
+ uploadData.accountId = objDataRef.accountId
+ return true
+ }
+ const handleUploadSuccess = (response) => {
+ if (response.code !== 0) {
+ message.error('上传出错：' + response.msg)
+ return false
+ }
+
+ // 清空上传时的各种数据
+ fileList.value = []
+ uploadData.title = ''
+ uploadData.introduction = ''
+
+ // 上传好的文件，本质是个素材，所以可以进行选中
+ let item = response.data
+ selectMaterial(item)
+ }
+ /**
+ * 切换消息类型的 tab
+ *
+ * @param tab tab 没用 暂时删了tab
+ */
+ const handleClick = () => {
+ // 设置后续文件上传的文件类型
+ uploadData.type = objDataRef.type
+ if (uploadData.type === 'music') {
+ // 【音乐】上传的是缩略图
+ uploadData.type = 'thumb'
+ }
+
+ // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objDataRef
+ let tempObjItem = tempObj.get(objDataRef.type)
+ if (tempObjItem) {
+ objDataRef.content = tempObjItem.content ? tempObjItem.content : null
+ objDataRef.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
+ objDataRef.url = tempObjItem.url ? tempObjItem.url : null
+ objDataRef.name = tempObjItem.url ? tempObjItem.name : null
+ objDataRef.title = tempObjItem.title ? tempObjItem.title : null
+ objDataRef.description = tempObjItem.description ? tempObjItem.description : null
+ return
+ }
+ // 如果获取不到，需要把 objDataRef 复原
+ // 必须使用 $set 赋值，不然 input 无法输入内容
+ objDataRef.content = ''
+ objDataRef.mediaId = ''
+ objDataRef.url = ''
+ objDataRef.title = ''
+ objDataRef.description = ''
+ }
+ /**
+ * 选择素材，将设置设置到 objDataRef 变量
+ *
+ * @param item 素材
+ */
+ const selectMaterial = (item) => {
+ // 选择好素材，所以隐藏弹窗
+ closeMaterial()
+
+ // 创建 tempObjItem 对象，并设置对应的值
+ let tempObjItem = {
+ type: '',
+ articles: '',
+ thumbMediaId: '',
+ thumbMediaUrl: '',
+ introduction: '',
+ title: '',
+ musicUrl: '',
+ hqMusicUrl: '',
+ mediaId: '',
+ url: '',
+ name: '',
+ description: ''
+ }
+ tempObjItem.type = objDataRef.type
+ if (objDataRef.type === 'news') {
+ tempObjItem.articles = item.content.newsItem
+ objDataRef.articles = item.content.newsItem
+ } else if (objDataRef.type === 'music') {
+ // 音乐需要特殊处理，因为选择的是图片的缩略图
+ tempObjItem.thumbMediaId = item.mediaId
+ objDataRef.thumbMediaId = item.mediaId
+ tempObjItem.thumbMediaUrl = item.url
+ objDataRef.thumbMediaUrl = item.url
+ // title、introduction、musicUrl、hqMusicUrl：从 objDataRef 到 tempObjItem，避免上传素材后，被覆盖掉
+ tempObjItem.title = objDataRef.title || ''
+ tempObjItem.introduction = objDataRef.introduction || ''
+ tempObjItem.musicUrl = objDataRef.musicUrl || ''
+ tempObjItem.hqMusicUrl = objDataRef.hqMusicUrl || ''
+ } else if (objDataRef.type === 'image' || objDataRef.type === 'voice') {
+ tempObjItem.mediaId = item.mediaId
+ objDataRef.mediaId = item.mediaId
+ tempObjItem.url = item.url
+ objDataRef.url = item.url
+ tempObjItem.name = item.name
+ objDataRef.name = item.name
+ } else if (objDataRef.type === 'video') {
+ tempObjItem.mediaId = item.mediaId
+ objDataRef.mediaId = item.mediaId
+ tempObjItem.url = item.url
+ objDataRef.url = item.url
+ tempObjItem.name = item.name
+ objDataRef.name = item.name
+ // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
+ if (item.title) {
+ objDataRef.title = item.title || ''
+ tempObjItem.title = item.title || ''
+ }
+ if (item.introduction) {
+ objDataRef.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
+ tempObjItem.description = item.introduction || ''
+ }
+ } else if (objDataRef.type === 'text') {
+ objDataRef.content = item.content || ''
+ }
+ // 最终设置到临时缓存
+ tempObj.set(objDataRef.type, tempObjItem)
+ }
+ const openMaterial = () => {
+ if (objDataRef.type === 'news') {
+ dialogNewsVisible.value = true
+ } else if (objDataRef.type === 'image') {
+ dialogImageVisible.value = true
+ } else if (objDataRef.type === 'voice') {
+ dialogVoiceVisible.value = true
+ } else if (objDataRef.type === 'video') {
+ dialogVideoVisible.value = true
+ } else if (objDataRef.type === 'music') {
+ dialogThumbVisible.value = true
+ }
+ }
+ const closeMaterial = () => {
+ dialogNewsVisible.value = false
+ dialogImageVisible.value = false
+ dialogVoiceVisible.value = false
+ dialogVideoVisible.value = false
+ dialogThumbVisible.value = false
+ }
+ const deleteObj = () => {
+ if (objDataRef.type === 'news') {
+ objDataRef.articles = ''
+ } else if (objDataRef.type === 'image') {
+ objDataRef.mediaId = null
+ objDataRef.url = null
+ objDataRef.name = null
+ } else if (objDataRef.type === 'voice') {
+ objDataRef.mediaId = null
+ objDataRef.url = null
+ objDataRef.name = null
+ } else if (objDataRef.type === 'video') {
+ objDataRef.mediaId = null
+ objDataRef.url = null
+ objDataRef.name = null
+ objDataRef.title = null
+ objDataRef.description = null
+ } else if (objDataRef.type === 'music') {
+ objDataRef.thumbMediaId = null
+ objDataRef.thumbMediaUrl = null
+ objDataRef.title = null
+ objDataRef.description = null
+ objDataRef.musicUrl = null
+ objDataRef.hqMusicUrl = null
+ } else if (objDataRef.type === 'text') {
+ objDataRef.content = null
+ }
+ // 覆盖缓存
+ tempObj.set(objDataRef.type, Object.assign({}, objDataRef))
+ }
+ /**
+ * 输入时，缓存每次 objDataRef 到 tempObj 中
+ *
+ * why？不确定为什么 v-model="objDataRef.content" 不能自动缓存，所以通过这样的方式
+ */
+ const inputContent = () => {
+ // 覆盖缓存
+ tempObj.set(objDataRef.type, Object.assign({}, objDataRef))
+ }
+ return {
+ inputContent,
+ dialogNewsVisible,
+ deleteObj,
+ openMaterial,
+ handleClick,
+ beforeImageUpload,
+ beforeVoiceUpload,
+ handleUploadSuccess,
+ beforeVideoUpload,
+ selectMaterial,
+ dialogImageVisible,
+ dialogVoiceVisible,
+ dialogThumbVisible,
+ actionUrl,
+ objDataRef,
+ headers,
+ fileList,
+ beforeThumbImageUpload,
+ uploadData,
+ dialogVideoVisible
+ }
+ }
+})
+</script>
+
+<style lang="scss" scoped>
+.public-account-management {
+ .el-input {
+ width: 70%;
+ margin-right: 2%;
+ }
+}
+
+.pagination {
+ text-align: right;
+ margin-right: 25px;
+}
+
+.select-item {
+ width: 280px;
+ padding: 10px;
+ margin: 0 auto 10px auto;
+ border: 1px solid #eaeaea;
+}
+
+.select-item2 {
+ padding: 10px;
+ margin: 0 auto 10px auto;
+ border: 1px solid #eaeaea;
+}
+
+.ope-row {
+ padding-top: 10px;
+ text-align: center;
+}
+
+.input-margin-bottom {
+ margin-bottom: 2%;
+}
+
+.item-name {
+ font-size: 12px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-align: center;
+}
+
+.el-form-item__content {
+ line-height: unset !important;
+}
+
+.col-select {
+ border: 1px solid rgb(234, 234, 234);
+ padding: 50px 0px;
+ height: 160px;
+ width: 49.5%;
+}
+
+.col-select2 {
+ border: 1px solid rgb(234, 234, 234);
+ padding: 50px 0px;
+ height: 160px;
+}
+
+.col-add {
+ border: 1px solid rgb(234, 234, 234);
+ padding: 50px 0px;
+ height: 160px;
+ width: 49.5%;
+ float: right;
+}
+
+.avatar-uploader-icon {
+ border: 1px solid #d9d9d9;
+ font-size: 28px;
+ color: #8c939d;
+ width: 100px !important;
+ height: 100px !important;
+ line-height: 100px !important;
+ text-align: center;
+}
+
+.material-img {
+ width: 100%;
+}
+
+.thumb-div {
+ display: inline-block;
+ text-align: center;
+}
+
+.item-infos {
+ width: 30%;
+ margin: auto;
+}
+</style>
diff --git a/src/views/mp/components/wx-video-play/main.vue b/src/views/mp/components/wx-video-play/main.vue
new file mode 100644
index 00000000..7dc4347c
--- /dev/null
+++ b/src/views/mp/components/wx-video-play/main.vue
@@ -0,0 +1,85 @@
+<!--
+ - Copyright (C) 2018-2019
+ - All rights reserved, Designed By www.joolun.com
+ 【微信消息 - 视频】
+ 芋道源码：
+ ① bug 修复：
+ 1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
+ 存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
+ 2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
+ ② 体验优化：弹窗关闭后，自动暂停视频的播放
+
+-->
+<template>
+ <div @click="playVideo()">
+ <!-- 提示 -->
+ <div>
+ <Icon icon="ep:video-play" class="mr-5px" />
+ <p>点击播放视频</p>
+ </div>
+
+ <!-- 弹窗播放 -->
+ <el-dialog v-model="dialogVideo" title="视频播放" width="40%" append-to-body>
+ <template #footer>
+ <video-player
+ v-if="dialogVideo"
+ class="video-player vjs-big-play-centered"
+ :src="url"
+ poster=""
+ crossorigin="anonymous"
+ playsinline
+ controls
+ :volume="0.6"
+ :height="320"
+ :playback-rates="[0.7, 1.0, 1.5, 2.0]"
+ />
+ </template>
+ <!-- 事件，暫時沒用
+ @mounted="handleMounted"-->
+ <!-- @ready="handleEvent($event)"-->
+ <!-- @play="handleEvent($event)"-->
+ <!-- @pause="handleEvent($event)"-->
+ <!-- @ended="handleEvent($event)"-->
+ <!-- @loadeddata="handleEvent($event)"-->
+ <!-- @waiting="handleEvent($event)"-->
+ <!-- @playing="handleEvent($event)"-->
+ <!-- @canplay="handleEvent($event)"-->
+ <!-- @canplaythrough="handleEvent($event)"-->
+ <!-- @timeupdate="handleEvent(player?.currentTime())"-->
+ </el-dialog>
+ </div>
+</template>
+
+<script lang="ts" name="WxVideoPlayer">
+//升级videojs6.0版本,重寫6.0版本
+import 'video.js/dist/video-js.css'
+import { defineComponent } from 'vue'
+import { VideoPlayer } from '@videojs-player/vue'
+import 'video.js/dist/video-js.css'
+
+export default defineComponent({
+ components: {
+ VideoPlayer
+ },
+ props: {
+ url: {
+ // 视频地址，例如说：https://vjs.zencdn.net/v/oceans.mp4
+ type: String,
+ required: true
+ }
+ },
+ setup() {
+ // const videoPlayerRef = ref(null)
+ const dialogVideo = ref(false)
+
+ const handleEvent = (log) => {
+ console.log('Basic player event', log)
+ }
+ const playVideo = () => {
+ dialogVideo.value = true
+ }
+
+ return { handleEvent, playVideo, dialogVideo }
+ }
+})
+</script>
diff --git a/src/views/mp/components/wx-voice-play/main.vue b/src/views/mp/components/wx-voice-play/main.vue
new file mode 100644
index 00000000..9ec8e2e9
--- /dev/null
+++ b/src/views/mp/components/wx-voice-play/main.vue
@@ -0,0 +1,98 @@
+<!--
+ - Copyright (C) 2018-2019
+ - All rights reserved, Designed By www.joolun.com
+ 【微信消息 - 语音】
+ 芋道源码：
+ ① bug 修复：
+ 1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
+ 存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
+ 2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
+ ② 代码优化：将 props 中的 objData 调成为 data 中对应的属性，并补充相关注释
+-->
+<template>
+ <div class="wx-voice-div" @click="playVoice">
+ <el-icon>
+ <Icon v-if="playing !== true" icon="ep:video-play" />
+ <Icon v-else icon="ep:video-pause" />
+ <span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
+ </el-icon>
+ <div v-if="content">
+ <el-tag type="success" size="mini">语音识别</el-tag>
+ {{ content }}
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts" name="WxVoicePlayer">
+// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
+
+import BenzAMRRecorder from 'benz-amr-recorder'
+
+const props = defineProps({
+ url: {
+ type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
+ required: true
+ },
+ content: {
+ type: String, // 语音文本
+ required: false
+ }
+})
+
+const amr = ref()
+const playing = ref(false)
+const duration = ref()
+
+/** 处理点击，播放或暂停 */
+const playVoice = () => {
+ // 情况一：未初始化，则创建 BenzAMRRecorder
+ if (amr.value === undefined) {
+ amrInit()
+ return
+ }
+ // 情况二：已经初始化，则根据情况播放或暂时
+ if (amr.value.isPlaying()) {
+ amrStop()
+ } else {
+ amrPlay()
+ }
+}
+
+/** 音频初始化 */
+const amrInit = () => {
+ amr.value = new BenzAMRRecorder()
+ // 设置播放
+ amr.value.initWithUrl(props.url).then(function () {
+ amrPlay()
+ duration.value = amr.value.getDuration()
+ })
+ // 监听暂停
+ amr.value.onEnded(function () {
+ playing.value = false
+ })
+}
+
+/** 音频播放 */
+const amrPlay = () => {
+ playing.value = true
+ amr.value.play()
+}
+
+/** 音频暂停 */
+const amrStop = () => {
+ playing.value = false
+ amr.value.stop()
+}
+// TODO 芋艿：下面样式有点问题
+</script>
+<style lang="scss" scoped>
+.wx-voice-div {
+ padding: 5px;
+ background-color: #eaeaea;
+ border-radius: 10px;
+}
+.amr-duration {
+ font-size: 11px;
+ margin-left: 5px;
+}
+</style>
diff --git a/src/views/mp/freePublish/index.vue b/src/views/mp/freePublish/index.vue
index 497f72ec..8a3d5285 100644
--- a/src/views/mp/freePublish/index.vue
+++ b/src/views/mp/freePublish/index.vue
@@ -1,3 +1,363 @@
<template>
- <span>开发中</span>
+ <!-- 搜索工作栏 -->
+ <content-wrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="公众号" prop="accountId">
+ <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
+ <el-option
+ v-for="item in accountList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </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-form-item>
+ </el-form>
+ </content-wrap>
+
+ <!-- 列表 -->
+ <content-wrap>
+ <div class="waterfall" v-loading="loading">
+ <div
+ class="waterfall-item"
+ v-show="item.content && item.content.newsItem"
+ v-for="item in list"
+ :key="item.articleId"
+ >
+ <wx-news :articles="item.content.newsItem" />
+ <el-row justify="center" class="ope-row">
+ <el-button
+ type="danger"
+ circle
+ @click="handleDelete(item)"
+ v-hasPermi="['mp:free-publish:delete']"
+ >
+ <Icon icon="ep:delete" />
+ </el-button>
+ </el-row>
+ </div>
+ </div>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </content-wrap>
</template>
+
+<script setup lang="ts" name="freePublish">
+import * as FreePublishApi from '@/api/mp/freePublish'
+import * as MpAccountApi from '@/api/mp/account'
+import WxNews from '@/views/mp/components/wx-news/main.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,
+ accountId: undefined // 当前页数
+})
+const queryFormRef = ref() // 搜索的表单
+const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
+
+/** 查询列表 */
+const getList = async () => {
+ // 如果没有选中公众号账号，则进行提示。
+ if (!queryParams.accountId) {
+ message.error('未选中公众号，无法查询已发表图文')
+ return false
+ }
+ try {
+ loading.value = true
+ const data = await FreePublishApi.getFreePublishPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ // 默认选中第一个
+ if (accountList.value.length > 0) {
+ queryParams.accountId = accountList.value[0].id
+ }
+ handleQuery()
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (item) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm('删除后用户将无法访问此页面，确定删除？')
+ // 发起删除
+ await FreePublishApi.deleteFreePublish(queryParams.accountId, item.articleId)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+onMounted(async () => {
+ accountList.value = await MpAccountApi.getSimpleAccountList()
+ // 选中第一个
+ if (accountList.value.length > 0) {
+ queryParams.accountId = accountList.value[0].id
+ }
+ await getList()
+})
+</script>
+<style lang="scss" scoped>
+.ope-row {
+ margin-top: 5px;
+ text-align: center;
+ border-top: 1px solid #eaeaea;
+ padding-top: 5px;
+}
+
+.item-name {
+ font-size: 12px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-align: center;
+}
+
+.el-upload__tip {
+ margin-left: 5px;
+}
+
+/* 新增图文 */
+.left {
+ display: inline-block;
+ width: 35%;
+ vertical-align: top;
+ margin-top: 200px;
+}
+
+.right {
+ display: inline-block;
+ width: 60%;
+ margin-top: -40px;
+}
+
+.avatar-uploader {
+ width: 20%;
+ display: inline-block;
+}
+
+.avatar-uploader .el-upload {
+ border-radius: 6px;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ text-align: unset !important;
+}
+
+.avatar-uploader .el-upload:hover {
+ border-color: #165dff;
+}
+
+.avatar-uploader-icon {
+ border: 1px solid #d9d9d9;
+ font-size: 28px;
+ color: #8c939d;
+ width: 120px;
+ height: 120px;
+ line-height: 120px;
+ text-align: center;
+}
+
+.avatar {
+ width: 230px;
+ height: 120px;
+}
+
+.avatar1 {
+ width: 120px;
+ height: 120px;
+}
+
+.digest {
+ width: 60%;
+ display: inline-block;
+ vertical-align: top;
+}
+
+/*新增图文*/
+/*瀑布流样式*/
+.waterfall {
+ width: 100%;
+ column-gap: 10px;
+ column-count: 5;
+ margin: 0 auto;
+}
+
+.waterfall-item {
+ padding: 10px;
+ margin-bottom: 10px;
+ break-inside: avoid;
+ border: 1px solid #eaeaea;
+}
+
+p {
+ line-height: 30px;
+}
+
+@media (min-width: 992px) and (max-width: 1300px) {
+ .waterfall {
+ column-count: 3;
+ }
+ p {
+ color: red;
+ }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+ .waterfall {
+ column-count: 2;
+ }
+ p {
+ color: orange;
+ }
+}
+
+@media (max-width: 767px) {
+ .waterfall {
+ column-count: 1;
+ }
+}
+
+/*瀑布流样式*/
+.news-main {
+ background-color: #ffffff;
+ width: 100%;
+ margin: auto;
+ height: 120px;
+}
+
+.news-content {
+ background-color: #acadae;
+ width: 100%;
+ height: 120px;
+ position: relative;
+}
+
+.news-content-title {
+ display: inline-block;
+ font-size: 15px;
+ color: #ffffff;
+ position: absolute;
+ left: 0px;
+ bottom: 0px;
+ background-color: black;
+ width: 98%;
+ padding: 1%;
+ opacity: 0.65;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ height: 25px;
+}
+
+.news-main-item {
+ background-color: #ffffff;
+ padding: 5px 0px;
+ border-top: 1px solid #eaeaea;
+ width: 100%;
+ margin: auto;
+}
+
+.news-content-item {
+ position: relative;
+ margin-left: -3px;
+}
+
+.news-content-item-title {
+ display: inline-block;
+ font-size: 12px;
+ width: 70%;
+}
+
+.news-content-item-img {
+ display: inline-block;
+ width: 25%;
+ background-color: #acadae;
+}
+
+.input-tt {
+ padding: 5px;
+}
+
+.activeAddNews {
+ border: 5px solid #2bb673;
+}
+
+.news-main-plus {
+ width: 280px;
+ text-align: center;
+ margin: auto;
+ height: 50px;
+}
+
+.icon-plus {
+ margin: 10px;
+ font-size: 25px;
+}
+
+.select-item {
+ width: 60%;
+ padding: 10px;
+ margin: 0 auto 10px auto;
+ border: 1px solid #eaeaea;
+}
+
+.father .child {
+ display: none;
+ text-align: center;
+ position: relative;
+ bottom: 25px;
+}
+
+.father:hover .child {
+ display: block;
+}
+
+.thumb-div {
+ display: inline-block;
+ width: 30%;
+ text-align: center;
+}
+
+.thumb-but {
+ margin: 5px;
+}
+
+.material-img {
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/views/mp/message/index.vue b/src/views/mp/message/index.vue
index 497f72ec..90db931a 100644
--- a/src/views/mp/message/index.vue
+++ b/src/views/mp/message/index.vue
@@ -1,3 +1,282 @@
<template>
- <span>开发中</span>
+ <ContentWrap>
+ <!-- 搜索工作栏 -->
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="公众号" prop="accountId">
+ <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
+ <el-option
+ v-for="item in accountList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="消息类型" prop="type">
+ <el-select v-model="queryParams.type" placeholder="请选择消息类型" class="!w-240px">
+ <el-option
+ v-for="dict in getStrDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="用户标识" prop="openid">
+ <el-input
+ v-model="queryParams.openid"
+ placeholder="请输入用户标识"
+ clearable
+ :v-on="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ style="width: 240px"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ type="daterange"
+ range-separator="-"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ :default-time="['00:00:00', '23:59:59']"
+ 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-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column
+ label="发送时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="消息类型" align="center" prop="type" width="80" />
+ <el-table-column label="发送方" align="center" prop="sendFrom" width="80">
+ <template #default="scope">
+ <el-tag v-if="scope.row.sendFrom === 1" type="success">粉丝</el-tag>
+ <el-tag v-else type="info">公众号</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="用户标识" align="center" prop="openid" width="300" />
+ <el-table-column label="内容" prop="content">
+ <template #default="scope">
+ <!-- 【事件】区域 -->
+ <div v-if="scope.row.type === 'event' && scope.row.event === 'subscribe'">
+ <el-tag type="success">关注</el-tag>
+ </div>
+ <div v-else-if="scope.row.type === 'event' && scope.row.event === 'unsubscribe'">
+ <el-tag type="danger">取消关注</el-tag>
+ </div>
+ <div v-else-if="scope.row.type === 'event' && scope.row.event === 'CLICK'">
+ <el-tag>点击菜单</el-tag>
+ 【{{ scope.row.eventKey }}】
+ </div>
+ <div v-else-if="scope.row.type === 'event' && scope.row.event === 'VIEW'">
+ <el-tag>点击菜单链接</el-tag>
+ 【{{ scope.row.eventKey }}】
+ </div>
+ <div v-else-if="scope.row.type === 'event' && scope.row.event === 'scancode_waitmsg'">
+ <el-tag>扫码结果</el-tag>
+ 【{{ scope.row.eventKey }}】
+ </div>
+ <div v-else-if="scope.row.type === 'event' && scope.row.event === 'scancode_push'">
+ <el-tag>扫码结果</el-tag>
+ 【{{ scope.row.eventKey }}】
+ </div>
+ <div v-else-if="scope.row.type === 'event' && scope.row.event === 'pic_sysphoto'">
+ <el-tag>系统拍照发图</el-tag>
+ </div>
+ <div v-else-if="scope.row.type === 'event' && scope.row.event === 'pic_photo_or_album'">
+ <el-tag>拍照或者相册</el-tag>
+ </div>
+ <div v-else-if="scope.row.type === 'event' && scope.row.event === 'pic_weixin'">
+ <el-tag>微信相册</el-tag>
+ </div>
+ <div v-else-if="scope.row.type === 'event' && scope.row.event === 'location_select'">
+ <el-tag>选择地理位置</el-tag>
+ </div>
+ <div v-else-if="scope.row.type === 'event'">
+ <el-tag type="danger">未知事件类型</el-tag>
+ </div>
+ <!-- 【消息】区域 -->
+ <div v-else-if="scope.row.type === 'text'">{{ scope.row.content }}</div>
+ <div v-else-if="scope.row.type === 'voice'">
+ <wx-voice-player :url="scope.row.mediaUrl" :content="scope.row.recognition" />
+ </div>
+ <div v-else-if="scope.row.type === 'image'">
+ <a target="_blank" :href="scope.row.mediaUrl">
+ <img :src="scope.row.mediaUrl" style="width: 100px" />
+ </a>
+ </div>
+ <div v-else-if="scope.row.type === 'video' || scope.row.type === 'shortvideo'">
+ <wx-video-player :url="scope.row.mediaUrl" style="margin-top: 10px" />
+ </div>
+ <div v-else-if="scope.row.type === 'link'">
+ <el-tag>链接</el-tag>
+ ：
+ <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
+ </div>
+ <div v-else-if="scope.row.type === 'location'">
+ <wx-location
+ :label="scope.row.label"
+ :location-y="scope.row.locationY"
+ :location-x="scope.row.locationX"
+ />
+ </div>
+ <div v-else-if="scope.row.type === 'music'">
+ <wx-music
+ :title="scope.row.title"
+ :description="scope.row.description"
+ :thumb-media-url="scope.row.thumbMediaUrl"
+ :music-url="scope.row.musicUrl"
+ :hq-music-url="scope.row.hqMusicUrl"
+ />
+ </div>
+ <div v-else-if="scope.row.type === 'news'">
+ <wx-news :articles="scope.row.articles" />
+ </div>
+ <div v-else>
+ <el-tag type="danger">未知消息类型</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="handleSend(scope.row)"
+ v-hasPermi="['mp:message:send']"
+ >
+ 消息
+ </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"
+ />
+
+ <!-- 发送消息的弹窗 -->
+ <el-dialog title="粉丝消息列表" v-model="open" @click="openDialog()" width="50%">
+ <template #footer>
+ <wx-msg :user-id="userId" v-if="open" />
+ </template>
+ </el-dialog>
+ </ContentWrap>
</template>
+<script setup lang="ts" name="MpMessage">
+import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
+import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
+import WxMsg from '@/views/mp/components/wx-msg/main.vue'
+import WxLocation from '@/views/mp/components/wx-location/main.vue'
+import WxMusic from '@/views/mp/components/wx-music/main.vue'
+import WxNews from '@/views/mp/components/wx-news/main.vue'
+import * as MpAccountApi from '@/api/mp/account'
+import * as MpMessageApi from '@/api/mp/message'
+
+const message = useMessage() // 消息弹窗
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ openid: null,
+ accountId: null,
+ type: null,
+ createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+// TODO 芋艿：下面应该移除
+const open = ref(false) // 是否显示弹出层
+const userId = ref(0) // 操作的用户编号
+const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
+
+/** 查询列表 */
+const getList = async () => {
+ // 如果没有选中公众号账号，则进行提示。
+ if (!queryParams.accountId) {
+ await message.error('未选中公众号，无法查询消息')
+ return
+ }
+ try {
+ loading.value = true
+ const data = await MpMessageApi.getMessagePage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = async () => {
+ queryFormRef.value.resetFields()
+ // 默认选中第一个
+ if (accountList.value.length > 0) {
+ // @ts-ignore
+ queryParams.accountId = accountList.value[0].id
+ }
+ handleQuery()
+}
+const handleSend = async (row) => {
+ userId.value = row.userId
+ open.value = true
+}
+
+const openDialog = () => {
+ open.value = true
+}
+// const closeDiaLog = () => {
+// open.value = false
+// }
+
+/** 初始化 **/
+onMounted(async () => {
+ accountList.value = await MpAccountApi.getSimpleAccountList()
+ // 选中第一个
+ if (accountList.value.length > 0) {
+ // @ts-ignore
+ queryParams.accountId = accountList.value[0].id
+ }
+ await getList()
+})
+</script>
diff --git a/src/views/mp/statistics/index.vue b/src/views/mp/statistics/index.vue
index 497f72ec..a692365c 100644
--- a/src/views/mp/statistics/index.vue
+++ b/src/views/mp/statistics/index.vue
@@ -1,3 +1,365 @@
<template>
- <span>开发中</span>
+ <!-- 搜索工作栏 -->
+ <content-wrap>
+ <el-form class="-mb-15px" ref="queryForm" :inline="true" label-width="68px">
+ <el-form-item label="公众号" prop="accountId">
+ <el-select v-model="accountId" @change="getSummary" class="!w-240px">
+ <el-option
+ v-for="item in accountList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="时间范围" prop="dateRange">
+ <el-date-picker
+ v-model="dateRange"
+ type="daterange"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+ @change="getSummary"
+ class="!w-240px"
+ />
+ </el-form-item>
+ </el-form>
+ </content-wrap>
+
+ <!-- 图表 -->
+ <content-wrap>
+ <el-row>
+ <el-col :span="12" class="card-box">
+ <el-card>
+ <template #header>
+ <div>
+ <span>用户增减数据</span>
+ </div>
+ </template>
+ <Echart :options="userSummaryOption" :height="420" />
+ </el-card>
+ </el-col>
+ <el-col :span="12" class="card-box">
+ <el-card>
+ <template #header>
+ <div>
+ <span>累计用户数据</span>
+ </div>
+ </template>
+ <Echart :options="userCumulateOption" :height="420" />
+ </el-card>
+ </el-col>
+ <el-col :span="12" class="card-box">
+ <el-card>
+ <template #header>
+ <div>
+ <span>消息概况数据</span>
+ </div>
+ </template>
+ <Echart :options="upstreamMessageOption" :height="420" />
+ </el-card>
+ </el-col>
+ <el-col :span="12" class="card-box">
+ <el-card>
+ <template #header>
+ <div>
+ <span>接口分析数据</span>
+ </div>
+ </template>
+ <Echart :options="interfaceSummaryOption" :height="420" />
+ </el-card>
+ </el-col>
+ </el-row>
+ </content-wrap>
</template>
+
+<script setup lang="ts" name="MpStatistics">
+import { formatDate, addTime, betweenDay, beginOfDay, endOfDay } from '@/utils/formatTime'
+import * as StatisticsApi from '@/api/mp/statistics'
+import * as MpAccountApi from '@/api/mp/account'
+const message = useMessage() // 消息弹窗
+
+// 默认开始时间是当前日期-7，结束时间是当前日期-1
+const dateRange = ref([
+ beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)),
+ endOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24))
+])
+const accountId = ref() // 选中的公众号编号
+const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
+
+const xAxisDate = ref([] as any[]) // X 轴的日期范围
+// 用户增减数据图表配置项
+const userSummaryOption = reactive({
+ color: ['#67C23A', '#E5323E'],
+ legend: {
+ data: ['新增用户', '取消关注的用户']
+ },
+ tooltip: {},
+ xAxis: {
+ data: [] as any[] // X 轴的日期范围
+ },
+ yAxis: {
+ minInterval: 1
+ },
+ series: [
+ {
+ name: '新增用户',
+ type: 'bar',
+ label: {
+ show: true
+ },
+ barGap: 0,
+ data: [] as any[] // 新增用户的数据
+ },
+ {
+ name: '取消关注的用户',
+ type: 'bar',
+ label: {
+ show: true
+ },
+ data: [] as any[] // 取消关注的用户的数据
+ }
+ ]
+})
+// 累计用户数据图表配置项
+const userCumulateOption = reactive({
+ legend: {
+ data: ['累计用户量']
+ },
+ xAxis: {
+ type: 'category',
+ data: [] as any[]
+ },
+ yAxis: {
+ minInterval: 1
+ },
+ series: [
+ {
+ name: '累计用户量',
+ data: [] as any[], // 累计用户量的数据
+ type: 'line',
+ smooth: true,
+ label: {
+ show: true
+ }
+ }
+ ]
+})
+// 消息发送概况数据图表配置项
+const upstreamMessageOption = reactive({
+ color: ['#67C23A', '#E5323E'],
+ legend: {
+ data: ['用户发送人数', '用户发送条数']
+ },
+ tooltip: {},
+ xAxis: {
+ data: [] as any[] // X 轴的日期范围
+ },
+ yAxis: {
+ minInterval: 1
+ },
+ series: [
+ {
+ name: '用户发送人数',
+ type: 'line',
+ smooth: true,
+ label: {
+ show: true
+ },
+ data: [] as any[] // 用户发送人数的数据
+ },
+ {
+ name: '用户发送条数',
+ type: 'line',
+ smooth: true,
+ label: {
+ show: true
+ },
+ data: [] as any[] // 用户发送条数的数据
+ }
+ ]
+})
+// 接口分析况数据图表配置项
+const interfaceSummaryOption = reactive({
+ color: ['#67C23A', '#E5323E', '#E6A23C', '#409EFF'],
+ legend: {
+ data: ['被动回复用户消息的次数', '失败次数', '最大耗时', '总耗时']
+ },
+ tooltip: {},
+ xAxis: {
+ data: [] as any[] // X 轴的日期范围
+ },
+ yAxis: {},
+ series: [
+ {
+ name: '被动回复用户消息的次数',
+ type: 'bar',
+ label: {
+ show: true
+ },
+ barGap: 0,
+ data: [] as any[] // 被动回复用户消息的次数的数据
+ },
+ {
+ name: '失败次数',
+ type: 'bar',
+ label: {
+ show: true
+ },
+ data: [] as any[] // 失败次数的数据
+ },
+ {
+ name: '最大耗时',
+ type: 'bar',
+ label: {
+ show: true
+ },
+ data: [] as any[] // 最大耗时的数据
+ },
+ {
+ name: '总耗时',
+ type: 'bar',
+ label: {
+ show: true
+ },
+ data: [] as any[] // 总耗时的数据
+ }
+ ]
+})
+
+/** 加载公众号账号的列表 */
+const getAccountList = async () => {
+ accountList.value = await MpAccountApi.getSimpleAccountList()
+ // 默认选中第一个
+ if (accountList.value.length > 0) {
+ accountId.value = accountList.value[0].id
+ }
+}
+
+/** 加载数据 */
+const getSummary = () => {
+ // 如果没有选中公众号账号，则进行提示。
+ if (!accountId) {
+ message.error('未选中公众号，无法统计数据')
+ return false
+ }
+ // 必须选择 7 天内，因为公众号有时间跨度限制为 7
+ if (betweenDay(dateRange.value[0], dateRange.value[1]) >= 7) {
+ message.error('时间间隔 7 天以内，请重新选择')
+ return false
+ }
+ // 清空横坐标日期
+ xAxisDate.value = []
+ // 横坐标加载日期数据
+ const days = betweenDay(dateRange.value[0], dateRange.value[1]) // 相差天数
+ for (let i = 0; i <= days; i++) {
+ xAxisDate.value.push(
+ formatDate(addTime(dateRange.value[0], 3600 * 1000 * 24 * i), 'YYYY-MM-DD')
+ )
+ }
+ // 初始化图表
+ initUserSummaryChart()
+ initUserCumulateChart()
+ initUpstreamMessageChart()
+ interfaceSummaryChart()
+}
+
+/** 用户增减数据 */
+const initUserSummaryChart = async () => {
+ userSummaryOption.xAxis.data = []
+ userSummaryOption.series[0].data = []
+ userSummaryOption.series[1].data = []
+ try {
+ // 用户增减数据
+ const data = await StatisticsApi.getUserSummary({
+ accountId: accountId.value,
+ date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
+ })
+ // 横坐标
+ userSummaryOption.xAxis.data = xAxisDate.value
+ // 处理数据
+ xAxisDate.value.forEach((date, index) => {
+ data.forEach((item) => {
+ // 匹配日期
+ const refDate = formatDate(new Date(item.refDate), 'YYYY-MM-DD')
+ if (refDate.indexOf(date) === -1) {
+ return
+ }
+ // 设置数据到对应的位置
+ userSummaryOption.series[0].data[index] = item.newUser
+ userSummaryOption.series[1].data[index] = item.cancelUser
+ })
+ })
+ } catch {}
+}
+
+/** 累计用户数据 */
+const initUserCumulateChart = async () => {
+ userCumulateOption.xAxis.data = []
+ userCumulateOption.series[0].data = []
+ // 发起请求
+ try {
+ const data = await StatisticsApi.getUserCumulate({
+ accountId: accountId.value,
+ date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
+ })
+ userCumulateOption.xAxis.data = xAxisDate.value
+ // 处理数据
+ data.forEach((item, index) => {
+ userCumulateOption.series[0].data[index] = item.cumulateUser
+ })
+ } catch {}
+}
+
+/** 消息概况数据 */
+const initUpstreamMessageChart = async () => {
+ upstreamMessageOption.xAxis.data = []
+ upstreamMessageOption.series[0].data = []
+ upstreamMessageOption.series[1].data = []
+ // 发起请求
+ try {
+ const data = await StatisticsApi.getUpstreamMessage({
+ accountId: accountId.value,
+ date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
+ })
+ upstreamMessageOption.xAxis.data = xAxisDate.value
+ // 处理数据
+ data.forEach((item, index) => {
+ upstreamMessageOption.series[0].data[index] = item.messageUser
+ upstreamMessageOption.series[1].data[index] = item.messageCount
+ })
+ } catch {}
+}
+
+/** 接口分析数据 */
+const interfaceSummaryChart = async () => {
+ interfaceSummaryOption.xAxis.data = []
+ interfaceSummaryOption.series[0].data = []
+ interfaceSummaryOption.series[1].data = []
+ interfaceSummaryOption.series[2].data = []
+ interfaceSummaryOption.series[3].data = []
+ // 发起请求
+ try {
+ const data = await StatisticsApi.getInterfaceSummary({
+ accountId: accountId.value,
+ date: [formatDate(dateRange.value[0]), formatDate(dateRange.value[1])]
+ })
+ interfaceSummaryOption.xAxis.data = xAxisDate.value
+ // 处理数据
+ data.forEach((item, index) => {
+ interfaceSummaryOption.series[0].data[index] = item.callbackCount
+ interfaceSummaryOption.series[1].data[index] = item.failCount
+ interfaceSummaryOption.series[2].data[index] = item.maxTimeCost
+ interfaceSummaryOption.series[3].data[index] = item.totalTimeCost
+ })
+ } catch {}
+}
+
+/** 初始化 */
+onMounted(async () => {
+ // 获取公众号下拉列表
+ await getAccountList()
+ // 加载数据
+ getSummary()
+})
+</script>
diff --git a/src/views/mp/tag/TagForm.vue b/src/views/mp/tag/TagForm.vue
new file mode 100644
index 00000000..db251cdf
--- /dev/null
+++ b/src/views/mp/tag/TagForm.vue
@@ -0,0 +1,91 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="标签名称" prop="name">
+ <el-input v-model="formData.name" 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 MpTagApi from '@/api/mp/tag'
+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({
+ accountId: -1,
+ name: ''
+})
+const formRules = reactive({
+ name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, accountId: number, id?: number) => {
+ modelVisible.value = true
+ modelTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+ formData.value.accountId = accountId
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ formData.value = await MpTagApi.getTag(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 as MpTagApi.TagVO
+ if (formType.value === 'create') {
+ await MpTagApi.createTag(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await MpTagApi.updateTag(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ accountId: -1,
+ name: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mp/tag/index.vue b/src/views/mp/tag/index.vue
new file mode 100644
index 00000000..8a4b731d
--- /dev/null
+++ b/src/views/mp/tag/index.vue
@@ -0,0 +1,183 @@
+<template>
+ <!-- 搜索工作栏 -->
+ <ContentWrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="公众号" prop="accountId">
+ <el-select v-model="queryParams.accountId" placeholder="请选择公众号" class="!w-240px">
+ <el-option
+ v-for="item in accountList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </el-form-item>
+ <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-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-form-item>
+ <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mp:tag:create']">
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button type="success" plain @click="handleSync" v-hasPermi="['mp:tag:sync']">
+ <Icon icon="ep:refresh" class="mr-5px" /> 同步
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <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="count" />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['mp:tag:update']"
+ >
+ 修改
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['mp:tag:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <TagForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts" name="MpTag">
+import { dateFormatter } from '@/utils/formatTime'
+import * as MpTagApi from '@/api/mp/tag'
+import * as MpAccountApi from '@/api/mp/account'
+import TagForm from './TagForm.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,
+ accountId: undefined,
+ name: null
+})
+const queryFormRef = ref() // 搜索的表单
+const accountList = ref<MpAccountApi.AccountVO[]>([]) // 公众号账号列表
+
+/** 查询列表 */
+const getList = async () => {
+ // 如果没有选中公众号账号，则进行提示。
+ if (!queryParams.accountId) {
+ await message.error('未选中公众号，无法查询标签')
+ return
+ }
+ try {
+ loading.value = true
+ const data = await MpTagApi.getTagPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ // 默认选中第一个
+ if (accountList.value.length > 0) {
+ queryParams.accountId = accountList.value[0].id
+ }
+ handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, queryParams.accountId, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await MpTagApi.deleteTag(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 同步操作 */
+const handleSync = async () => {
+ try {
+ await message.confirm('是否确认同步标签？')
+ // @ts-ignore
+ await MpTagApi.syncTag(queryParams.accountId)
+ message.success('同步标签成功')
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(async () => {
+ accountList.value = await MpAccountApi.getSimpleAccountList()
+ // 选中第一个
+ if (accountList.value.length > 0) {
+ queryParams.accountId = accountList.value[0].id
+ }
+ await getList()
+})
+</script>
diff --git a/src/views/pay/merchant/MerchantForm.vue b/src/views/pay/merchant/MerchantForm.vue
new file mode 100644
index 00000000..1e09fb8c
--- /dev/null
+++ b/src/views/pay/merchant/MerchantForm.vue
@@ -0,0 +1,110 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <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="shortName">
+ <el-input v-model="formData.shortName" placeholder="请输入商户简称" />
+ </el-form-item>
+ <el-form-item label="开启状态" prop="status">
+ <el-select v-model="formData.status" placeholder="请选择状态" clearable>
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </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 MerchantApi from '@/api/pay/merchant'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+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: '',
+ shortName: '',
+ status: CommonStatusEnum.ENABLE,
+ remark: ''
+})
+const formRules = reactive({
+ name: [{ required: true, message: '商户名称不能为空', trigger: 'blur' }],
+ shortName: [{ required: true, message: '商户简称不能为空', trigger: 'blur' }],
+ status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
+})
+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 MerchantApi.getMerchant(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 as unknown as MerchantApi.MerchantVO
+ if (formType.value === 'create') {
+ await MerchantApi.createMerchant(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await MerchantApi.updateMerchant(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: '',
+ shortName: '',
+ status: CommonStatusEnum.ENABLE,
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/pay/merchant/index.vue b/src/views/pay/merchant/index.vue
index 1ea460ec..d2e487c3 100644
--- a/src/views/pay/merchant/index.vue
+++ b/src/views/pay/merchant/index.vue
@@ -1,153 +1,242 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
+ <content-wrap>
+ <!-- 搜索工作栏 -->
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="商户号" prop="no">
+ <el-input v-model="queryParams.no" placeholder="请输入商户号" clearable class="!w-240px" />
+ </el-form-item>
+ <el-form-item label="商户全称" prop="name">
+ <el-input
+ v-model="queryParams.name"
+ placeholder="请输入商户全称"
+ clearable
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="商户简称" prop="shortName">
+ <el-input
+ v-model="queryParams.shortName"
+ placeholder="请输入商户简称"
+ clearable
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="开启状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="字典状态" clearable class="!w-240px">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="备注" prop="remark">
+ <el-input
+ v-model="queryParams.remark"
+ placeholder="请输入备注"
+ clearable
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ type="datetimerange"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ 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
+ plain
type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
+ @click="openForm('create')"
v-hasPermi="['pay:merchant:create']"
- @click="handleCreate()"
- />
- <!-- 操作：导出 -->
- <XButton
- type="warning"
- preIcon="ep:download"
- :title="t('action.export')"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
v-hasPermi="['pay:merchant:export']"
- @click="exportList('商户列表.xls')"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['pay:merchant:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['pay:merchant:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['pay:merchant:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <XModal v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- ref="formRef"
- />
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
+ >
+ <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="no" />
+ <el-table-column label="商户全称" align="center" prop="name" />
+ <el-table-column label="商户简称" align="center" prop="shortName" />
+ <el-table-column label="开启状态" align="center" prop="status">
+ <template #default="scope">
+ <el-switch
+ v-model="scope.row.status"
+ :active-value="0"
+ :inactive-value="1"
+ @change="handleStatusChange(scope.row)"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column label="备注" align="center" prop="remark" />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ :formatter="dateFormatter"
+ width="180"
/>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['pay:merchant:update']"
+ >
+ 修改
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['pay:merchant: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>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <MerchantForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="Merchant">
-import type { FormExpose } from '@/components/Form'
-import { rules, allSchemas } from './merchant.data'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
import * as MerchantApi from '@/api/pay/merchant'
-
-const { t } = useI18n() // 国际化
+import MerchantForm from './MerchantForm.vue'
const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
- allSchemas: allSchemas,
- getListApi: MerchantApi.getMerchantPageApi,
- deleteApi: MerchantApi.deleteMerchantApi,
- exportListApi: MerchantApi.exportMerchantApi
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ name: '',
+ shortName: '',
+ status: undefined
})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await MerchantApi.getMerchantPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
}
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await MerchantApi.getMerchantApi(rowId)
- unref(formRef)?.setValues(res)
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
}
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- const res = await MerchantApi.getMerchantApi(rowId)
- detailData.value = res
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
}
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as MerchantApi.MerchantVO
- if (actionType.value === 'create') {
- await MerchantApi.createMerchantApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await MerchantApi.updateMerchantApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await MerchantApi.deleteMerchant(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
}
+
+/** 修改状态操作 */
+const handleStatusChange = async (row: MerchantApi.MerchantVO) => {
+ try {
+ // 修改状态的二次确认
+ const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
+ await message.confirm('确认要"' + text + '""' + row.name + '"商户吗?', t('common.reminder'))
+ // 发起修改状态
+ await MerchantApi.updateMerchantStatus(row.id, row.status)
+ // 刷新列表
+ await getList()
+ } catch {
+ // 取消后，进行恢复按钮
+ row.status =
+ row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
+ }
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await MerchantApi.exportMerchant(queryParams)
+ download.excel(data, '商户信息.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/pay/merchant/merchant.data.ts b/src/views/pay/merchant/merchant.data.ts
deleted file mode 100644
index e0e0727d..00000000
--- a/src/views/pay/merchant/merchant.data.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
- no: [required],
- name: [required],
- shortName: [required],
- status: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'seq',
- primaryTitle: '商户编号',
- action: true,
- columns: [
- {
- title: '商户号',
- field: 'no',
- isSearch: true
- },
- {
- title: '商户全称',
- field: 'code',
- isSearch: true
- },
- {
- title: '商户简称',
- field: 'shortName',
- isSearch: true
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: t('form.remark'),
- field: 'remark',
- isTable: false,
- form: {
- component: 'Input',
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- }
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/area/area.data.ts b/src/views/system/area/area.data.ts
deleted file mode 100644
index 008e8a41..00000000
--- a/src/views/system/area/area.data.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: null,
- action: false,
- columns: [
- {
- title: '编号',
- field: 'id',
- table: {
- treeNode: true,
- align: 'left'
- }
- },
- {
- title: '名字',
- field: 'name'
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/area/form.vue b/src/views/system/area/form.vue
new file mode 100644
index 00000000..f0cff434
--- /dev/null
+++ b/src/views/system/area/form.vue
@@ -0,0 +1,69 @@
+<template>
+ <Dialog title="IP 查询" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="IP" prop="ip">
+ <el-input v-model="formData.ip" placeholder="请输入 IP 地址" />
+ </el-form-item>
+ <el-form-item label="地址" prop="result">
+ <el-input v-model="formData.result" readonly placeholder="展示查询 IP 结果" />
+ </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 AreaApi from '@/api/system/area'
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
+const formData = ref({
+ ip: '',
+ result: undefined
+})
+const formRules = reactive({
+ ip: [{ required: true, message: 'IP 地址不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = async () => {
+ modelVisible.value = true
+ resetForm()
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ formData.value.result = await AreaApi.getAreaByIp(formData.value.ip!.trim())
+ message.success('查询成功')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ ip: '',
+ result: undefined
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
index e5a6a682..f9d4c57d 100644
--- a/src/views/system/area/index.vue
+++ b/src/views/system/area/index.vue
@@ -1,125 +1,70 @@
<template>
- <div class="app-container">
- <doc-alert title="地区 & IP" url="https://doc.iocoder.cn/area-and-ip/" />
- <!-- 操作工具栏 -->
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <XButton preIcon="fa:search" type="primary" @click="handleAdd" title="IP 查询" />
- </el-col>
- </el-row>
- <!-- 列表 -->
- <el-table
- v-if="refreshTable"
- v-loading="loading"
- :data="list"
- row-key="id"
- :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
- >
- <el-table-column label="编号" prop="id" />
- <el-table-column label="名字" prop="name" />
- </el-table>
- <!-- <XTable ref="xGrid" @register="registerTable" show-overflow /> -->
+ <!-- 操作栏 -->
+ <content-wrap>
+ <el-button type="primary" @click="openModal()">
+ <Icon icon="ep:plus" class="mr-5px" /> IP 查询
+ </el-button>
+ </content-wrap>
- <!-- 对话框(添加 / 修改) -->
- <el-dialog title="IP 查询" v-model="open" width="500px" append-to-body>
- <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
- <el-form-item label="IP" prop="ip">
- <el-input v-model="form.ip" placeholder="请输入 IP 地址" />
- </el-form-item>
- <el-form-item label="地址" prop="result">
- <el-input v-model="form.result" readonly placeholder="展示查询 IP 结果" />
- </el-form-item>
- </el-form>
- <template #footer>
- <el-button type="primary" @click="submitForm(formRef)">查 询</el-button>
- <el-button @click="cancel(formRef)">取 消</el-button>
- </template>
- </el-dialog>
- </div>
+ <!-- 列表 -->
+ <content-wrap>
+ <div style="width: 100%; height: 700px">
+ <!-- AutoResizer 自动调节大小 -->
+ <el-auto-resizer>
+ <template #default="{ height, width }">
+ <!-- Virtualized Table 虚拟化表格：高性能，解决表格在大数据量下的卡顿问题 -->
+ <el-table-v2
+ :columns="columns"
+ :data="list"
+ :width="width"
+ :height="height"
+ expand-column-key="id"
+ />
+ </template>
+ </el-auto-resizer>
+ </div>
+ </content-wrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <area-form ref="modalRef" />
</template>
+<script setup lang="tsx" name="Area">
+import type { Column } from 'element-plus'
+import AreaForm from './form.vue'
+import * as AreaApi from '@/api/system/area'
-<script lang="ts" setup name="Area">
-import * as areaApi from '@/api/system/area'
-import type { FormInstance } from 'element-plus'
-// import { allSchemas } from './area.data'
-// import { getAreaByIp, getAreaTree } from '@/api/system/area'
-// 遮罩层
-const loading = ref(true)
-// 地区列表
-const list = ref([])
-// 弹出层标题
-// const title = ref('')
-// 是否显示弹出层
-const open = ref(false)
-// 重新渲染表格状态
-const refreshTable = ref(true)
-// 表单参数
-const form = ref({
- ip: undefined,
- result: undefined
-})
-const formRef = ref<FormInstance>()
-// 表单校验
-const rules = ref({
- ip: [{ required: true, message: 'IP 地址不能为控', trigger: 'blur' }]
-})
-const message = useMessage() // 消息弹窗
-
-// const treeConfig = {
-// transform: true,
-// rowField: 'id',
-// parentField: 'id'
-// // expandAll: true
-// }
-
-// const [registerTable, { reload }] = useXTable({
-// allSchemas: allSchemas,
-// treeConfig: treeConfig,
-// getListApi: areaApi.getAreaTree
-// })
-
-/** 查询列表 */
-const getList = async () => {
- loading.value = true
- const response = await areaApi.getAreaTree()
- list.value = response.data
- loading.value = false
-}
-/** 取消按钮 */
-const cancel = (formEl: FormInstance | undefined) => {
- if (!formEl) return
- formEl.resetFields()
- open.value = false
- reset()
-}
-/** 表单重置 */
-const reset = async () => {
- form.value = {
- ip: undefined,
- result: undefined
+// 表格的 column 字段
+const columns: Column[] = [
+ {
+ dataKey: 'id', // 需要渲染当前列的数据字段。例如说：{id:9527, name:'Mike'}，则填 id
+ title: '编号', // 显示在单元格表头的文本
+ width: 400, // 当前列的宽度，必须设置
+ fixed: true, // 是否固定列
+ key: 'id' // 树形展开对应的 key
+ },
+ {
+ dataKey: 'name',
+ title: '地名',
+ width: 200
}
- // await reload()
-}
-/** 新增按钮操作 */
-const handleAdd = () => {
- open.value = true
- reset()
-}
-/** 提交按钮 */
-const submitForm = async (formEl: FormInstance | undefined) => {
- if (!formEl) return
- await formEl.validate(async (valid, fields) => {
- if (valid) {
- console.log('submit!')
- const response = await areaApi.getAreaByIp(form.value.ip)
- message.success('查询成功')
- form.value.result = response.data
- } else {
- console.log('error submit!', fields)
- }
- })
+]
+// 表格的数据
+const list = ref([])
+
+/**
+ * 获得数据列表
+ */
+const getList = async () => {
+ list.value = await AreaApi.getAreaTree()
}
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = () => {
+ modalRef.value.openModal()
+}
+
+/** 初始化 **/
onMounted(() => {
getList()
})
diff --git a/src/views/system/dept/DeptForm.vue b/src/views/system/dept/DeptForm.vue
new file mode 100644
index 00000000..f2c3bc02
--- /dev/null
+++ b/src/views/system/dept/DeptForm.vue
@@ -0,0 +1,174 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="上级部门" prop="parentId">
+ <el-tree-select
+ v-model="formData.parentId"
+ :data="deptTree"
+ :props="{ value: 'id', label: 'name', children: 'children' }"
+ value-key="deptId"
+ placeholder="请选择上级部门"
+ check-strictly
+ default-expand-all
+ />
+ </el-form-item>
+ <el-form-item label="部门名称" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入部门名称" />
+ </el-form-item>
+ <el-form-item label="显示排序" prop="sort">
+ <el-input-number v-model="formData.sort" controls-position="right" :min="0" />
+ </el-form-item>
+ <el-form-item label="负责人" prop="leaderUserId">
+ <el-select
+ v-model="formData.leaderUserId"
+ placeholder="请输入负责人"
+ clearable
+ style="width: 100%"
+ >
+ <el-option
+ v-for="item in userList"
+ :key="item.id"
+ :label="item.nickname"
+ :value="item.id"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="联系电话" prop="phone">
+ <el-input v-model="formData.phone" placeholder="请输入联系电话" maxlength="11" />
+ </el-form-item>
+ <el-form-item label="邮箱" prop="email">
+ <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="formData.status" placeholder="请选择状态" clearable>
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button type="primary" @click="submitForm">确 定</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 } from '@/utils/tree'
+import * as DeptApi from '@/api/system/dept'
+import * as UserApi from '@/api/system/user'
+import { CommonStatusEnum } from '@/utils/constants'
+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,
+ title: '',
+ parentId: undefined,
+ name: undefined,
+ sort: undefined,
+ leaderUserId: undefined,
+ phone: undefined,
+ email: undefined,
+ status: CommonStatusEnum.ENABLE
+})
+const formRules = reactive({
+ parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
+ name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
+ sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
+ email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
+ phone: [
+ { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+ ]
+})
+const formRef = ref() // 表单 Ref
+const deptTree = ref() // 树形结构
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
+
+/** 打开弹窗 */
+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 DeptApi.getDeptApi(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+ // 获得用户列表
+ userList.value = await UserApi.getSimpleUserList()
+ // 获得部门树
+ await getTree()
+}
+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 DeptApi.DeptVO
+ if (formType.value === 'create') {
+ await DeptApi.createDeptApi(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await DeptApi.updateDeptApi(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ title: '',
+ parentId: undefined,
+ name: undefined,
+ sort: undefined,
+ leaderUserId: undefined,
+ phone: undefined,
+ email: undefined,
+ status: CommonStatusEnum.ENABLE
+ }
+ formRef.value?.resetFields()
+}
+
+/** 获得部门树 */
+const getTree = async () => {
+ deptTree.value = []
+ const data = await DeptApi.getSimpleDeptList()
+ let dept: Tree = { id: 0, name: '顶级部门', children: [] }
+ dept.children = handleTree(data)
+ deptTree.value.push(dept)
+}
+</script>
diff --git a/src/views/system/dept/dept.data.ts b/src/views/system/dept/dept.data.ts
deleted file mode 100644
index c6945841..00000000
--- a/src/views/system/dept/dept.data.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
- name: [required],
- sort: [required],
- // email: [required],
- email: [
- { required: true, message: t('profile.rules.mail'), trigger: 'blur' },
- {
- type: 'email',
- message: t('profile.rules.truemail'),
- trigger: ['blur', 'change']
- }
- ],
- phone: [
- {
- len: 11,
- trigger: 'blur',
- message: '请输入正确的手机号码'
- }
- ]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: null,
- action: true,
- columns: [
- {
- title: '上级部门',
- field: 'parentId',
- isTable: false
- },
- {
- title: '部门名称',
- field: 'name',
- isSearch: true,
- table: {
- treeNode: true,
- align: 'left'
- }
- },
- {
- title: '负责人',
- field: 'leaderUserId',
- table: {
- slots: {
- default: 'leaderUserId_default'
- }
- }
- },
- {
- title: '联系电话',
- field: 'phone'
- },
- {
- title: '邮箱',
- field: 'email',
- isTable: false
- },
- {
- title: '显示排序',
- field: 'sort'
- },
- {
- 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
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 3b182e2a..20f19013 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,189 +1,188 @@
<template>
+ <!-- 搜索工作栏 -->
<ContentWrap>
- <!-- 列表 -->
- <XTable ref="xGrid" @register="registerTable" show-overflow>
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:dept:create']"
- @click="handleCreate()"
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="部门名称" prop="title">
+ <el-input
+ v-model="queryParams.name"
+ placeholder="请输入部门名称"
+ clearable
+ class="!w-240px"
/>
- <XButton title="展开所有" @click="xGrid?.Ref.setAllTreeExpand(true)" />
- <XButton title="关闭所有" @click="xGrid?.Ref.clearTreeExpand()" />
- </template>
- <template #leaderUserId_default="{ row }">
- <span>{{ userNicknameFormat(row) }}</span>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:dept:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:dept:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <!-- 添加或修改菜单对话框 -->
- <XModal id="deptModel" v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules">
- <template #parentId="form">
- <el-tree-select
- node-key="id"
- v-model="form['parentId']"
- :props="defaultProps"
- :data="deptOptions"
- :default-expanded-keys="[100]"
- check-strictly
- />
- </template>
- <template #leaderUserId="form">
- <el-select v-model="form['leaderUserId']">
+ </el-form-item>
+ <el-form-item label="部门状态" prop="status">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择不么你状态"
+ clearable
+ class="!w-240px"
+ >
<el-option
- v-for="item in userOption"
- :key="item.id"
- :label="item.nickname"
- :value="item.id"
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
/>
</el-select>
- </template>
- </Form>
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :loading="actionLoading"
- @click="submitForm()"
- :title="t('action.save')"
+ </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"
+ plain
+ @click="openForm('create')"
+ v-hasPermi="['system:dept:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button type="danger" plain @click="toggleExpandAll">
+ <Icon icon="ep:sort" class="mr-5px" /> 展开/折叠
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table
+ v-loading="loading"
+ :data="list"
+ row-key="id"
+ default-expand-all
+ v-if="refreshTable"
+ >
+ <el-table-column prop="name" label="部门名称" width="260" />
+ <el-table-column prop="leader" label="负责人" width="120">
+ <template #default="scope">
+ {{ userList.find((user) => user.id === scope.row.leaderUserId)?.nickname }}
+ </template>
+ </el-table-column>
+ <el-table-column prop="sort" label="排序" width="200" />
+ <el-table-column prop="status" label="状态" width="100">
+ <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="createTime"
+ width="180"
+ :formatter="dateFormatter"
/>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" @click="dialogVisible = false" :title="t('dialog.close')" />
- </template>
- </XModal>
+ <el-table-column label="操作" align="center" class-name="fixed-width">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['system:dept:update']"
+ >
+ 修改
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:dept:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <DeptForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="Dept">
-import { handleTree, defaultProps } from '@/utils/tree'
-import type { FormExpose } from '@/components/Form'
-import { allSchemas, rules } from './dept.data'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { handleTree } from '@/utils/tree'
import * as DeptApi from '@/api/system/dept'
-import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
-
-const { t } = useI18n() // 国际化
+import DeptForm from './DeptForm.vue'
+import * as UserApi from '@/api/system/user'
const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const xGrid = ref<any>() // 列表 Grid Ref
-const treeConfig = {
- transform: true,
- rowField: 'id',
- parentField: 'parentId',
- expandAll: true
-}
+const { t } = useI18n() // 国际化
-// 弹窗相关的变量
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 遮罩层
-const formRef = ref<FormExpose>() // 表单 Ref
-const deptOptions = ref() // 树形结构
-const userOption = ref<UserVO[]>([])
-
-const getUserList = async () => {
- const res = await getListSimpleUsersApi()
- userOption.value = res
-}
-// 获取下拉框[上级]的数据
-const getTree = async () => {
- deptOptions.value = []
- const res = await DeptApi.listSimpleDeptApi()
- let dept: Tree = { id: 0, name: '顶级部门', children: [] }
- dept.children = handleTree(res)
- deptOptions.value.push(dept)
-}
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- treeConfig: treeConfig,
- getListApi: DeptApi.getDeptPageApi,
- deleteApi: DeptApi.deleteDeptApi
+const loading = ref(true) // 列表的加载中
+const list = ref() // 列表的数据
+const queryParams = reactive({
+ title: '',
+ name: undefined,
+ status: undefined,
+ pageNo: 1,
+ pageSize: 100
})
-// ========== 新增/修改 ==========
+const queryFormRef = ref() // 搜索的表单
+const isExpandAll = ref(true) // 是否展开，默认全部展开
+const refreshTable = ref(true) // 重新渲染表格状态
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
+/** 查询部门列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await DeptApi.getDeptPageApi(queryParams)
+ list.value = handleTree(data)
+ } finally {
+ loading.value = false
+ }
}
-// 新增操作
-const handleCreate = async () => {
- setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await DeptApi.getDeptApi(rowId)
- await nextTick()
- unref(formRef)?.setValues(res)
-}
-
-// 提交新增/修改的表单
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as DeptApi.DeptVO
- if (actionType.value === 'create') {
- await DeptApi.createDeptApi(data)
- message.success(t('common.createSuccess'))
- } else if (actionType.value === 'update') {
- await DeptApi.updateDeptApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- await getTree()
- await reload()
- }
- }
+/** 展开/折叠操作 */
+const toggleExpandAll = () => {
+ refreshTable.value = false
+ isExpandAll.value = !isExpandAll.value
+ console.log(isExpandAll.value)
+ nextTick(() => {
+ refreshTable.value = true
})
}
-const userNicknameFormat = (row) => {
- if (!row || !row.leaderUserId) {
- return '未设置'
- }
- for (const user of userOption.value) {
- if (row.leaderUserId === user.id) {
- return user.nickname
- }
- }
- return '未知【' + row.leaderUserId + '】'
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ getList()
}
-// ========== 初始化 ==========
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryParams.pageNo = 1
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await DeptApi.deleteDeptApi(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
onMounted(async () => {
- await getUserList()
- await getTree()
+ await getList()
+ // 获取用户列表
+ userList.value = await UserApi.getSimpleUserList()
})
</script>
diff --git a/src/views/system/dict/data.form.vue b/src/views/system/dict/data.form.vue
new file mode 100644
index 00000000..9271e8a9
--- /dev/null
+++ b/src/views/system/dict/data.form.vue
@@ -0,0 +1,175 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="字典类型" prop="type">
+ <el-input
+ :disabled="typeof formData.id !== 'undefined'"
+ v-model="formData.dictType"
+ placeholder="请输入参数名称"
+ />
+ </el-form-item>
+ <el-form-item label="数据标签" prop="label">
+ <el-input v-model="formData.label" placeholder="请输入数据标签" />
+ </el-form-item>
+ <el-form-item label="数据键值" prop="value">
+ <el-input v-model="formData.value" placeholder="请输入数据键值" />
+ </el-form-item>
+ <el-form-item label="显示排序" prop="sort">
+ <el-input-number v-model="formData.sort" controls-position="right" :min="0" />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-radio-group v-model="formData.status">
+ <el-radio
+ v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="parseInt(dict.value)"
+ :label="parseInt(dict.value)"
+ >{{ dict.label }}</el-radio
+ >
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="颜色类型" prop="colorType">
+ <el-select v-model="formData.colorType">
+ <el-option
+ v-for="item in colorTypeOptions"
+ :key="item.value"
+ :label="item.label + '(' + item.value + ')'"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="CSS Class" prop="cssClass">
+ <el-input v-model="formData.cssClass" placeholder="请输入 CSS Class" />
+ </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, getDictOptions } from '@/utils/dict'
+import * as DictDataApi from '@/api/system/dict/dict.data'
+import { CommonStatusEnum } from '@/utils/constants'
+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,
+ sort: undefined,
+ label: '',
+ value: '',
+ dictType: '',
+ status: CommonStatusEnum.ENABLE,
+ colorType: '',
+ cssClass: '',
+ remark: ''
+})
+const formRules = reactive({
+ label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+ value: [{ required: true, message: '数据键值不能为空', trigger: 'blur' }],
+ sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+// 数据标签回显样式
+const colorTypeOptions = readonly([
+ {
+ value: 'default',
+ label: '默认'
+ },
+ {
+ value: 'primary',
+ label: '主要'
+ },
+ {
+ value: 'success',
+ label: '成功'
+ },
+ {
+ value: 'info',
+ label: '信息'
+ },
+ {
+ value: 'warning',
+ label: '警告'
+ },
+ {
+ value: 'danger',
+ label: '危险'
+ }
+])
+
+/** 打开弹窗 */
+const openModal = 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 DictDataApi.getDictData(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+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 DictDataApi.DictDataVO
+ if (formType.value === 'create') {
+ await DictDataApi.createDictData(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await DictDataApi.updateDictData(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ sort: undefined,
+ label: '',
+ value: '',
+ dictType: '',
+ status: CommonStatusEnum.ENABLE,
+ colorType: '',
+ cssClass: '',
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue
new file mode 100644
index 00000000..41bcbaa8
--- /dev/null
+++ b/src/views/system/dict/data.vue
@@ -0,0 +1,202 @@
+<template>
+ <content-wrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="字典名称" prop="dictType">
+ <el-select v-model="queryParams.dictType" class="!w-240px">
+ <el-option v-for="item in dicts" :key="item.type" :label="item.name" :value="item.type" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="字典标签" prop="label">
+ <el-input
+ v-model="queryParams.label"
+ placeholder="请输入字典标签"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="数据状态" clearable class="!w-240px">
+ <el-option
+ v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </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="openModal('create')" v-hasPermi="['system:dict:create']">
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['system:dict: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="label" />
+ <el-table-column label="字典键值" align="center" prop="value" />
+ <el-table-column label="字典排序" align="center" prop="sort" />
+ <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="colorType" />
+ <el-table-column label="CSS Class" align="center" prop="cssClass" />
+ <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openModal('update', scope.row.id)"
+ v-hasPermi="['system:dict:update']"
+ >
+ 修改
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:dict: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>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <data-form ref="modalRef" @success="getList" />
+</template>
+<script setup lang="ts" name="Data">
+import * as DictDataApi from '@/api/system/dict/dict.data'
+import * as DictTypeApi from '@/api/system/dict/dict.type'
+import { getDictOptions, DICT_TYPE } from '@/utils/dict'
+import download from '@/utils/download'
+import { dateFormatter } from '@/utils/formatTime'
+import DataForm from './data.form.vue'
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const route = useRoute() // 路由
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ label: '',
+ status: undefined,
+ dictType: route.params.dictType
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+const dicts = ref<DictTypeApi.DictTypeVO[]>() // 字典类型的列表
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await DictDataApi.getDictDataPage(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 modalRef = ref()
+const openModal = (type: string, id?: number) => {
+ modalRef.value.openModal(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await DictDataApi.deleteDictData(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await DictDataApi.exportDictDataApi(queryParams)
+ download.excel(data, '字典数据.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 查询字典（精简)列表 */
+const getDictList = async () => {
+ dicts.value = await DictTypeApi.getSimpleDictTypeList()
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+ // 查询字典（精简)列表
+ getDictList()
+})
+</script>
diff --git a/src/views/system/dict/dict.data.ts b/src/views/system/dict/dict.data.ts
deleted file mode 100644
index cdfe4538..00000000
--- a/src/views/system/dict/dict.data.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-// 国际化
-const { t } = useI18n()
-// 表单校验
-export const dictDataRules = reactive({
- label: [required],
- value: [required],
- sort: [required]
-})
-// crudSchemas
-export const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: null,
- action: true,
- actionWidth: '140px',
- searchSpan: 12,
- columns: [
- {
- title: '字典类型',
- field: 'dictType',
- isTable: false,
- isForm: false
- },
- {
- title: '数据标签',
- field: 'label',
- isSearch: true
- },
- {
- title: '数据键值',
- field: 'value'
- },
- // {
- // title: '标签类型',
- // field: 'colorType',
- // form: {
- // component: 'Select',
- // componentProps: {
- // options: [
- // {
- // label: 'default',
- // value: ''
- // },
- // {
- // label: 'success',
- // value: 'success'
- // },
- // {
- // label: 'info',
- // value: 'info'
- // },
- // {
- // label: 'warning',
- // value: 'warning'
- // },
- // {
- // label: 'danger',
- // value: 'danger'
- // }
- // ]
- // }
- // },
- // isTable: false
- // },
- {
- title: '颜色',
- field: 'cssClass',
- isTable: false,
- form: {
- component: 'ColorPicker',
- componentProps: {
- predefine: ['#ffffff', '#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#c71585']
- }
- }
- },
- {
- title: '显示排序',
- field: 'sort',
- isTable: false
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number'
- },
- {
- title: t('form.remark'),
- field: 'remark',
- form: {
- component: 'Input',
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- },
- isTable: false
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/dict/dict.type.ts b/src/views/system/dict/dict.type.ts
deleted file mode 100644
index 73b5a021..00000000
--- a/src/views/system/dict/dict.type.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const dictTypeRules = reactive({
- name: [required],
- type: [required]
-})
-// 新增 + 修改
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: null,
- action: true,
- actionWidth: '140px',
- searchSpan: 12,
- columns: [
- {
- title: '字典名称',
- field: 'name',
- isSearch: true
- },
- {
- title: '字典类型',
- field: 'type',
- isSearch: true
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- table: {
- width: 70
- }
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- isTable: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- },
- {
- title: t('form.remark'),
- field: 'remark',
- isTable: false,
- form: {
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/dict/form.vue b/src/views/system/dict/form.vue
new file mode 100644
index 00000000..179656de
--- /dev/null
+++ b/src/views/system/dict/form.vue
@@ -0,0 +1,121 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="字典名称" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入字典名称" />
+ </el-form-item>
+ <el-form-item label="字典类型" prop="type">
+ <el-input
+ :disabled="typeof formData.id !== 'undefined'"
+ v-model="formData.type"
+ placeholder="请输入参数名称"
+ />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-radio-group v-model="formData.status">
+ <el-radio
+ v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="parseInt(dict.value)"
+ :label="parseInt(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, getDictOptions } from '@/utils/dict'
+import * as DictTypeApi from '@/api/system/dict/dict.type'
+import { CommonStatusEnum } from '@/utils/constants'
+
+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: '',
+ type: '',
+ status: CommonStatusEnum.ENABLE,
+ remark: ''
+})
+const formRules = reactive({
+ name: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
+ type: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = 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 DictTypeApi.getDictType(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+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 DictTypeApi.DictTypeVO
+ if (formType.value === 'create') {
+ await DictTypeApi.createDictType(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await DictTypeApi.updateDictType(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ type: '',
+ name: '',
+ status: CommonStatusEnum.ENABLE,
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 713fde97..4e304bf5 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,257 +1,211 @@
<template>
- <div class="flex">
- <!-- ====== 字典分类 ====== -->
- <el-card class="w-1/2 dict" :gutter="12" shadow="always">
- <template #header>
- <div class="card-header">
- <span>字典分类</span>
- </div>
- </template>
- <XTable @register="registerType" @cell-click="cellClickEvent">
- <!-- 操作：新增类型 -->
- <template #toolbar_buttons>
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:dict:create']"
- @click="handleTypeCreate()"
+ <!-- 搜索工作栏 -->
+ <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 label="字典类型" prop="type">
+ <el-input
+ v-model="queryParams.type"
+ placeholder="请输入字典类型"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="字典状态" clearable class="!w-240px">
+ <el-option
+ v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="parseInt(dict.value)"
+ :label="dict.label"
+ :value="dict.value"
/>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ type="daterange"
+ range-separator="-"
+ 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>
+ <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="openModal('create')" v-hasPermi="['system:dict:create']">
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['system:dict: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="name" show-overflow-tooltip />
+ <el-table-column label="字典类型" align="center" prop="type" width="300" />
+ <el-table-column label="状态" align="center" prop="status">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：编辑类型 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:dict:update']"
- @click="handleTypeUpdate(row.id)"
- />
- <!-- 操作：删除类型 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:dict:delete']"
- @click="typeDeleteData(row.id)"
- />
- </template>
- </XTable>
- <!-- @星语：分页和列表重叠在一起了 -->
- </el-card>
- <!-- ====== 字典数据 ====== -->
- <el-card class="w-1/2 dict ml-3" :gutter="12" shadow="hover">
- <template #header>
- <div class="card-header">
- <span>字典数据</span>
- </div>
- </template>
- <!-- 列表 -->
- <div v-if="!tableTypeSelect">
- <span>请从左侧选择</span>
- </div>
- <div v-if="tableTypeSelect">
- <!-- 列表 -->
- <XTable @register="registerData">
- <!-- 操作：新增数据 -->
- <template #toolbar_buttons>
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:dict:create']"
- @click="handleDataCreate()"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改数据 -->
- <XTextButton
- v-hasPermi="['system:dict:update']"
- preIcon="ep:edit"
- :title="t('action.edit')"
- @click="handleDataUpdate(row.id)"
- />
- <!-- 操作：删除数据 -->
- <XTextButton
- v-hasPermi="['system:dict:delete']"
- preIcon="ep:delete"
- :title="t('action.del')"
- @click="dataDeleteData(row.id)"
- />
- </template>
- </XTable>
- </div>
- </el-card>
- <XModal id="dictModel" v-model="dialogVisible" :title="dialogTitle">
- <Form
- v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
- :schema="DictTypeSchemas.allSchemas.formSchema"
- :rules="DictTypeSchemas.dictTypeRules"
- ref="typeFormRef"
- >
- <template #type>
- <template v-if="actionType == 'typeUpdate'">
- <el-tag>{{ dictTypeValue }}</el-tag>
- </template>
- <template v-else><el-input v-model="dictTypeValue" /> </template>
- </template>
- </Form>
- <Form
- v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
- :schema="DictDataSchemas.allSchemas.formSchema"
- :rules="DictDataSchemas.dictDataRules"
- ref="dataFormRef"
+ </el-table-column>
+ <el-table-column label="备注" align="center" prop="remark" />
+ <el-table-column
+ label="创建时间"
+ :formatter="dateFormatter"
+ align="center"
+ prop="createTime"
+ width="180"
/>
- <!-- 操作按钮 -->
- <template #footer>
- <XButton
- v-if="['typeCreate', 'typeUpdate'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitTypeForm"
- />
- <XButton
- v-if="['dataCreate', 'dataUpdate'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitDataForm"
- />
- <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
- </div>
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openModal('update', scope.row.id)"
+ v-hasPermi="['system:dict:update']"
+ >
+ 修改
+ </el-button>
+ <router-link :to="'/dict/type/data/' + scope.row.type">
+ <el-button link type="primary">数据</el-button>
+ </router-link>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:dict: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>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <dict-type-form ref="modalRef" @success="getList" />
</template>
+
<script setup lang="ts" name="Dict">
-import { VxeTableEvents } from 'vxe-table'
-import type { FormExpose } from '@/components/Form'
-import * as DictTypeSchemas from './dict.type'
-import * as DictDataSchemas from './dict.data'
+import { getDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
import * as DictTypeApi from '@/api/system/dict/dict.type'
-import * as DictDataApi from '@/api/system/dict/dict.data'
-import { DictDataVO, DictTypeVO } from '@/api/system/dict/types'
-
-const { t } = useI18n() // 国际化
+import DictTypeForm from './form.vue'
+import download from '@/utils/download'
const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
-const [registerType, { reload: typeGetList, deleteData: typeDeleteData }] = useXTable({
- allSchemas: DictTypeSchemas.allSchemas,
- getListApi: DictTypeApi.getDictTypePageApi,
- deleteApi: DictTypeApi.deleteDictTypeApi
-})
-
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 字典表格数据
const queryParams = reactive({
- dictType: null
+ pageNo: 1,
+ pageSize: 10,
+ name: '',
+ type: '',
+ status: undefined,
+ createTime: []
})
-const [registerData, { reload: dataGetList, deleteData: dataDeleteData }] = useXTable({
- allSchemas: DictDataSchemas.allSchemas,
- params: queryParams,
- getListApi: DictDataApi.getDictDataPageApi,
- deleteApi: DictDataApi.deleteDictDataApi
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询字典类型列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await DictTypeApi.getDictTypePage(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 modalRef = ref()
+const openModal = (type: string, id?: number) => {
+ modalRef.value.openModal(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await DictTypeApi.deleteDictType(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await DictTypeApi.exportDictType(queryParams)
+ download.excel(data, '字典类型.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
})
-// ========== 字典分类列表相关 ==========
-const dictTypeValue = ref('')
-// 字典分类修改操作
-const handleTypeCreate = () => {
- dictTypeValue.value = ''
- setDialogTile('typeCreate')
-}
-const handleTypeUpdate = async (rowId: number) => {
- setDialogTile('typeUpdate')
- // 设置数据
- const res = await DictTypeApi.getDictTypeApi(rowId)
- dictTypeValue.value = res.type
- unref(typeFormRef)?.setValues(res)
-}
-
-// 字典数据修改操作
-const handleDataCreate = () => {
- setDialogTile('dataCreate')
-}
-const handleDataUpdate = async (rowId: number) => {
- setDialogTile('dataUpdate')
- // 设置数据
- const res = await DictDataApi.getDictDataApi(rowId)
- unref(dataFormRef)?.setValues(res)
-}
-// 字典分类点击行事件
-const parentType = ref('')
-const tableTypeSelect = ref(false)
-const cellClickEvent: VxeTableEvents.CellClick = async ({ row }) => {
- tableTypeSelect.value = true
- queryParams.dictType = row['type']
- await nextTick()
- await dataGetList()
- parentType.value = row['type']
-}
-// 弹出框
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const actionLoading = ref(false) // 遮罩层
-const typeFormRef = ref<FormExpose>() // 分类表单 Ref
-const dataFormRef = ref<FormExpose>() // 数据表单 Ref
-const actionType = ref('') // 操作按钮的类型
-
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
-
-// 同步dictTypeValue到form 否则导致表单验证不通过
-watch(dictTypeValue, (val) => {
- unref(typeFormRef)?.setValues({ type: val })
-})
-
-// 提交按钮
-const submitTypeForm = async () => {
- const elForm = unref(typeFormRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid && dictTypeValue.value != '') {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(typeFormRef)?.formModel as DictTypeVO
- if (actionType.value === 'typeCreate') {
- data.type = dictTypeValue.value
- await DictTypeApi.createDictTypeApi(data)
- message.success(t('common.createSuccess'))
- } else if (actionType.value === 'typeUpdate') {
- await DictTypeApi.updateDictTypeApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- typeGetList()
- }
- }
- })
-}
-const submitDataForm = async () => {
- const elForm = unref(dataFormRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(dataFormRef)?.formModel as DictDataVO
- if (actionType.value === 'dataCreate') {
- data.dictType = parentType.value
- await DictDataApi.createDictDataApi(data)
- message.success(t('common.createSuccess'))
- } else if (actionType.value === 'dataUpdate') {
- await DictDataApi.updateDictDataApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- dataGetList()
- }
- }
- })
-}
</script>
diff --git a/src/views/system/errorCode/errorCode.data.ts b/src/views/system/errorCode/errorCode.data.ts
deleted file mode 100644
index 4736068b..00000000
--- a/src/views/system/errorCode/errorCode.data.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
- applicationName: [required],
- code: [required],
- message: [required]
-})
-
-// 新增 + 修改
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'id',
- primaryTitle: '编号',
- action: true,
- columns: [
- {
- title: '错误码类型',
- field: 'type',
- dictType: DICT_TYPE.SYSTEM_ERROR_CODE_TYPE,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '应用名',
- field: 'applicationName',
- isSearch: true
- },
- {
- title: '错误码编码',
- field: 'code',
- isSearch: true
- },
- {
- title: '错误码错误提示',
- field: 'message',
- isSearch: true
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/errorCode/form.vue b/src/views/system/errorCode/form.vue
new file mode 100644
index 00000000..f261ced1
--- /dev/null
+++ b/src/views/system/errorCode/form.vue
@@ -0,0 +1,110 @@
+<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="applicationName">
+ <el-input v-model="formData.applicationName" placeholder="请输入应用名" clearable />
+ </el-form-item>
+ <el-form-item label="错误码编码" prop="code">
+ <el-input v-model="formData.code" placeholder="请输入错误码编码" clearable />
+ </el-form-item>
+ <el-form-item label="错误码提示" prop="message">
+ <el-input v-model="formData.message" placeholder="请输入错误码提示" clearable />
+ </el-form-item>
+ <el-form-item label="备注" prop="memo">
+ <el-input v-model="formData.memo" placeholder="请输入备注" clearable />
+ </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 ErrorCodeApi from '@/api/system/errorCode'
+
+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,
+ code: undefined,
+ applicationName: '',
+ message: '',
+ memo: ''
+})
+// 表单校验
+const formRules = reactive({
+ applicationName: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
+ code: [{ required: true, message: '错误码编码不能为空', trigger: 'blur' }],
+ message: [{ required: true, message: '错误码提示不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = 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 ErrorCodeApi.getErrorCodeApi(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+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 ErrorCodeApi.ErrorCodeVO
+ if (formType.value === 'create') {
+ await ErrorCodeApi.createErrorCodeApi(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await ErrorCodeApi.updateErrorCodeApi(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 表单重置 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ applicationName: '',
+ code: undefined,
+ message: '',
+ memo: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/errorCode/index.vue b/src/views/system/errorCode/index.vue
index 1ff3d103..e94b00f0 100644
--- a/src/views/system/errorCode/index.vue
+++ b/src/views/system/errorCode/index.vue
@@ -1,145 +1,228 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <!-- 操作：新增 -->
- <template #toolbar_buttons>
- <XButton
+ <!-- 搜索工作栏 -->
+ <content-wrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="90px"
+ >
+ <el-form-item label="错误码类型" prop="type">
+ <el-select v-model="queryParams.type" placeholder="请选择错误码类型" clearable>
+ <el-option
+ v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_ERROR_CODE_TYPE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ class="!w-240px"
+ />
+ </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="code">
+ <el-input
+ v-model="queryParams.code"
+ placeholder="请输入错误码编码"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="错误码提示" prop="message">
+ <el-input
+ v-model="queryParams.message"
+ placeholder="请输入错误码提示"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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>
+ <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"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
+ @click="openModal('create')"
v-hasPermi="['system:error-code:create']"
- @click="handleCreate()"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:error-code:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:error-code:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:error-code:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <!-- 弹窗 -->
- <XModal id="errorCodeModel" v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- ref="formRef"
- />
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['system:error-code: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="type" width="80">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.SYSTEM_ERROR_CODE_TYPE" :value="scope.row.type" />
+ </template>
+ </el-table-column>
+ <el-table-column label="应用名" align="center" prop="applicationName" width="200" />
+ <el-table-column label="错误码编码" align="center" prop="code" width="120" />
+ <el-table-column label="错误码提示" align="center" prop="message" width="300" />
+ <el-table-column label="备注" align="center" prop="memo" width="200" />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
/>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ <el-table-column label="操作" align="center" class-name="small-paddingfixed-width">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openModal('update', scope.row.id)"
+ v-hasPermi="['system:error-code:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:error-code: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>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <error-code-form ref="modalRef" @success="getList" />
</template>
+
<script setup lang="ts" name="ErrorCode">
-import type { FormExpose } from '@/components/Form'
-// 业务相关的 import
-import { rules, allSchemas } from './errorCode.data'
import * as ErrorCodeApi from '@/api/system/errorCode'
-
-const { t } = useI18n() // 国际化
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import ErrorCodeForm from './form.vue'
+import download from '@/utils/download'
const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- getListApi: ErrorCodeApi.getErrorCodePageApi,
- deleteApi: ErrorCodeApi.deleteErrorCodeApi
+const { t } = useI18n() // 国际化
+
+// 遮罩层
+const loading = ref(true)
+// 导出遮罩层
+const exportLoading = ref(false)
+// 总条数
+const total = ref(0)
+// 错误码列表
+const list = ref([])
+// 查询参数
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ type: undefined,
+ applicationName: undefined,
+ code: undefined,
+ message: undefined,
+ createTime: []
})
-// 弹窗相关的变量
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
+// 搜索的表单
+const queryFormRef = ref()
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ // 执行查询
+ try {
+ const data = await ErrorCodeApi.getErrorCodePageApi(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
}
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await ErrorCodeApi.getErrorCodeApi(rowId)
- unref(formRef)?.setValues(res)
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
}
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- // 设置数据
- const res = await ErrorCodeApi.getErrorCodeApi(rowId)
- detailData.value = res
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+ modalRef.value.openModal(type, id)
}
-// 提交新增/修改的表单
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as ErrorCodeApi.ErrorCodeVO
- if (actionType.value === 'create') {
- await ErrorCodeApi.createErrorCodeApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await ErrorCodeApi.updateErrorCodeApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ await ErrorCodeApi.deleteErrorCodeApi(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await ErrorCodeApi.excelErrorCodeApi(queryParams)
+ download.excel(data, '错误码.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/system/loginlog/LoginLogDetail.vue b/src/views/system/loginlog/LoginLogDetail.vue
new file mode 100644
index 00000000..f0890eca
--- /dev/null
+++ b/src/views/system/loginlog/LoginLogDetail.vue
@@ -0,0 +1,49 @@
+<template>
+ <Dialog title="详情" v-model="modelVisible" width="800">
+ <el-descriptions border :column="1">
+ <el-descriptions-item label="日志编号" min-width="120">
+ {{ detailData.id }}
+ </el-descriptions-item>
+ <el-descriptions-item label="操作类型">
+ <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="detailData.logType" />
+ </el-descriptions-item>
+ <el-descriptions-item label="用户名称">
+ {{ detailData.username }}
+ </el-descriptions-item>
+ <el-descriptions-item label="登录地址">
+ {{ detailData.userIp }}
+ </el-descriptions-item>
+ <el-descriptions-item label="浏览器">
+ {{ detailData.userAgent }}
+ </el-descriptions-item>
+ <el-descriptions-item label="登陆结果">
+ <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="detailData.result" />
+ </el-descriptions-item>
+ <el-descriptions-item label="登录日期">
+ {{ formatDate(detailData.createTime) }}
+ </el-descriptions-item>
+ </el-descriptions>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as LoginLogApi from '@/api/system/loginLog'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const open = async (data: LoginLogApi.LoginLogVO) => {
+ modelVisible.value = true
+ // 设置数据
+ detailLoading.value = true
+ try {
+ detailData.value = data
+ } finally {
+ detailLoading.value = false
+ }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/src/views/system/loginlog/index.vue b/src/views/system/loginlog/index.vue
index f2bb8c67..c48957a7 100644
--- a/src/views/system/loginlog/index.vue
+++ b/src/views/system/loginlog/index.vue
@@ -1,53 +1,175 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <!-- 操作：导出 -->
- <template #toolbar_buttons>
- <XButton
- type="warning"
- preIcon="ep:download"
- :title="t('action.export')"
- @click="exportList('登录列表.xls')"
+ <content-wrap>
+ <!-- 搜索工作栏 -->
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="用户名称" prop="username">
+ <el-input
+ v-model="queryParams.username"
+ placeholder="请输入用户名称"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
/>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：详情 -->
- <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
- </template>
- </XTable>
- </ContentWrap>
- <!-- 弹窗 -->
- <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
- <!-- 表单：详情 -->
- <Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
- <template #footer>
- <!-- 按钮：关闭 -->
- <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ </el-form-item>
+ <el-form-item label="登录地址" prop="userIp">
+ <el-input
+ v-model="queryParams.userIp"
+ placeholder="请输入登录地址"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="登录日期" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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>
+ <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:config: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="logType">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
+ </template>
+ </el-table-column>
+ <el-table-column label="用户名称" align="center" prop="username" width="180" />
+ <el-table-column label="登录地址" align="center" prop="userIp" width="180" />
+ <el-table-column label="浏览器" align="center" prop="userAgent" />
+ <el-table-column label="登陆结果" align="center" prop="result">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="scope.row.result" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="登录日期"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openDetail(scope.row)"
+ v-hasPermi="['infra:config: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>
+
+ <!-- 表单弹窗：详情 -->
+ <LoginLogDetail ref="detailRef" />
</template>
-<script setup lang="ts" name="Loginlog">
-// 业务相关的 import
-import { allSchemas } from './loginLog.data'
-import { getLoginLogPageApi, exportLoginLogApi, LoginLogVO } from '@/api/system/loginLog'
+<script setup lang="ts" name="LoginLog">
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as LoginLogApi from '@/api/system/loginLog'
+import LoginLogDetail from './LoginLogDetail.vue'
+const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-// 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
- allSchemas: allSchemas,
- getListApi: getLoginLogPageApi,
- exportListApi: exportLoginLogApi
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ username: undefined,
+ userIp: undefined,
+ createTime: []
})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
-// 详情操作
-const detailData = ref() // 详情 Ref
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref(t('action.detail')) // 弹出层标题
-// 详情
-const handleDetail = async (row: LoginLogVO) => {
- // 设置数据
- detailData.value = row
- dialogVisible.value = true
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await LoginLogApi.getLoginLogPage(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: LoginLogApi.LoginLogVO) => {
+ detailRef.value.open(data)
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await LoginLogApi.exportLoginLog(queryParams)
+ download.excel(data, '登录日志.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/system/loginlog/loginLog.data.ts b/src/views/system/loginlog/loginLog.data.ts
deleted file mode 100644
index c0a51fbe..00000000
--- a/src/views/system/loginlog/loginLog.data.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'id',
- primaryTitle: '日志编号',
- action: true,
- actionWidth: '100px',
- columns: [
- {
- title: '日志类型',
- field: 'logType',
- dictType: DICT_TYPE.SYSTEM_LOGIN_TYPE,
- dictClass: 'number'
- },
- {
- title: '用户名称',
- field: 'username',
- isSearch: true
- },
- {
- title: '登录地址',
- field: 'userIp',
- isSearch: true
- },
- {
- title: '浏览器',
- field: 'userAgent'
- },
- {
- title: '登陆结果',
- field: 'result',
- dictType: DICT_TYPE.SYSTEM_LOGIN_RESULT,
- dictClass: 'number'
- },
- {
- title: '登录日期',
- field: 'createTime',
- formatter: 'formatDate',
- table: {
- width: 150
- },
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/mail/account/account.data.ts b/src/views/system/mail/account/account.data.ts
index bd05ce4f..f01c39f2 100644
--- a/src/views/system/mail/account/account.data.ts
+++ b/src/views/system/mail/account/account.data.ts
@@ -1,10 +1,10 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+import { dateFormatter } from '@/utils/formatTime'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
- // mail: [required],
mail: [
{ required: true, message: t('profile.rules.mail'), trigger: 'blur' },
{
@@ -20,56 +20,54 @@ export const rules = reactive({
sslEnable: [required]
})
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id', // 默认的主键 ID
- primaryTitle: '编号',
- primaryType: 'id',
- action: true,
- actionWidth: '200', // 3 个按钮默认 200，如有删减对应增减即可
- columns: [
- {
- title: '邮箱',
- field: 'mail',
- isSearch: true
- },
- {
- title: '用户名',
- field: 'username',
- isSearch: true
- },
- {
- title: '密码',
- field: 'password',
- isTable: false
- },
- {
- title: 'SMTP 服务器域名',
- field: 'host'
- },
- {
- title: 'SMTP 服务器端口',
- field: 'port',
- form: {
- component: 'InputNumber',
- value: 465
- }
- },
- {
- title: '是否开启 SSL',
- field: 'sslEnable',
- dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
- dictClass: 'boolean'
- },
- {
- title: '创建时间',
- field: 'createTime',
- isForm: false,
- formatter: 'formatDate',
- table: {
- width: 180
- }
+// CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
+const crudSchemas = reactive<CrudSchema[]>([
+ {
+ label: '邮箱',
+ field: 'mail',
+ isSearch: true
+ },
+ {
+ label: '用户名',
+ field: 'username',
+ isSearch: true
+ },
+ {
+ label: '密码',
+ field: 'password',
+ isTable: false
+ },
+ {
+ label: 'SMTP 服务器域名',
+ field: 'host'
+ },
+ {
+ label: 'SMTP 服务器端口',
+ field: 'port',
+ form: {
+ component: 'InputNumber',
+ value: 465
}
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
+ },
+ {
+ label: '是否开启 SSL',
+ field: 'sslEnable',
+ dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
+ dictClass: 'boolean',
+ form: {
+ component: 'Radio'
+ }
+ },
+ {
+ label: '创建时间',
+ field: 'createTime',
+ isForm: false,
+ formatter: dateFormatter
+ },
+ {
+ label: '操作',
+ field: 'action',
+ isForm: false
+ }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/src/views/system/mail/account/form.vue b/src/views/system/mail/account/form.vue
new file mode 100644
index 00000000..78d7cf0d
--- /dev/null
+++ b/src/views/system/mail/account/form.vue
@@ -0,0 +1,66 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules" v-loading="formLoading" />
+ <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 MailAccountApi from '@/api/system/mail/account'
+import { rules, allSchemas } from './account.data'
+
+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 formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = async (type: string, id?: number) => {
+ modelVisible.value = true
+ modelTitle.value = t('action.' + type)
+ formType.value = type
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ const data = await MailAccountApi.getMailAccount(id)
+ formRef.value.setValues(data)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.getElFormRef().validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formRef.value.formModel as MailAccountApi.MailAccountVO
+ if (formType.value === 'create') {
+ await MailAccountApi.createMailAccount(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await MailAccountApi.updateMailAccount(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+</script>
diff --git a/src/views/system/mail/account/index.vue b/src/views/system/mail/account/index.vue
index 7c4ad0f9..1f80684f 100644
--- a/src/views/system/mail/account/index.vue
+++ b/src/views/system/mail/account/index.vue
@@ -1,151 +1,84 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
+ <!-- 搜索工作栏 -->
+ <content-wrap>
+ <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams">
+ <!-- 新增等操作按钮 -->
+ <template #actionMore>
+ <el-button
type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
+ @click="openModal('create')"
v-hasPermi="['system:mail-account:create']"
- @click="handleCreate()"
- />
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
</template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
+ </Search>
+ </content-wrap>
+
+ <!-- 列表 -->
+ <content-wrap>
+ <Table
+ :columns="allSchemas.tableColumns"
+ :data="tableObject.tableList"
+ :loading="tableObject.loading"
+ :pagination="{
+ total: tableObject.total
+ }"
+ v-model:pageSize="tableObject.pageSize"
+ v-model:currentPage="tableObject.currentPage"
+ >
+ <template #action="{ row }">
+ <el-button
+ link
+ type="primary"
+ @click="openModal('update', row.id)"
v-hasPermi="['system:mail-account:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:mail-account:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
v-hasPermi="['system:mail-account:delete']"
- @click="deleteData(row.id)"
- />
+ @click="handleDelete(row.id)"
+ >
+ 删除
+ </el-button>
</template>
- </XTable>
- </ContentWrap>
- <!-- 弹窗 -->
- <XModal id="mailAccountModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
- <!-- 表单：添加/修改 -->
- <Form
- ref="formRef"
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- />
- <!-- 表单：详情 -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
- />
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
- </template>
- </XModal>
+ </Table>
+ </content-wrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <mail-account-form ref="modalRef" @success="getList" />
</template>
<script setup lang="ts" name="MailAccount">
-import { FormExpose } from '@/components/Form'
-// 业务相关的 import
-import { rules, allSchemas } from './account.data'
+import { allSchemas } from './account.data'
import * as MailAccountApi from '@/api/system/mail/account'
+import MailAccountForm from './form.vue'
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- getListApi: MailAccountApi.getMailAccountPageApi,
- deleteApi: MailAccountApi.deleteMailAccountApi
+// tableObject：表格的属性对象，可获得分页大小、条数等属性
+// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
+// 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
+const { tableObject, tableMethods } = useTable({
+ getListApi: MailAccountApi.getMailAccountPage, // 分页接口
+ delListApi: MailAccountApi.deleteMailAccount // 删除接口
})
+// 获得表格的各种操作
+const { getList, setSearchParams } = tableMethods
-// 弹窗相关的变量
-const modelVisible = ref(false) // 是否显示弹出层
-const modelTitle = ref('edit') // 弹出层标题
-const modelLoading = ref(false) // 弹出层loading
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
- modelLoading.value = true
- modelTitle.value = t('action.' + type)
- actionType.value = type
- modelVisible.value = true
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+ modalRef.value.openModal(type, id)
}
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
- modelLoading.value = false
+/** 删除按钮操作 */
+const handleDelete = (id: number) => {
+ tableMethods.delList(id, false)
}
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await MailAccountApi.getMailAccountApi(rowId)
- unref(formRef)?.setValues(res)
- modelLoading.value = false
-}
-
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- const res = await MailAccountApi.getMailAccountApi(rowId)
- detailData.value = res
- modelLoading.value = false
-}
-
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as MailAccountApi.MailAccountVO
- if (actionType.value === 'create') {
- await MailAccountApi.createMailAccountApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await MailAccountApi.updateMailAccountApi(data)
- message.success(t('common.updateSuccess'))
- }
- modelVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
-}
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/system/mail/log/detail.vue b/src/views/system/mail/log/detail.vue
new file mode 100644
index 00000000..1795f751
--- /dev/null
+++ b/src/views/system/mail/log/detail.vue
@@ -0,0 +1,31 @@
+<template>
+ <Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500">
+ <Descriptions :schema="allSchemas.detailSchema" :data="detailData">
+ <!-- 展示 HTML 内容 -->
+ <template #templateContent="{ row }">
+ <div v-html="row.templateContent"></div>
+ </template>
+ </Descriptions>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import * as MailLogApi from '@/api/system/mail/log'
+import { allSchemas } from './log.data'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const openModal = async (id: number) => {
+ modelVisible.value = true
+ // 设置数据
+ detailLoading.value = true
+ try {
+ detailData.value = await MailLogApi.getMailLog(id)
+ } finally {
+ detailLoading.value = false
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+</script>
diff --git a/src/views/system/mail/log/index.vue b/src/views/system/mail/log/index.vue
index e147c52c..5373b71d 100644
--- a/src/views/system/mail/log/index.vue
+++ b/src/views/system/mail/log/index.vue
@@ -1,98 +1,59 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #accountId_search>
- <el-select v-model="queryParams.accountId">
- <el-option :key="undefined" label="全部" :value="undefined" />
- <el-option
- v-for="item in accountOptions"
- :key="item.id"
- :label="item.mail"
- :value="item.id"
- />
- </el-select>
- </template>
- <template #toMail_default="{ row }">
- <div>{{ row.toMail }}</div>
- <div v-if="row.userType && row.userId">
- <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />{{ '(' + row.userId + ')' }}
- </div>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
+ <!-- 搜索工作栏 -->
+ <content-wrap>
+ <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
+ </content-wrap>
+
+ <!-- 列表 -->
+ <content-wrap>
+ <Table
+ :columns="allSchemas.tableColumns"
+ :data="tableObject.tableList"
+ :loading="tableObject.loading"
+ :pagination="{
+ total: tableObject.total
+ }"
+ v-model:pageSize="tableObject.pageSize"
+ v-model:currentPage="tableObject.currentPage"
+ >
+ <template #action="{ row }">
+ <el-button
+ link
+ type="primary"
+ @click="openModal(row.id)"
v-hasPermi="['system:mail-log:query']"
- @click="handleDetail(row.id)"
- />
+ >
+ 详情
+ </el-button>
</template>
- </XTable>
- </ContentWrap>
- <!-- 弹窗 -->
- <XModal id="mailLogModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
- <!-- 表单：详情 -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <template #footer>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
- </template>
- </XModal>
+ </Table>
+ </content-wrap>
+
+ <!-- 表单弹窗：详情 -->
+ <mail-log-detail ref="modalRef" />
</template>
<script setup lang="ts" name="MailLog">
-// 业务相关的 import
-import { DICT_TYPE } from '@/utils/dict'
import { allSchemas } from './log.data'
import * as MailLogApi from '@/api/system/mail/log'
-import * as MailAccountApi from '@/api/system/mail/account'
+import MailLogDetail from './detail.vue'
-const { t } = useI18n() // 国际化
-
-// 列表相关的变量
-const queryParams = reactive({
- accountId: null
+// tableObject：表格的属性对象，可获得分页大小、条数等属性
+// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
+// 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
+const { tableObject, tableMethods } = useTable({
+ getListApi: MailLogApi.getMailLogPage // 分页接口
})
-const [registerTable] = useXTable({
- allSchemas: allSchemas,
- topActionSlots: false,
- params: queryParams,
- getListApi: MailLogApi.getMailLogPageApi
-})
-const accountOptions = ref<any[]>([]) // 账号下拉选项
+// 获得表格的各种操作
+const { getList, setSearchParams } = tableMethods
-// 弹窗相关的变量
-const modelVisible = ref(false) // 是否显示弹出层
-const modelTitle = ref('edit') // 弹出层标题
-const modelLoading = ref(false) // 弹出层loading
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
- modelLoading.value = true
- modelTitle.value = t('action.' + type)
- actionType.value = type
- modelVisible.value = true
+/** 详情操作 */
+const modalRef = ref()
+const openModal = (id: number) => {
+ modalRef.value.openModal(id)
}
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- const res = await MailLogApi.getMailLogApi(rowId)
- detailData.value = res
- modelLoading.value = false
-}
-
-// ========== 初始化 ==========
+/** 初始化 **/
onMounted(() => {
- MailAccountApi.getSimpleMailAccounts().then((data) => {
- accountOptions.value = data
- })
+ getList()
})
</script>
diff --git a/src/views/system/mail/log/log.data.ts b/src/views/system/mail/log/log.data.ts
index f01cb549..8ea96926 100644
--- a/src/views/system/mail/log/log.data.ts
+++ b/src/views/system/mail/log/log.data.ts
@@ -1,122 +1,133 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+import { dateFormatter } from '@/utils/formatTime'
+import * as MailAccountApi from '@/api/system/mail/account'
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryTitle: '编号',
- primaryType: 'id',
- action: true,
- actionWidth: '70',
- columns: [
- {
- title: '发送时间',
- field: 'sendTime',
- table: {
- width: 180
- },
- formatter: 'formatDate',
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
+// 邮箱账号的列表
+const accounts = await MailAccountApi.getSimpleMailAccountList()
+
+// CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
+const crudSchemas = reactive<CrudSchema[]>([
+ {
+ label: '编号',
+ field: 'id'
+ },
+ {
+ label: '发送时间',
+ field: 'sendTime',
+ formatter: dateFormatter,
+ search: {
+ show: true,
+ component: 'DatePicker',
+ componentProps: {
+ valueFormat: 'YYYY-MM-DD HH:mm:ss',
+ type: 'daterange',
+ defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
}
},
- {
- title: '接收邮箱',
- field: 'toMail',
- isSearch: true,
- table: {
- width: 180,
- slots: {
- default: 'toMail_default'
- }
- }
- },
- {
- title: '用户编号',
- field: 'userId',
- isSearch: true,
- isTable: false
- },
- {
- title: '用户类型',
- field: 'userType',
- dictType: DICT_TYPE.USER_TYPE,
- dictClass: 'number',
- isSearch: true,
- isTable: false
- },
- {
- title: '邮件标题',
- field: 'templateTitle'
- },
- {
- title: '邮件内容',
- field: 'templateContent',
- isTable: false
- },
- {
- title: '邮箱参数',
- field: 'templateParams',
- isTable: false
- },
- {
- title: '发送状态',
- field: 'sendStatus',
- dictType: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
- dictClass: 'string',
- isSearch: true
- },
- {
- title: '邮箱账号',
- field: 'accountId',
- isSearch: true,
- isTable: false,
- search: {
- slots: {
- default: 'accountId_search'
- }
- }
- },
- {
- title: '发送邮箱地址',
- field: 'fromMail',
- table: {
- title: '邮箱账号'
- }
- },
- {
- title: '模板编号',
- field: 'templateId',
- isSearch: true
- },
- {
- title: '模板编码',
- field: 'templateCode',
- isTable: false
- },
- {
- title: '模版发送人名称',
- field: 'templateNickname',
- isTable: false
- },
- {
- title: '发送返回的消息编号',
- field: 'sendMessageId',
- isTable: false
- },
- {
- title: '发送异常',
- field: 'sendException',
- isTable: false
- },
- {
- title: '创建时间',
- field: 'createTime',
- isTable: false,
- formatter: 'formatDate'
+ detail: {
+ dateFormat: 'YYYY-MM-DD HH:mm:ss'
}
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
+ },
+ {
+ label: '接收邮箱',
+ field: 'toMail'
+ },
+ {
+ label: '用户编号',
+ field: 'userId',
+ isSearch: true,
+ isTable: false
+ },
+ {
+ label: '用户类型',
+ field: 'userType',
+ dictType: DICT_TYPE.USER_TYPE,
+ dictClass: 'number',
+ isSearch: true,
+ isTable: false
+ },
+ {
+ label: '邮件标题',
+ field: 'templateTitle'
+ },
+ {
+ label: '邮件内容',
+ field: 'templateContent',
+ isTable: false
+ },
+ {
+ label: '邮箱参数',
+ field: 'templateParams',
+ isTable: false
+ },
+ {
+ label: '发送状态',
+ field: 'sendStatus',
+ dictType: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
+ dictClass: 'string',
+ isSearch: true
+ },
+ {
+ label: '邮箱账号',
+ field: 'accountId',
+ isTable: false,
+ search: {
+ show: true,
+ component: 'Select',
+ api: () => accounts,
+ componentProps: {
+ optionsAlias: {
+ labelField: 'mail',
+ valueField: 'id'
+ }
+ }
+ }
+ },
+ {
+ label: '发送邮箱地址',
+ field: 'fromMail',
+ table: {
+ label: '邮箱账号'
+ }
+ },
+ {
+ label: '模板编号',
+ field: 'templateId',
+ isSearch: true
+ },
+ {
+ label: '模板编码',
+ field: 'templateCode',
+ isTable: false
+ },
+ {
+ label: '模版发送人名称',
+ field: 'templateNickname',
+ isTable: false
+ },
+ {
+ label: '发送返回的消息编号',
+ field: 'sendMessageId',
+ isTable: false
+ },
+ {
+ label: '发送异常',
+ field: 'sendException',
+ isTable: false
+ },
+ {
+ label: '创建时间',
+ field: 'createTime',
+ isTable: false,
+ formatter: dateFormatter,
+ detail: {
+ dateFormat: 'YYYY-MM-DD HH:mm:ss'
+ }
+ },
+ {
+ label: '操作',
+ field: 'action',
+ isDetail: false
+ }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/src/views/system/mail/template/form.vue b/src/views/system/mail/template/form.vue
new file mode 100644
index 00000000..92f3c5c1
--- /dev/null
+++ b/src/views/system/mail/template/form.vue
@@ -0,0 +1,66 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible" :scroll="true" :width="800" :max-height="500">
+ <Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules" v-loading="formLoading" />
+ <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 MailTemplateApi from '@/api/system/mail/template'
+import { rules, allSchemas } from './template.data'
+
+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 formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = async (type: string, id?: number) => {
+ modelVisible.value = true
+ modelTitle.value = t('action.' + type)
+ formType.value = type
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ const data = await MailTemplateApi.getMailTemplate(id)
+ formRef.value.setValues(data)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.getElFormRef().validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formRef.value.formModel as MailTemplateApi.MailTemplateVO
+ if (formType.value === 'create') {
+ await MailTemplateApi.createMailTemplate(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await MailTemplateApi.updateMailTemplate(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+</script>
diff --git a/src/views/system/mail/template/index.vue b/src/views/system/mail/template/index.vue
index cb4a7e5d..b9a5040b 100644
--- a/src/views/system/mail/template/index.vue
+++ b/src/views/system/mail/template/index.vue
@@ -1,273 +1,102 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #accountId_search>
- <el-select v-model="queryParams.accountId">
- <el-option :key="undefined" label="全部" :value="undefined" />
- <el-option
- v-for="item in accountOptions"
- :key="item.id"
- :label="item.mail"
- :value="item.id"
- />
- </el-select>
- </template>
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
+ <!-- 搜索工作栏 -->
+ <content-wrap>
+ <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams">
+ <!-- 新增等操作按钮 -->
+ <template #actionMore>
+ <el-button
type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:mail-template:create']"
- @click="handleCreate()"
- />
+ @click="openModal('create')"
+ v-hasPermi="['system:mail-account:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
</template>
- <template #accountId_default="{ row }">
- <span>{{ accountOptions.find((account) => account.id === row.accountId)?.mail }}</span>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：测试短信 -->
- <XTextButton
- preIcon="ep:cpu"
- :title="t('action.test')"
- v-hasPermi="['system:mail-template:send-mail']"
- @click="handleSendMail(row)"
- />
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:mail-template:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:mail-template:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:mail-template:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
+ </Search>
+ </content-wrap>
- <!-- 添加/修改/详情的弹窗 -->
- <XModal id="mailTemplateModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
- <!-- 表单：添加/修改 -->
- <Form
- ref="formRef"
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
+ <!-- 列表 -->
+ <content-wrap>
+ <Table
+ :columns="allSchemas.tableColumns"
+ :data="tableObject.tableList"
+ :loading="tableObject.loading"
+ :pagination="{
+ total: tableObject.total
+ }"
+ v-model:pageSize="tableObject.pageSize"
+ v-model:currentPage="tableObject.currentPage"
>
- <template #accountId="form">
- <el-select v-model="form.accountId">
- <el-option
- v-for="item in accountOptions"
- :key="item.id"
- :label="item.mail"
- :value="item.id"
- />
- </el-select>
+ <template #action="{ row }">
+ <el-button
+ link
+ type="primary"
+ @click="openSend(row.id)"
+ v-hasPermi="['system:mail-template:send-mail']"
+ >
+ 测试
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="openModal('update', row.id)"
+ v-hasPermi="['system:mail-template:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ v-hasPermi="['system:mail-template:delete']"
+ @click="handleDelete(row.id)"
+ >
+ 删除
+ </el-button>
</template>
- </Form>
- <!-- 表单：详情 -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
- />
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
- </template>
- </XModal>
+ </Table>
+ </content-wrap>
- <!-- 测试邮件的弹窗 -->
- <XModal id="sendTest" v-model="sendVisible" title="测试">
- <el-form :model="sendForm" :rules="sendRules" label-width="200px" label-position="top">
- <el-form-item label="模板内容" prop="content">
- <Editor :model-value="sendForm.content" readonly height="150px" />
- </el-form-item>
- <el-form-item label="收件邮箱" prop="mail">
- <el-input v-model="sendForm.mail" placeholder="请输入收件邮箱" />
- </el-form-item>
- <el-form-item
- v-for="param in sendForm.params"
- :key="param"
- :label="'参数 {' + param + '}'"
- :prop="'templateParams.' + param"
- >
- <el-input
- v-model="sendForm.templateParams[param]"
- :placeholder="'请输入 ' + param + ' 参数'"
- />
- </el-form-item>
- </el-form>
- <!-- 操作按钮 -->
- <template #footer>
- <XButton
- type="primary"
- :title="t('action.test')"
- :loading="actionLoading"
- @click="sendTest()"
- />
- <XButton :title="t('dialog.close')" @click="sendVisible = false" />
- </template>
- </XModal>
+ <!-- 表单弹窗：添加/修改 -->
+ <mail-template-form ref="modalRef" @success="getList" />
+
+ <!-- 表单弹窗：发送测试 -->
+ <mail-template-send ref="sendRef" />
</template>
<script setup lang="ts" name="MailTemplate">
-import { FormExpose } from '@/components/Form'
-// 业务相关的 import
-import { rules, allSchemas } from './template.data'
+import { allSchemas } from './template.data'
import * as MailTemplateApi from '@/api/system/mail/template'
-import * as MailAccountApi from '@/api/system/mail/account'
+import MailTemplateForm from './form.vue'
+import MailTemplateSend from './send.vue'
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-// 列表相关的变量
-const queryParams = reactive({
- accountId: null
+// tableObject：表格的属性对象，可获得分页大小、条数等属性
+// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
+// 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
+const { tableObject, tableMethods } = useTable({
+ getListApi: MailTemplateApi.getMailTemplatePage, // 分页接口
+ delListApi: MailTemplateApi.deleteMailTemplate // 删除接口
})
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- params: queryParams,
- getListApi: MailTemplateApi.getMailTemplatePageApi,
- deleteApi: MailTemplateApi.deleteMailTemplateApi
-})
-const accountOptions = ref<any[]>([]) // 账号下拉选项
+// 获得表格的各种操作
+const { getList, setSearchParams } = tableMethods
-// 弹窗相关的变量
-const modelVisible = ref(false) // 是否显示弹出层
-const modelTitle = ref('edit') // 弹出层标题
-const modelLoading = ref(false) // 弹出层loading
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
- modelLoading.value = true
- modelTitle.value = t('action.' + type)
- actionType.value = type
- modelVisible.value = true
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+ modalRef.value.openModal(type, id)
}
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
- modelLoading.value = false
+/** 删除按钮操作 */
+const handleDelete = (id: number) => {
+ tableMethods.delList(id, false)
}
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await MailTemplateApi.getMailTemplateApi(rowId)
- unref(formRef)?.setValues(res)
- modelLoading.value = false
+/** 发送测试操作 */
+const sendRef = ref()
+const openSend = (id: number) => {
+ sendRef.value.openModal(id)
}
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- const res = await MailTemplateApi.getMailTemplateApi(rowId)
- detailData.value = res
- modelLoading.value = false
-}
-
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as MailTemplateApi.MailTemplateVO
- if (actionType.value === 'create') {
- await MailTemplateApi.createMailTemplateApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await MailTemplateApi.updateMailTemplateApi(data)
- message.success(t('common.updateSuccess'))
- }
- modelVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
-}
-
-// ========== 测试相关 ==========
-const sendForm = ref({
- content: '',
- params: {},
- mail: '',
- templateCode: '',
- templateParams: {}
-})
-const sendRules = ref({
- mail: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
- templateCode: [{ required: true, message: '模版编号不能为空', trigger: 'blur' }],
- templateParams: {}
-})
-const sendVisible = ref(false)
-
-const handleSendMail = (row: any) => {
- sendForm.value.content = row.content
- sendForm.value.params = row.params
- sendForm.value.templateCode = row.code
- sendForm.value.templateParams = row.params.reduce(function (obj, item) {
- obj[item] = undefined
- return obj
- }, {})
- sendRules.value.templateParams = row.params.reduce(function (obj, item) {
- obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'change' }
- return obj
- }, {})
- sendVisible.value = true
-}
-
-const sendTest = async () => {
- const data: MailTemplateApi.MailSendReqVO = {
- mail: sendForm.value.mail,
- templateCode: sendForm.value.templateCode,
- templateParams: sendForm.value.templateParams as unknown as Map<string, Object>
- }
- const res = await MailTemplateApi.sendMailApi(data)
- if (res) {
- message.success('提交发送成功！发送结果，见发送日志编号：' + res)
- }
- sendVisible.value = false
-}
-
-// ========== 初始化 ==========
+/** 初始化 **/
onMounted(() => {
- MailAccountApi.getSimpleMailAccounts().then((data) => {
- accountOptions.value = data
- })
+ getList()
})
</script>
diff --git a/src/views/system/mail/template/send.vue b/src/views/system/mail/template/send.vue
new file mode 100644
index 00000000..b4b411b9
--- /dev/null
+++ b/src/views/system/mail/template/send.vue
@@ -0,0 +1,113 @@
+<template>
+ <Dialog title="测试" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="120px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="模板内容" prop="content">
+ <Editor :model-value="formData.content" readonly height="150px" />
+ </el-form-item>
+ <el-form-item label="收件邮箱" prop="mail">
+ <el-input v-model="formData.mail" placeholder="请输入收件邮箱" />
+ </el-form-item>
+ <el-form-item
+ v-for="param in formData.params"
+ :key="param"
+ :label="'参数 {' + param + '}'"
+ :prop="'templateParams.' + param"
+ >
+ <el-input
+ v-model="formData.templateParams[param]"
+ :placeholder="'请输入 ' + param + ' 参数'"
+ />
+ </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 MailTemplateApi from '@/api/system/mail/template'
+
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+ content: '',
+ params: {},
+ mail: '',
+ templateCode: '',
+ templateParams: new Map()
+})
+const formRules = reactive({
+ mail: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
+ templateCode: [{ required: true, message: '模版编号不能为空', trigger: 'blur' }],
+ templateParams: {}
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = async (id: number) => {
+ modelVisible.value = true
+ resetForm()
+ // 设置数据
+ formLoading.value = true
+ try {
+ const data = await MailTemplateApi.getMailTemplate(id)
+ // 设置动态表单
+ formData.value.content = data.content
+ formData.value.params = data.params
+ formData.value.templateCode = data.code
+ formData.value.templateParams = data.params.reduce((obj, item) => {
+ obj[item] = '' // 给每个动态属性赋值，避免无法读取
+ return obj
+ }, {})
+ formRules.templateParams = data.params.reduce((obj, item) => {
+ obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'blur' }
+ return obj
+ }, {})
+ } finally {
+ formLoading.value = false
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formData.value as MailTemplateApi.MailSendReqVO
+ const logId = await MailTemplateApi.sendMail(data)
+ if (logId) {
+ message.success('提交发送成功！发送结果，见发送日志编号：' + logId)
+ }
+ modelVisible.value = false
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ content: '',
+ params: {},
+ mail: '',
+ templateCode: '',
+ templateParams: new Map()
+ }
+ formRules.templateParams = {}
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/mail/template/template.data.ts b/src/views/system/mail/template/template.data.ts
index 32522e33..ba76dc27 100644
--- a/src/views/system/mail/template/template.data.ts
+++ b/src/views/system/mail/template/template.data.ts
@@ -1,98 +1,113 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+import { dateFormatter } from '@/utils/formatTime'
+import { TableColumn } from '@/types/table'
+import * as MailAccountApi from '@/api/system/mail/account'
+
+// 邮箱账号的列表
+const accounts = await MailAccountApi.getSimpleMailAccountList()
// 表单校验
export const rules = reactive({
name: [required],
code: [required],
accountId: [required],
- title: [required],
+ label: [required],
content: [required],
params: [required],
status: [required]
})
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id', // 默认的主键ID
- primaryTitle: '编号', // 默认显示的值
- primaryType: null,
- action: true,
- actionWidth: '260',
- columns: [
- {
- title: '模板编码',
- field: 'code',
- isSearch: true
+// CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
+const crudSchemas = reactive<CrudSchema[]>([
+ {
+ label: '模板编码',
+ field: 'code',
+ isSearch: true
+ },
+ {
+ label: '模板名称',
+ field: 'name',
+ isSearch: true
+ },
+ {
+ label: '模板标题',
+ field: 'title'
+ },
+ {
+ label: '模板内容',
+ field: 'content',
+ form: {
+ component: 'Editor',
+ componentProps: {
+ valueHtml: '',
+ height: 200
+ }
+ }
+ },
+ {
+ label: '邮箱账号',
+ field: 'accountId',
+ width: '200px',
+ formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
+ return accounts.find((account) => account.id === cellValue)?.mail
},
- {
- title: '模板名称',
- field: 'name',
- isSearch: true
- },
- {
- title: '模板标题',
- field: 'title'
- },
- {
- title: '模板内容',
- field: 'content',
- form: {
- component: 'Editor',
- colProps: {
- span: 24
- },
- componentProps: {
- valueHtml: ''
+ search: {
+ show: true,
+ component: 'Select',
+ api: () => accounts,
+ componentProps: {
+ optionsAlias: {
+ labelField: 'mail',
+ valueField: 'id'
}
}
},
- {
- title: '邮箱账号',
- field: 'accountId',
- isSearch: true,
- table: {
- width: 200,
- slots: {
- default: 'accountId_default'
- }
- },
- search: {
- slots: {
- default: 'accountId_search'
- }
- }
- },
- {
- title: '发送人名称',
- field: 'nickname'
- },
- {
- title: '开启状态',
- field: 'status',
- isSearch: true,
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number'
- },
- {
- title: '备注',
- field: 'remark',
- isTable: false
- },
- {
- title: '创建时间',
- field: 'createTime',
- isForm: false,
- formatter: 'formatDate',
- table: {
- width: 180
- },
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
+ form: {
+ component: 'Select',
+ api: () => accounts,
+ componentProps: {
+ optionsAlias: {
+ labelField: 'mail',
+ valueField: 'id'
}
}
}
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
+ },
+ {
+ label: '发送人名称',
+ field: 'nickname'
+ },
+ {
+ label: '开启状态',
+ field: 'status',
+ isSearch: true,
+ dictType: DICT_TYPE.COMMON_STATUS,
+ dictClass: 'number'
+ },
+ {
+ label: '备注',
+ field: 'remark',
+ isTable: false
+ },
+ {
+ label: '创建时间',
+ field: 'createTime',
+ isForm: false,
+ formatter: dateFormatter,
+ search: {
+ show: true,
+ component: 'DatePicker',
+ componentProps: {
+ valueFormat: 'YYYY-MM-DD HH:mm:ss',
+ type: 'daterange',
+ defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
+ }
+ }
+ },
+ {
+ label: '操作',
+ field: 'action',
+ isForm: false
+ }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/src/views/system/menu/MenuForm.vue b/src/views/system/menu/MenuForm.vue
new file mode 100644
index 00000000..45bcedfb
--- /dev/null
+++ b/src/views/system/menu/MenuForm.vue
@@ -0,0 +1,253 @@
+<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="上级菜单">
+ <el-tree-select
+ node-key="id"
+ v-model="formData.parentId"
+ :props="defaultProps"
+ :data="menuTree"
+ :default-expanded-keys="[0]"
+ check-strictly
+ />
+ </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="type">
+ <el-radio-group v-model="formData.type">
+ <el-radio-button
+ v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
+ :key="dict.label"
+ :label="dict.value"
+ >
+ {{ dict.label }}
+ </el-radio-button>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="菜单图标" v-if="formData.type !== 3">
+ <IconSelect v-model="formData.icon" clearable />
+ </el-form-item>
+ <el-form-item label="路由地址" prop="path" v-if="formData.type !== 3">
+ <template #label>
+ <Tooltip
+ titel="路由地址"
+ message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
+ />
+ </template>
+ <el-input v-model="formData.path" placeholder="请输入路由地址" clearable />
+ </el-form-item>
+ <el-form-item label="组件地址" prop="component" v-if="formData.type === 2">
+ <el-input v-model="formData.component" placeholder="例如说：system/user/index" clearable />
+ </el-form-item>
+ <el-form-item label="组件名字" prop="componentName" v-if="formData.type === 2">
+ <el-input v-model="formData.componentName" placeholder="例如说：SystemUser" clearable />
+ </el-form-item>
+ <el-form-item label="权限标识" prop="permission" v-if="formData.type !== 1">
+ <template #label>
+ <Tooltip
+ titel="权限标识"
+ message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
+ />
+ </template>
+ <el-input v-model="formData.permission" placeholder="请输入权限标识" clearable />
+ </el-form-item>
+ <el-form-item label="显示排序" prop="sort">
+ <el-input-number v-model="formData.sort" controls-position="right" :min="0" clearable />
+ </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.label"
+ :label="dict.value"
+ >
+ {{ dict.label }}
+ </el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="显示状态" prop="visible" v-if="formData.type !== 3">
+ <template #label>
+ <Tooltip titel="显示状态" message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问" />
+ </template>
+ <el-radio-group v-model="formData.visible">
+ <el-radio border key="true" :label="true">显示</el-radio>
+ <el-radio border key="false" :label="false">隐藏</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="总是显示" prop="alwaysShow" v-if="formData.type !== 3">
+ <template #label>
+ <Tooltip
+ titel="总是显示"
+ message="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单"
+ />
+ </template>
+ <el-radio-group v-model="formData.alwaysShow">
+ <el-radio border key="true" :label="true">总是</el-radio>
+ <el-radio border key="false" :label="false">不是</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="缓存状态" prop="keepAlive" v-if="formData.type === 2">
+ <template #label>
+ <Tooltip
+ titel="缓存状态"
+ message="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段"
+ />
+ </template>
+ <el-radio-group v-model="formData.keepAlive">
+ <el-radio border key="true" :label="true">缓存</el-radio>
+ <el-radio border key="false" :label="false">不缓存</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 * as MenuApi from '@/api/system/menu'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
+import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
+import { handleTree, defaultProps } from '@/utils/tree'
+const { wsCache } = useCache()
+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: 0,
+ name: '',
+ permission: '',
+ type: SystemMenuTypeEnum.DIR,
+ sort: Number(undefined),
+ parentId: 0,
+ path: '',
+ icon: '',
+ component: '',
+ componentName: '',
+ status: CommonStatusEnum.ENABLE,
+ visible: true,
+ keepAlive: true,
+ alwaysShow: true
+})
+const formRules = reactive({
+ name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
+ sort: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
+ path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
+ status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, parentId?: number) => {
+ modelVisible.value = true
+ modelTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+ if (parentId) {
+ formData.value.parentId = parentId
+ }
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ formData.value = await MenuApi.getMenuApi(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+ // 获得菜单列表
+ await getTree()
+}
+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 {
+ if (
+ formData.value.type === SystemMenuTypeEnum.DIR ||
+ formData.value.type === SystemMenuTypeEnum.MENU
+ ) {
+ if (!isExternal(formData.value.path)) {
+ if (formData.value.parentId === 0 && formData.value.path.charAt(0) !== '/') {
+ message.error('路径必须以 / 开头')
+ return
+ } else if (formData.value.parentId !== 0 && formData.value.path.charAt(0) === '/') {
+ message.error('路径不能以 / 开头')
+ return
+ }
+ }
+ }
+ const data = formData.value as unknown as MenuApi.MenuVO
+ if (formType.value === 'create') {
+ await MenuApi.createMenu(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await MenuApi.updateMenu(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ // 清空，从而触发刷新
+ wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
+ }
+}
+
+/** 获取下拉框[上级菜单]的数据 */
+const menuTree = ref<Tree[]>([]) // 树形结构
+const getTree = async () => {
+ menuTree.value = []
+ const res = await MenuApi.getSimpleMenusList()
+ let menu: Tree = { id: 0, name: '主类目', children: [] }
+ menu.children = handleTree(res)
+ menuTree.value.push(menu)
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: 0,
+ name: '',
+ permission: '',
+ type: SystemMenuTypeEnum.DIR,
+ sort: Number(undefined),
+ parentId: 0,
+ path: '',
+ icon: '',
+ component: '',
+ componentName: '',
+ status: CommonStatusEnum.ENABLE,
+ visible: true,
+ keepAlive: true,
+ alwaysShow: true
+ }
+ formRef.value?.resetFields()
+}
+
+/** 判断 path 是不是外部的 HTTP 等链接 */
+const isExternal = (path: string) => {
+ return /^(https?:|mailto:|tel:)/.test(path)
+}
+</script>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 0604aa93..8feb066b 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,351 +1,183 @@
<template>
+ <!-- 搜索工作栏 -->
<ContentWrap>
- <!-- 列表 -->
- <XTable ref="xGrid" @register="registerTable" show-overflow>
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:menu:create']"
- @click="handleCreate()"
- />
- <XButton title="展开所有" @click="xGrid?.Ref.setAllTreeExpand(true)" />
- <XButton title="关闭所有" @click="xGrid?.Ref.clearTreeExpand()" />
- </template>
- <template #name_default="{ row }">
- <Icon :icon="row.icon" />
- <span class="ml-3">{{ row.name }}</span>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:menu:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:menu:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <!-- 添加或修改菜单对话框 -->
- <XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
<el-form
- ref="formRef"
- :model="menuForm"
- :rules="rules"
- label-width="100px"
- label-position="right"
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
>
- <el-form-item label="上级菜单">
- <el-tree-select
- node-key="id"
- v-model="menuForm.parentId"
- :props="defaultProps"
- :data="menuOptions"
- :default-expanded-keys="[0]"
- check-strictly
+ <el-form-item label="菜单名称" prop="name">
+ <el-input
+ v-model="queryParams.name"
+ placeholder="请输入菜单名称"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
/>
</el-form-item>
- <el-col :span="16">
- <el-form-item label="菜单名称" prop="name">
- <el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
- </el-form-item>
- </el-col>
- <el-form-item label="菜单类型" prop="type">
- <el-radio-group v-model="menuForm.type">
- <el-radio-button
- v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
- :key="dict.label"
- :label="dict.value"
- >
- {{ dict.label }}
- </el-radio-button>
- </el-radio-group>
+ <el-form-item label="状态" prop="status">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择菜单状态"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </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"
+ plain
+ @click="openForm('create')"
+ v-hasPermi="['system:menu:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button type="danger" plain @click="toggleExpandAll">
+ <Icon icon="ep:sort" class="mr-5px" /> 展开/折叠
+ </el-button>
</el-form-item>
- <template v-if="menuForm.type !== 3">
- <el-form-item label="菜单图标">
- <IconSelect v-model="menuForm.icon" clearable />
- </el-form-item>
- <el-col :span="16">
- <el-form-item label="路由地址" prop="path">
- <template #label>
- <Tooltip
- titel="路由地址"
- message="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
- />
- </template>
- <el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
- </el-form-item>
- </el-col>
- </template>
- <template v-if="menuForm.type === 2">
- <el-col :span="16">
- <el-form-item label="组件地址" prop="component">
- <el-input
- v-model="menuForm.component"
- placeholder="例如说：system/user/index"
- clearable
- />
- </el-form-item>
- </el-col>
- <el-col :span="16">
- <el-form-item label="组件名字" prop="componentName">
- <el-input v-model="menuForm.componentName" placeholder="例如说：SystemUser" clearable />
- </el-form-item>
- </el-col>
- </template>
- <template v-if="menuForm.type !== 1">
- <el-col :span="16">
- <el-form-item label="权限标识" prop="permission">
- <template #label>
- <Tooltip
- titel="权限标识"
- message="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
- />
- </template>
- <el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
- </el-form-item>
- </el-col>
- </template>
- <el-col :span="16">
- <el-form-item label="显示排序" prop="sort">
- <el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable />
- </el-form-item>
- </el-col>
- <el-col :span="16">
- <el-form-item label="菜单状态" prop="status">
- <el-radio-group v-model="menuForm.status">
- <el-radio
- border
- v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
- :key="dict.label"
- :label="dict.value"
- >
- {{ dict.label }}
- </el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- <template v-if="menuForm.type !== 3">
- <el-col :span="16">
- <el-form-item label="显示状态" prop="visible">
- <template #label>
- <Tooltip
- titel="显示状态"
- message="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
- />
- </template>
- <el-radio-group v-model="menuForm.visible">
- <el-radio border key="true" :label="true">显示</el-radio>
- <el-radio border key="false" :label="false">隐藏</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- </template>
- <template v-if="menuForm.type !== 3">
- <el-col :span="16">
- <el-form-item label="总是显示" prop="alwaysShow">
- <template #label>
- <Tooltip
- titel="总是显示"
- message="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单"
- />
- </template>
- <el-radio-group v-model="menuForm.alwaysShow">
- <el-radio border key="true" :label="true">总是</el-radio>
- <el-radio border key="false" :label="false">不是</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- </template>
- <template v-if="menuForm.type === 2">
- <el-col :span="16">
- <el-form-item label="缓存状态" prop="keepAlive">
- <template #label>
- <Tooltip
- titel="缓存状态"
- message="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段"
- />
- </template>
- <el-radio-group v-model="menuForm.keepAlive">
- <el-radio border key="true" :label="true">缓存</el-radio>
- <el-radio border key="false" :label="false">不缓存</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- </template>
</el-form>
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :loading="actionLoading"
- @click="submitForm()"
- :title="t('action.save')"
- />
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" @click="dialogVisible = false" :title="t('dialog.close')" />
- </template>
- </XModal>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table
+ v-loading="loading"
+ :data="list"
+ row-key="id"
+ v-if="refreshTable"
+ :default-expand-all="isExpandAll"
+ >
+ <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="250" />
+ <el-table-column prop="icon" label="图标" align="center" width="100">
+ <template #default="scope">
+ <Icon :icon="scope.row.icon" />
+ </template>
+ </el-table-column>
+ <el-table-column prop="sort" label="排序" width="60" />
+ <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" />
+ <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
+ <el-table-column prop="componentName" label="组件名称" :show-overflow-tooltip="true" />
+ <el-table-column prop="status" label="状态" width="80">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['system:menu:update']"
+ >
+ 修改
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="openForm('create', undefined, scope.row.id)"
+ v-hasPermi="['system:menu:create']"
+ >
+ 新增
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:menu:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <MenuForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="Menu">
-import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
-import { FormInstance } from 'element-plus'
-// 业务相关的 import
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
-import { handleTree, defaultProps } from '@/utils/tree'
+import { handleTree } from '@/utils/tree'
import * as MenuApi from '@/api/system/menu'
-import { allSchemas, rules } from './menu.data'
-
+import MenuForm from './MenuForm.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
-const { wsCache } = useCache()
-const xGrid = ref<any>(null)
-
-// 列表相关的变量
-const treeConfig = {
- transform: true,
- rowField: 'id',
- parentField: 'parentId',
- expandAll: false
-}
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- treeConfig: treeConfig,
- getListApi: MenuApi.getMenuListApi,
- deleteApi: MenuApi.deleteMenuApi
-})
-// 弹窗相关的变量
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 遮罩层
-// 新增和修改的表单值
-const formRef = ref<FormInstance>()
-const menuForm = ref<MenuApi.MenuVO>({
- id: 0,
- name: '',
- permission: '',
- type: SystemMenuTypeEnum.DIR,
- sort: 1,
- parentId: 0,
- path: '',
- icon: '',
- component: '',
- componentName: '',
- status: CommonStatusEnum.ENABLE,
- visible: true,
- keepAlive: true,
- alwaysShow: true,
- createTime: new Date()
+const loading = ref(true) // 列表的加载中
+const list = ref<any>([]) // 列表的数据
+const queryParams = reactive({
+ name: undefined,
+ status: undefined
})
+const queryFormRef = ref() // 搜索的表单
+const isExpandAll = ref(false) // 是否展开，默认全部折叠
+const refreshTable = ref(true) // 重新渲染表格状态
-// ========== 下拉框[上级菜单] ==========
-const menuOptions = ref<any[]>([]) // 树形结构
-// 获取下拉框[上级菜单]的数据
-const getTree = async () => {
- menuOptions.value = []
- const res = await MenuApi.listSimpleMenusApi()
- let menu: Tree = { id: 0, name: '主类目', children: [] }
- menu.children = handleTree(res)
- menuOptions.value.push(menu)
-}
-
-// ========== 新增/修改 ==========
-
-// 设置标题
-const setDialogTile = async (type: string) => {
- await getTree()
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
- // 重置表单
- formRef.value?.resetFields()
- menuForm.value = {
- id: 0,
- name: '',
- permission: '',
- type: SystemMenuTypeEnum.DIR,
- sort: 1,
- parentId: 0,
- path: '',
- icon: '',
- component: '',
- componentName: '',
- status: CommonStatusEnum.ENABLE,
- visible: true,
- keepAlive: true,
- alwaysShow: true,
- createTime: new Date()
- }
-}
-
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- await setDialogTile('update')
- // 设置数据
- const res = await MenuApi.getMenuApi(rowId)
- menuForm.value = res
- // TODO 芋艿：这块要优化下，部分字段未重置，无法修改
- menuForm.value.componentName = res.componentName || ''
- menuForm.value.alwaysShow = res.alwaysShow !== undefined ? res.alwaysShow : true
-}
-
-// 提交新增/修改的表单
-const submitForm = async () => {
- actionLoading.value = true
- // 提交请求
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
try {
- if (
- menuForm.value.type === SystemMenuTypeEnum.DIR ||
- menuForm.value.type === SystemMenuTypeEnum.MENU
- ) {
- if (!isExternal(menuForm.value.path)) {
- if (menuForm.value.parentId === 0 && menuForm.value.path.charAt(0) !== '/') {
- message.error('路径必须以 / 开头')
- return
- } else if (menuForm.value.parentId !== 0 && menuForm.value.path.charAt(0) === '/') {
- message.error('路径不能以 / 开头')
- return
- }
- }
- }
- if (actionType.value === 'create') {
- await MenuApi.createMenuApi(menuForm.value)
- message.success(t('common.createSuccess'))
- } else {
- await MenuApi.updateMenuApi(menuForm.value)
- message.success(t('common.updateSuccess'))
- }
+ const data = await MenuApi.getMenuList(queryParams)
+ list.value = handleTree(data)
} finally {
- dialogVisible.value = false
- actionLoading.value = false
- wsCache.delete(CACHE_KEY.ROLE_ROUTERS)
- // 操作成功，重新加载列表
- await reload()
+ loading.value = false
}
}
-// 判断 path 是不是外部的 HTTP 等链接
-const isExternal = (path: string) => {
- return /^(https?:|mailto:|tel:)/.test(path)
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ getList()
}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number, parentId?: number) => {
+ formRef.value.open(type, id, parentId)
+}
+
+/** 展开/折叠操作 */
+const toggleExpandAll = () => {
+ refreshTable.value = false
+ isExpandAll.value = !isExpandAll.value
+ nextTick(() => {
+ refreshTable.value = true
+ })
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await MenuApi.deleteMenu(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/system/menu/menu.data.ts b/src/views/system/menu/menu.data.ts
deleted file mode 100644
index 753c1211..00000000
--- a/src/views/system/menu/menu.data.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 新增和修改的表单校验
-export const rules = reactive({
- name: [required],
- sort: [required],
- path: [required],
- status: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: null,
- action: true,
- columns: [
- {
- title: '上级菜单',
- field: 'parentId',
- isTable: false
- },
- {
- title: '菜单名称',
- field: 'name',
- isSearch: true,
- table: {
- treeNode: true,
- align: 'left',
- width: '200px',
- slots: {
- default: 'name_default'
- }
- }
- },
- {
- title: '菜单类型',
- field: 'type',
- dictType: DICT_TYPE.SYSTEM_MENU_TYPE
- },
- {
- title: '路由地址',
- field: 'path'
- },
- {
- title: '组件路径',
- field: 'component'
- },
- {
- title: '组件名字',
- field: 'componentName'
- },
- {
- title: '权限标识',
- field: 'permission'
- },
- {
- title: '排序',
- field: 'sort'
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isTable: false
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/notice/form.vue b/src/views/system/notice/form.vue
index b8a49586..87e75623 100644
--- a/src/views/system/notice/form.vue
+++ b/src/views/system/notice/form.vue
@@ -38,17 +38,14 @@
</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>
<script setup lang="ts">
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import * as NoticeApi from '@/api/system/notice'
-
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index 8add0eab..340eeaa4 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -1,17 +1,29 @@
<template>
<content-wrap>
<!-- 搜索工作栏 -->
- <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
<el-form-item label="公告标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="请输入公告标题"
clearable
@keyup.enter="handleQuery"
+ class="!w-240px"
/>
</el-form-item>
<el-form-item label="公告状态" prop="status">
- <el-select v-model="queryParams.status" placeholder="请选择公告状态" clearable>
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择公告状态"
+ clearable
+ class="!w-240px"
+ >
<el-option
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="parseInt(dict.value)"
@@ -32,9 +44,11 @@
</el-button>
</el-form-item>
</el-form>
+ </content-wrap>
- <!-- 列表 -->
- <el-table v-loading="loading" :data="list" align="center">
+ <!-- 列表 -->
+ <content-wrap>
+ <el-table v-loading="loading" :data="list">
<el-table-column label="公告编号" align="center" prop="id" />
<el-table-column label="公告标题" align="center" prop="title" />
<el-table-column label="公告类型" align="center" prop="type">
@@ -100,11 +114,11 @@ const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
title: '',
type: undefined,
- status: undefined,
- pageNo: 1,
- pageSize: 100
+ status: undefined
})
const queryFormRef = ref() // 搜索的表单
diff --git a/src/views/system/notify/message/NotifyMessageDetail.vue b/src/views/system/notify/message/NotifyMessageDetail.vue
new file mode 100644
index 00000000..283575bb
--- /dev/null
+++ b/src/views/system/notify/message/NotifyMessageDetail.vue
@@ -0,0 +1,64 @@
+<template>
+ <Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500">
+ <el-descriptions border :column="1">
+ <el-descriptions-item label="编号" min-width="120">
+ {{ detailData.id }}
+ </el-descriptions-item>
+ <el-descriptions-item label="用户类型">
+ <dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
+ </el-descriptions-item>
+ <el-descriptions-item label="用户编号">
+ {{ detailData.userId }}
+ </el-descriptions-item>
+ <el-descriptions-item label="模版编号">
+ {{ detailData.templateId }}
+ </el-descriptions-item>
+ <el-descriptions-item label="模板编码">
+ {{ detailData.templateCode }}
+ </el-descriptions-item>
+ <el-descriptions-item label="发送人名称">
+ {{ detailData.templateNickname }}
+ </el-descriptions-item>
+ <el-descriptions-item label="模版内容">
+ {{ detailData.templateContent }}
+ </el-descriptions-item>
+ <el-descriptions-item label="模版参数">
+ {{ detailData.templateParams }}
+ </el-descriptions-item>
+ <el-descriptions-item label="模版类型">
+ <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="detailData.templateType" />
+ </el-descriptions-item>
+ <el-descriptions-item label="是否已读">
+ <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
+ </el-descriptions-item>
+ <el-descriptions-item label="阅读时间">
+ {{ formatDate(detailData.readTime) }}
+ </el-descriptions-item>
+ <el-descriptions-item label="创建时间">
+ {{ formatDate(detailData.createTime) }}
+ </el-descriptions-item>
+ </el-descriptions>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as NotifyMessageApi from '@/api/system/notify/message'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
+ modelVisible.value = true
+ // 设置数据
+ detailLoading.value = true
+ try {
+ detailData.value = data
+ } finally {
+ detailLoading.value = false
+ }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/src/views/system/notify/message/index.vue b/src/views/system/notify/message/index.vue
index 93a8ed68..9a39e7f6 100644
--- a/src/views/system/notify/message/index.vue
+++ b/src/views/system/notify/message/index.vue
@@ -1,67 +1,208 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #actionbtns_default="{ row }">
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:notify-message:query']"
- @click="handleDetail(row.id)"
+ <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 id="messageModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
- <!-- 表单：详情 -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
+ </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 getIntDictOptions(DICT_TYPE.USER_TYPE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="模板编码" prop="templateCode">
+ <el-input
+ v-model="queryParams.templateCode"
+ placeholder="请输入模板编码"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="模版类型" prop="templateType">
+ <el-select
+ v-model="queryParams.templateType"
+ placeholder="请选择模版类型"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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>
+ <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-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="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="userId" width="80" />
+ <el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
+ <el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
+ <el-table-column
+ label="模版内容"
+ align="center"
+ prop="templateContent"
+ width="200"
+ show-overflow-tooltip
+ />
+ <el-table-column
+ label="模版参数"
+ align="center"
+ prop="templateParams"
+ width="180"
+ show-overflow-tooltip
+ >
+ <template #default="scope"> {{ scope.row.templateParams }}</template>
+ </el-table-column>
+ <el-table-column label="模版类型" align="center" prop="templateType" width="120">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
+ </template>
+ </el-table-column>
+ <el-table-column label="是否已读" align="center" prop="readStatus" width="100">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="阅读时间"
+ align="center"
+ prop="readTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center" fixed="right">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openDetail(scope.row)"
+ v-hasPermi="['system:notify-message:query']"
+ >
+ 详情
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
/>
- <template #footer>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
- </template>
- </XModal>
+ </content-wrap>
+
+ <!-- 表单弹窗：详情 -->
+ <NotifyMessageDetail ref="detailRef" />
</template>
<script setup lang="ts" name="NotifyMessage">
-// 业务相关的 import
-import { allSchemas } from './message.data'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
import * as NotifyMessageApi from '@/api/system/notify/message'
+import NotifyMessageDetail from './NotifyMessageDetail.vue'
-const { t } = useI18n() // 国际化
-
-// 列表相关的变量
-const [registerTable] = useXTable({
- allSchemas: allSchemas,
- topActionSlots: false,
- getListApi: NotifyMessageApi.getNotifyMessagePageApi
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ userType: undefined,
+ userId: undefined,
+ templateCode: undefined,
+ templateType: undefined,
+ createTime: []
})
+const queryFormRef = ref() // 搜索的表单
-// 弹窗相关的变量
-const modelVisible = ref(false) // 是否显示弹出层
-const modelTitle = ref('edit') // 弹出层标题
-const modelLoading = ref(false) // 弹出层loading
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
- modelLoading.value = true
- modelTitle.value = t('action.' + type)
- actionType.value = type
- modelVisible.value = true
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await NotifyMessageApi.getNotifyMessagePage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
}
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- const res = await NotifyMessageApi.getNotifyMessageApi(rowId)
- detailData.value = res
- modelLoading.value = false
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 详情操作 */
+const detailRef = ref()
+const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
+ detailRef.value.open(data)
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/system/notify/message/message.data.ts b/src/views/system/notify/message/message.data.ts
deleted file mode 100644
index 665311d2..00000000
--- a/src/views/system/notify/message/message.data.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id', // 默认的主键ID
- primaryTitle: '编号', // 默认显示的值
- primaryType: 'id', // 默认为seq，序号模式
- action: true,
- actionWidth: '200', // 3个按钮默认200，如有删减对应增减即可
- columns: [
- {
- title: '用户编号',
- field: 'userId',
- isSearch: true
- },
- {
- title: '用户类型',
- field: 'userType',
- dictType: DICT_TYPE.USER_TYPE,
- dictClass: 'string',
- isSearch: true,
- table: {
- width: 80
- }
- },
- {
- title: '模版编号',
- field: 'templateId'
- },
- {
- title: '模板编码',
- field: 'templateCode',
- isSearch: true,
- table: {
- width: 80
- }
- },
- {
- title: '发送人名称',
- field: 'templateNickname',
- table: {
- width: 120
- }
- },
- {
- title: '模版内容',
- field: 'templateContent',
- table: {
- width: 200
- }
- },
- {
- title: '模版类型',
- field: 'templateType',
- dictType: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
- dictClass: 'number',
- isSearch: true,
- table: {
- width: 80
- }
- },
- {
- title: '模版参数',
- field: 'templateParams',
- isTable: false
- },
- {
- title: '是否已读',
- field: 'readStatus',
- dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
- dictClass: 'boolean',
- table: {
- width: 80
- }
- },
- {
- title: '阅读时间',
- field: 'readTime',
- formatter: 'formatDate',
- table: {
- width: 180
- }
- },
- {
- title: '创建时间',
- field: 'createTime',
- isForm: false,
- formatter: 'formatDate',
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- },
- table: {
- width: 180
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/notify/my/MyNotifyMessageDetail.vue b/src/views/system/notify/my/MyNotifyMessageDetail.vue
new file mode 100644
index 00000000..45af259d
--- /dev/null
+++ b/src/views/system/notify/my/MyNotifyMessageDetail.vue
@@ -0,0 +1,46 @@
+<template>
+ <Dialog title="消息详情" v-model="modelVisible" :scroll="true" :max-height="500">
+ <el-descriptions border :column="1">
+ <el-descriptions-item label="发送人">
+ {{ detailData.templateNickname }}
+ </el-descriptions-item>
+ <el-descriptions-item label="发送时间">
+ {{ formatDate(detailData.createTime, 'YYYY-MM-DD HH:mm:ss') }}
+ </el-descriptions-item>
+ <el-descriptions-item label="消息类型">
+ <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="detailData.templateType" />
+ </el-descriptions-item>
+ <el-descriptions-item label="是否已读">
+ <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData.readStatus" />
+ </el-descriptions-item>
+ <el-descriptions-item label="阅读时间" v-if="detailData.readStatus">
+ {{ formatDate(detailData.readTime, 'YYYY-MM-DD HH:mm:ss') }}
+ </el-descriptions-item>
+ <el-descriptions-item label="内容">
+ {{ detailData.templateContent }}
+ </el-descriptions-item>
+ </el-descriptions>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as NotifyMessageApi from '@/api/system/notify/message'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const open = async (data: NotifyMessageApi.NotifyMessageVO) => {
+ modelVisible.value = true
+ // 设置数据
+ detailLoading.value = true
+ try {
+ detailData.value = data
+ } finally {
+ detailLoading.value = false
+ }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/src/views/system/notify/my/index.vue b/src/views/system/notify/my/index.vue
index 9f3e9b10..d423a98c 100644
--- a/src/views/system/notify/my/index.vue
+++ b/src/views/system/notify/my/index.vue
@@ -1,58 +1,213 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：标记已读 -->
- <XButton type="primary" preIcon="ep:zoom-in" title="标记已读" @click="handleUpdateList" />
- <!-- 操作：全部已读 -->
- <XButton type="primary" preIcon="ep:zoom-in" title="全部已读" @click="handleUpdateAll" />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：已读 -->
- <XTextButton
- preIcon="ep:view"
- title="已读"
- v-hasPermi="['system:notify-message:query']"
- v-if="!row.readStatus"
- @click="handleUpdate([row.id])"
+ <content-wrap>
+ <!-- 搜索工作栏 -->
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="是否已读" prop="readStatus">
+ <el-select
+ v-model="queryParams.readStatus"
+ placeholder="请选择状态"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="发送时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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"
/>
- </template>
- </XTable>
- </ContentWrap>
-</template>
-<script setup lang="ts" name="MyNotifyMessage">
-// 业务相关的 import
-import { allSchemas } from './my.data'
-import * as NotifyMessageApi from '@/api/system/notify/message'
+ </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 @click="handleUpdateList">
+ <Icon icon="ep:reading" class="mr-5px" /> 标记已读
+ </el-button>
+ <el-button @click="handleUpdateAll">
+ <Icon icon="ep:reading" class="mr-5px" /> 全部已读
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </content-wrap>
+ <content-wrap>
+ <!-- 列表 -->
+ <el-table
+ v-loading="loading"
+ :data="list"
+ ref="tableRef"
+ row-key="id"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column type="selection" :selectable="selectable" :reserve-selection="true" />
+ <el-table-column label="发送人" align="center" prop="templateNickname" width="180" />
+ <el-table-column
+ label="发送时间"
+ align="center"
+ prop="createTime"
+ width="200"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="类型" align="center" prop="templateType" width="180">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="scope.row.templateType" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="消息内容"
+ align="center"
+ prop="templateContent"
+ show-overflow-tooltip
+ />
+ <el-table-column label="是否已读" align="center" prop="readStatus" width="160">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="阅读时间"
+ align="center"
+ prop="readTime"
+ width="200"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center" width="160">
+ <template #default="scope">
+ <el-button
+ link
+ :type="scope.row.readStatus ? 'primary' : 'warning'"
+ @click="openDetail(scope.row)"
+ >
+ {{ scope.row.readStatus ? '详情' : '已读' }}
+ </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>
+
+ <!-- 表单弹窗：详情 -->
+ <MyNotifyMessageDetail ref="detailRef" />
+</template>
+
+<script setup lang="ts" name="MyNotifyMessage">
+import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as NotifyMessageApi from '@/api/system/notify/message'
+import MyNotifyMessageDetail from './MyNotifyMessageDetail.vue'
const message = useMessage() // 消息
-// 列表相关的变量
-const [registerTable, { reload, getCheckboxRecords }] = useXTable({
- allSchemas: allSchemas,
- getListApi: NotifyMessageApi.getMyNotifyMessagePage
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ readStatus: undefined,
+ createTime: []
})
+const queryFormRef = ref() // 搜索的表单
+const tableRef = ref() // 表格的 Ref
+const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
-const handleUpdateList = async () => {
- const list = getCheckboxRecords() as any as any[]
- if (list.length === 0) {
- return
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await NotifyMessageApi.getMyNotifyMessagePage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
}
- await handleUpdate(list.map((v) => v.id))
}
-// 标记指定 id 已读
-const handleUpdate = async (ids) => {
- await NotifyMessageApi.updateNotifyMessageRead(ids)
- message.success('标记已读成功！')
- reload()
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
-// 标记全部已读
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ tableRef.value.clearSelection()
+ handleQuery()
+}
+
+/** 详情操作 */
+const detailRef = ref()
+const openDetail = (data: NotifyMessageApi.NotifyMessageVO) => {
+ if (!data.readStatus) {
+ handleReadOne(data.id)
+ }
+ detailRef.value.open(data)
+}
+
+/** 标记一条站内信已读 */
+const handleReadOne = async (id) => {
+ await NotifyMessageApi.updateNotifyMessageRead(id)
+ await getList()
+}
+
+/** 标记全部站内信已读 **/
const handleUpdateAll = async () => {
await NotifyMessageApi.updateAllNotifyMessageRead()
message.success('全部已读成功！')
- reload()
+ tableRef.value.clearSelection()
+ await getList()
}
+
+/** 标记一些站内信已读 **/
+const handleUpdateList = async () => {
+ if (selectedIds.value.length === 0) {
+ return
+ }
+ await NotifyMessageApi.updateNotifyMessageRead(selectedIds.value)
+ message.success('批量已读成功！')
+ tableRef.value.clearSelection()
+ await getList()
+}
+
+/** 某一行，是否允许选中 */
+const selectable = (row) => {
+ return !row.readStatus
+}
+
+/** 当表格选择项发生变化时会触发该事件 */
+const handleSelectionChange = (array: NotifyMessageApi.NotifyMessageVO[]) => {
+ selectedIds.value = []
+ if (!array) {
+ return
+ }
+ array.forEach((row) => selectedIds.value.push(row.id))
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/system/notify/my/my.data.ts b/src/views/system/notify/my/my.data.ts
deleted file mode 100644
index 103ed8ef..00000000
--- a/src/views/system/notify/my/my.data.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryTitle: ' ',
- primaryType: 'checkbox',
- action: true,
- actionWidth: '200', // 3个按钮默认200，如有删减对应增减即可
- columns: [
- {
- title: '发送人名称',
- field: 'templateNickname',
- table: {
- width: 120
- }
- },
- {
- title: '发送时间',
- field: 'createTime',
- isForm: false,
- formatter: 'formatDate',
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- },
- table: {
- width: 180
- }
- },
- {
- title: '类型',
- field: 'templateType',
- dictType: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
- dictClass: 'number',
- table: {
- width: 80
- }
- },
- {
- title: '内容',
- field: 'templateContent'
- },
- {
- title: '是否已读',
- field: 'readStatus',
- dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
- dictClass: 'boolean',
- table: {
- width: 80
- },
- isSearch: true
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/notify/template/index.vue b/src/views/system/notify/template/index.vue
index 4ec16a0a..c4113924 100644
--- a/src/views/system/notify/template/index.vue
+++ b/src/views/system/notify/template/index.vue
@@ -119,7 +119,7 @@ import { FormExpose } from '@/components/Form'
// 业务相关的 import
import { rules, allSchemas } from './template.data'
import * as NotifyTemplateApi from '@/api/system/notify/template'
-import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
+import { getSimpleUserList, UserVO } from '@/api/system/user'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@@ -244,7 +244,7 @@ const sendTest = async () => {
// ========== 初始化 ==========
onMounted(() => {
- getListSimpleUsersApi().then((data) => {
+ getSimpleUserList().then((data) => {
userOption.value = data
})
})
diff --git a/src/views/system/oauth2/client/ClientForm.vue b/src/views/system/oauth2/client/ClientForm.vue
new file mode 100644
index 00000000..2e2281f5
--- /dev/null
+++ b/src/views/system/oauth2/client/ClientForm.vue
@@ -0,0 +1,258 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible" scroll max-height="500px">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="160px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="客户端编号" prop="secret">
+ <el-input v-model="formData.clientId" placeholder="请输入客户端编号" />
+ </el-form-item>
+ <el-form-item label="客户端密钥" prop="secret">
+ <el-input v-model="formData.secret" placeholder="请输入客户端密钥" />
+ </el-form-item>
+ <el-form-item label="应用名" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入应用名" />
+ </el-form-item>
+ <el-form-item label="应用图标">
+ <UploadImg v-model="formData.logo" :limit="1" />
+ </el-form-item>
+ <el-form-item label="应用描述">
+ <el-input type="textarea" v-model="formData.description" 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="accessTokenValiditySeconds">
+ <el-input-number v-model="formData.accessTokenValiditySeconds" placeholder="单位：秒" />
+ </el-form-item>
+ <el-form-item label="刷新令牌的有效期" prop="refreshTokenValiditySeconds">
+ <el-input-number v-model="formData.refreshTokenValiditySeconds" placeholder="单位：秒" />
+ </el-form-item>
+ <el-form-item label="授权类型" prop="authorizedGrantTypes">
+ <el-select
+ v-model="formData.authorizedGrantTypes"
+ multiple
+ filterable
+ placeholder="请输入授权类型"
+ style="width: 500px"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="授权范围" prop="scopes">
+ <el-select
+ v-model="formData.scopes"
+ multiple
+ filterable
+ allow-create
+ placeholder="请输入授权范围"
+ style="width: 500px"
+ >
+ <el-option v-for="scope in formData.scopes" :key="scope" :label="scope" :value="scope" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="自动授权范围" prop="autoApproveScopes">
+ <el-select
+ v-model="formData.autoApproveScopes"
+ multiple
+ filterable
+ placeholder="请输入授权范围"
+ style="width: 500px"
+ >
+ <el-option v-for="scope in formData.scopes" :key="scope" :label="scope" :value="scope" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="可重定向的 URI 地址" prop="redirectUris">
+ <el-select
+ v-model="formData.redirectUris"
+ multiple
+ filterable
+ allow-create
+ placeholder="请输入可重定向的 URI 地址"
+ style="width: 500px"
+ >
+ <el-option
+ v-for="redirectUri in formData.redirectUris"
+ :key="redirectUri"
+ :label="redirectUri"
+ :value="redirectUri"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="权限" prop="authorities">
+ <el-select
+ v-model="formData.authorities"
+ multiple
+ filterable
+ allow-create
+ placeholder="请输入权限"
+ style="width: 500px"
+ >
+ <el-option
+ v-for="authority in formData.authorities"
+ :key="authority"
+ :label="authority"
+ :value="authority"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="资源" prop="resourceIds">
+ <el-select
+ v-model="formData.resourceIds"
+ multiple
+ filterable
+ allow-create
+ placeholder="请输入资源"
+ style="width: 500px"
+ >
+ <el-option
+ v-for="resourceId in formData.resourceIds"
+ :key="resourceId"
+ :label="resourceId"
+ :value="resourceId"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="附加信息" prop="additionalInformation">
+ <el-input
+ type="textarea"
+ v-model="formData.additionalInformation"
+ placeholder="请输入附加信息，JSON 格式数据"
+ />
+ </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 ClientApi from '@/api/system/oauth2/client'
+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,
+ clientId: undefined,
+ secret: undefined,
+ name: undefined,
+ logo: undefined,
+ description: undefined,
+ status: CommonStatusEnum.ENABLE,
+ accessTokenValiditySeconds: 30 * 60,
+ refreshTokenValiditySeconds: 30 * 24 * 60,
+ redirectUris: [],
+ authorizedGrantTypes: [],
+ scopes: [],
+ autoApproveScopes: [],
+ authorities: [],
+ resourceIds: [],
+ additionalInformation: undefined
+})
+const formRules = reactive({
+ clientId: [{ required: true, message: '客户端编号不能为空', trigger: 'blur' }],
+ secret: [{ required: true, message: '客户端密钥不能为空', trigger: 'blur' }],
+ name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
+ logo: [{ required: true, message: '应用图标不能为空', trigger: 'blur' }],
+ status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
+ accessTokenValiditySeconds: [
+ { required: true, message: '访问令牌的有效期不能为空', trigger: 'blur' }
+ ],
+ refreshTokenValiditySeconds: [
+ { required: true, message: '刷新令牌的有效期不能为空', trigger: 'blur' }
+ ],
+ redirectUris: [{ required: true, message: '可重定向的 URI 地址不能为空', trigger: 'blur' }],
+ authorizedGrantTypes: [{ required: true, message: '授权类型不能为空', 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 ClientApi.getOAuth2Client(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 as unknown as ClientApi.OAuth2ClientVO
+ if (formType.value === 'create') {
+ await ClientApi.createOAuth2Client(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await ClientApi.updateOAuth2Client(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ clientId: undefined,
+ secret: undefined,
+ name: undefined,
+ logo: undefined,
+ description: undefined,
+ status: CommonStatusEnum.ENABLE,
+ accessTokenValiditySeconds: 30 * 60,
+ refreshTokenValiditySeconds: 30 * 24 * 60,
+ redirectUris: [],
+ authorizedGrantTypes: [],
+ scopes: [],
+ autoApproveScopes: [],
+ authorities: [],
+ resourceIds: [],
+ additionalInformation: undefined
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/oauth2/client/client.data.ts b/src/views/system/oauth2/client/client.data.ts
deleted file mode 100644
index 52ee8895..00000000
--- a/src/views/system/oauth2/client/client.data.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-const authorizedGrantOptions = getStrDictOptions(DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE)
-
-// 表单校验
-export const rules = reactive({
- clientId: [required],
- secret: [required],
- name: [required],
- status: [required],
- accessTokenValiditySeconds: [required],
- refreshTokenValiditySeconds: [required],
- redirectUris: [required],
- authorizedGrantTypes: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'clientId',
- primaryType: null,
- action: true,
- columns: [
- {
- title: '客户端端号',
- field: 'clientId'
- },
- {
- title: '客户端密钥',
- field: 'secret'
- },
- {
- title: '应用名',
- field: 'name',
- isSearch: true
- },
- {
- title: '应用图标',
- field: 'logo',
- table: {
- cellRender: {
- name: 'XImg'
- }
- },
- form: {
- component: 'UploadImg'
- }
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '访问令牌的有效期',
- field: 'accessTokenValiditySeconds',
- form: {
- component: 'InputNumber'
- },
- table: {
- slots: {
- default: 'accessTokenValiditySeconds_default'
- }
- }
- },
- {
- title: '刷新令牌的有效期',
- field: 'refreshTokenValiditySeconds',
- form: {
- component: 'InputNumber'
- },
- table: {
- slots: {
- default: 'refreshTokenValiditySeconds_default'
- }
- }
- },
- {
- title: '授权类型',
- field: 'authorizedGrantTypes',
- table: {
- width: 400,
- slots: {
- default: 'authorizedGrantTypes_default'
- }
- },
- form: {
- component: 'Select',
- componentProps: {
- options: authorizedGrantOptions,
- multiple: true,
- filterable: true
- }
- }
- },
- {
- title: '授权范围',
- field: 'scopes',
- isTable: false,
- form: {
- component: 'Select',
- componentProps: {
- options: [],
- multiple: true,
- filterable: true,
- allowCreate: true,
- defaultFirstOption: true
- }
- }
- },
- {
- title: '自动授权范围',
- field: 'autoApproveScopes',
- isTable: false,
- form: {
- component: 'Select',
- componentProps: {
- options: [],
- multiple: true,
- filterable: true,
- allowCreate: true,
- defaultFirstOption: true
- }
- }
- },
- {
- title: '可重定向的 URI 地址',
- field: 'redirectUris',
- isTable: false,
- form: {
- component: 'Select',
- componentProps: {
- options: [],
- multiple: true,
- filterable: true,
- allowCreate: true,
- defaultFirstOption: true
- }
- }
- },
- {
- title: '权限',
- field: 'authorities',
- isTable: false,
- form: {
- component: 'Select',
- componentProps: {
- options: [],
- multiple: true,
- filterable: true,
- allowCreate: true,
- defaultFirstOption: true
- }
- }
- },
- {
- title: '资源',
- field: 'resourceIds',
- isTable: false,
- form: {
- component: 'Select',
- componentProps: {
- options: [],
- multiple: true,
- filterable: true,
- allowCreate: true,
- defaultFirstOption: true
- }
- }
- },
- {
- title: '附加信息',
- field: 'additionalInformation',
- isTable: false,
- form: {
- component: 'Input',
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- }
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/oauth2/client/index.vue b/src/views/system/oauth2/client/index.vue
index 9ff44692..fa04e6d3 100644
--- a/src/views/system/oauth2/client/index.vue
+++ b/src/views/system/oauth2/client/index.vue
@@ -1,207 +1,185 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:oauth2-client:create']"
- @click="handleCreate()"
- />
- </template>
- <template #accessTokenValiditySeconds_default="{ row }">
- {{ row.accessTokenValiditySeconds + '秒' }}
- </template>
- <template #refreshTokenValiditySeconds_default="{ row }">
- {{ row.refreshTokenValiditySeconds + '秒' }}
- </template>
- <template #authorizedGrantTypes_default="{ row }">
- <el-tag
- :disable-transitions="true"
- :key="index"
- v-for="(authorizedGrantType, index) in row.authorizedGrantTypes"
- :index="index"
- >
- {{ authorizedGrantType }}
- </el-tag>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:oauth2-client:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:oauth2-client:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:oauth2-client:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <!-- 弹窗 -->
- <XModal id="postModel" v-model="dialogVisible" :title="dialogTitle">
- <!-- 表单：添加/修改 -->
- <Form
- ref="formRef"
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- />
- <!-- 表单：详情 -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
+ <!-- 搜索 -->
+ <content-wrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
>
- <template #accessTokenValiditySeconds="{ row }">
- {{ row.accessTokenValiditySeconds + '秒' }}
- </template>
- <template #refreshTokenValiditySeconds="{ row }">
- {{ row.refreshTokenValiditySeconds + '秒' }}
- </template>
- <template #authorizedGrantTypes="{ row }">
- <el-tag
- :disable-transitions="true"
- :key="index"
- v-for="(authorizedGrantType, index) in row.authorizedGrantTypes"
- :index="index"
+ <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 label="状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </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
+ plain
+ type="primary"
+ @click="openForm('create')"
+ v-hasPermi="['system:oauth2-client:create']"
>
- {{ authorizedGrantType }}
- </el-tag>
- </template>
- <template #scopes="{ row }">
- <el-tag
- :disable-transitions="true"
- :key="index"
- v-for="(scopes, index) in row.scopes"
- :index="index"
- >
- {{ scopes }}
- </el-tag>
- </template>
- <template #autoApproveScopes="{ row }">
- <el-tag
- :disable-transitions="true"
- :key="index"
- v-for="(autoApproveScopes, index) in row.autoApproveScopes"
- :index="index"
- >
- {{ autoApproveScopes }}
- </el-tag>
- </template>
- <template #redirectUris="{ row }">
- <el-tag
- :disable-transitions="true"
- :key="index"
- v-for="(redirectUris, index) in row.redirectUris"
- :index="index"
- >
- {{ redirectUris }}
- </el-tag>
- </template>
- </Descriptions>
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
+ <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="clientId" />
+ <el-table-column label="客户端密钥" align="center" prop="secret" />
+ <el-table-column label="应用名" align="center" prop="name" />
+ <el-table-column label="应用图标" align="center" prop="logo">
+ <template #default="scope">
+ <img width="40px" height="40px" :src="scope.row.logo" />
+ </template>
+ </el-table-column>
+ <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="accessTokenValiditySeconds">
+ <template #default="scope">{{ scope.row.accessTokenValiditySeconds }} 秒</template>
+ </el-table-column>
+ <el-table-column label="刷新令牌的有效期" align="center" prop="refreshTokenValiditySeconds">
+ <template #default="scope">{{ scope.row.refreshTokenValiditySeconds }} 秒</template>
+ </el-table-column>
+ <el-table-column label="授权类型" align="center" prop="authorizedGrantTypes">
+ <template #default="scope">
+ <el-tag
+ :disable-transitions="true"
+ :key="index"
+ v-for="(authorizedGrantType, index) in scope.row.authorizedGrantTypes"
+ :index="index"
+ >
+ {{ authorizedGrantType }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
/>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['system:oauth2-client:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:oauth2-client: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>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <ClientForm ref="formRef" @success="getList" />
</template>
-<script setup lang="ts" name="Client">
-import type { FormExpose } from '@/components/Form'
-// 业务相关的 import
+<script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
import * as ClientApi from '@/api/system/oauth2/client'
-import { rules, allSchemas } from './client.data'
-
-const { t } = useI18n() // 国际化
+import ClientForm from './ClientForm.vue'
const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- getListApi: ClientApi.getOAuth2ClientPageApi,
- deleteApi: ClientApi.deleteOAuth2ClientApi
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ name: null,
+ status: null
})
-// 弹窗相关的变量
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询参数列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await ClientApi.getOAuth2ClientPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
}
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await ClientApi.getOAuth2ClientApi(rowId)
- unref(formRef)?.setValues(res)
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
}
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- const res = await ClientApi.getOAuth2ClientApi(rowId)
- detailData.value = res
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
}
-// 提交新增/修改的表单
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as ClientApi.OAuth2ClientVO
- if (actionType.value === 'create') {
- await ClientApi.createOAuth2ClientApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await ClientApi.updateOAuth2ClientApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await ClientApi.deleteOAuth2Client(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/system/oauth2/token/index.vue b/src/views/system/oauth2/token/index.vue
index f0dfbd9c..a809e452 100644
--- a/src/views/system/oauth2/token/index.vue
+++ b/src/views/system/oauth2/token/index.vue
@@ -1,64 +1,159 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #actionbtns_default="{ row }">
- <!-- 操作：详情 -->
- <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
- <!-- 操作：登出 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.logout')"
- v-hasPermi="['system:oauth2-token:delete']"
- @click="handleForceLogout(row.id)"
+ <content-wrap>
+ <!-- 搜索工作栏 -->
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="90px"
+ >
+ <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 #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 getIntDictOptions(DICT_TYPE.USER_TYPE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="客户端编号" prop="clientId">
+ <el-input
+ v-model="queryParams.clientId"
+ 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-form-item>
+ </el-form>
+ </content-wrap>
+
+ <!-- 列表 -->
+ <content-wrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="访问令牌" align="center" prop="accessToken" width="300" />
+ <el-table-column label="刷新令牌" align="center" prop="refreshToken" width="300" />
+ <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="expiresTime"
+ :formatter="dateFormatter"
+ width="180"
+ />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ :formatter="dateFormatter"
+ width="180"
+ />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="danger"
+ @click="handleForceLogout(scope.row.id)"
+ v-hasPermi="['system:oauth2-token: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>
</template>
-<script setup lang="ts" name="Token">
-import { allSchemas } from './token.data'
-import * as TokenApi from '@/api/system/oauth2/token'
-const { t } = useI18n() // 国际化
+<script setup lang="ts" name="Oauth2AccessToken">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as OAuth2AccessTokenApi from '@/api/system/oauth2/token'
const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload }] = useXTable({
- allSchemas: allSchemas,
- topActionSlots: false,
- getListApi: TokenApi.getAccessTokenPageApi
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ userId: null,
+ userType: null,
+ clientId: null
})
+const queryFormRef = ref() // 搜索的表单
-// ========== 详情相关 ==========
-const detailData = ref() // 详情 Ref
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref(t('action.detail')) // 弹出层标题
-// 详情
-const handleDetail = async (row: TokenApi.OAuth2TokenVO) => {
- // 设置数据
- detailData.value = row
- dialogVisible.value = true
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await OAuth2AccessTokenApi.getAccessTokenPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
}
-// 强退操作
-const handleForceLogout = (rowId: number) => {
- message
- .confirm('是否要强制退出用户')
- .then(async () => {
- await TokenApi.deleteAccessTokenApi(rowId)
- message.success(t('common.success'))
- })
- .finally(async () => {
- // 刷新列表
- await reload()
- })
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
+}
+
+/** 强制退出操作 */
+const handleForceLogout = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.confirm('是否要强制退出用户')
+ // 发起删除
+ await OAuth2AccessTokenApi.deleteAccessToken(id)
+ message.success(t('common.success'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/system/oauth2/token/token.data.ts b/src/views/system/oauth2/token/token.data.ts
deleted file mode 100644
index 8a0e8486..00000000
--- a/src/views/system/oauth2/token/token.data.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: null,
- action: true,
- columns: [
- {
- title: '用户编号',
- field: 'userId',
- isSearch: true
- },
- {
- title: '访问令牌',
- field: 'accessToken'
- },
- {
- title: '刷新令牌',
- field: 'refreshToken'
- },
- {
- title: '客户端编号',
- field: 'clientId',
- isSearch: true
- },
- {
- title: '用户类型',
- field: 'userType',
- dictType: DICT_TYPE.USER_TYPE,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false
- },
- {
- title: '过期时间',
- field: 'expiresTime',
- formatter: 'formatDate',
- isForm: false
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/operatelog/detail.vue b/src/views/system/operatelog/detail.vue
new file mode 100644
index 00000000..b3603e2e
--- /dev/null
+++ b/src/views/system/operatelog/detail.vue
@@ -0,0 +1,80 @@
+<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.userId }}
+ </el-descriptions-item>
+ <el-descriptions-item label="操作人名字">
+ {{ detailData.userNickname }}
+ </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.module }}
+ </el-descriptions-item>
+ <el-descriptions-item label="操作名">
+ {{ detailData.name }}
+ </el-descriptions-item>
+ <el-descriptions-item label="操作内容" v-if="detailData.content">
+ {{ detailData.content }}
+ </el-descriptions-item>
+ <el-descriptions-item label="操作拓展参数" v-if="detailData.exts">
+ {{ detailData.exts }}
+ </el-descriptions-item>
+ <el-descriptions-item label="请求 URL">
+ {{ detailData.requestMethod }} {{ detailData.requestUrl }}
+ </el-descriptions-item>
+ <el-descriptions-item label="Java 方法名">
+ {{ detailData.javaMethod }}
+ </el-descriptions-item>
+ <el-descriptions-item label="Java 方法参数">
+ {{ detailData.javaMethodArgs }}
+ </el-descriptions-item>
+ <el-descriptions-item label="操作时间">
+ {{ formatDate(detailData.startTime) }}
+ </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>失败({{ detailData.resultCode }})</div>
+ </el-descriptions-item>
+ <el-descriptions-item label="操作结果" v-if="detailData.resultCode === 0">
+ {{ detailData.resultData }}
+ </el-descriptions-item>
+ <el-descriptions-item label="失败提示" v-if="detailData.resultCode > 0">
+ {{ detailData.resultMsg }}
+ </el-descriptions-item>
+ </el-descriptions>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import { formatDate } from '@/utils/formatTime'
+import * as OperateLogApi from '@/api/system/operatelog'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const openModal = async (data: OperateLogApi.OperateLogVO) => {
+ modelVisible.value = true
+ // 设置数据
+ detailLoading.value = true
+ try {
+ detailData.value = data
+ } finally {
+ detailLoading.value = false
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+</script>
diff --git a/src/views/system/operatelog/index.vue b/src/views/system/operatelog/index.vue
index 7f1e9bb4..c5713be1 100644
--- a/src/views/system/operatelog/index.vue
+++ b/src/views/system/operatelog/index.vue
@@ -1,67 +1,208 @@
<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
- type="warning"
- preIcon="ep:download"
- :title="t('action.export')"
- v-hasPermi="['system:operate-log:export']"
- @click="exportList('操作日志.xls')"
+ <content-wrap>
+ <!-- 搜索工作栏 -->
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="系统模块" prop="module">
+ <el-input
+ v-model="queryParams.module"
+ placeholder="请输入系统模块"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
/>
- </template>
- <template #duration="{ row }">
- <span>{{ row.duration + 'ms' }}</span>
- </template>
- <template #resultCode="{ row }">
- <span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：详情 -->
- <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
- </template>
- </XTable>
- </ContentWrap>
- <!-- 弹窗 -->
- <XModal id="postModel" v-model="dialogVisible" :title="t('action.detail')">
- <!-- 对话框(详情) -->
- <Descriptions :schema="allSchemas.detailSchema" :data="detailData">
- <template #resultCode="{ row }">
- <span>{{ row.resultCode === 0 ? '成功' : '失败' }}</span>
- </template>
- <template #duration="{ row }">
- <span>{{ row.duration + 'ms' }}</span>
- </template>
- </Descriptions>
- <template #footer>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ </el-form-item>
+ <el-form-item label="操作人员" prop="userNickname">
+ <el-input
+ v-model="queryParams.userNickname"
+ placeholder="请输入操作人员"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="操作类型" prop="type">
+ <el-select
+ v-model="queryParams.type"
+ placeholder="请选择操作类型"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
+ :key="parseInt(dict.value)"
+ :label="dict.label"
+ :value="parseInt(dict.value)"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="操作状态" prop="success">
+ <el-select
+ v-model="queryParams.success"
+ placeholder="请选择操作状态"
+ clearable
+ class="!w-240px"
+ >
+ <el-option :key="true" label="成功" :value="true" />
+ <el-option :key="false" label="失败" :value="false" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="操作时间" prop="startTime">
+ <el-date-picker
+ v-model="queryParams.startTime"
+ 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>
+ <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:config: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="module" width="180" />
+ <el-table-column label="操作名" align="center" prop="name" width="180" />
+ <el-table-column label="操作类型" align="center" prop="type">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="scope.row.type" />
+ </template>
+ </el-table-column>
+ <el-table-column label="操作人" align="center" prop="userNickname" />
+ <el-table-column label="操作结果" align="center" prop="status">
+ <template #default="scope">
+ <span>{{ scope.row.resultCode === 0 ? '成功' : '失败' }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="操作时间"
+ align="center"
+ prop="startTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="执行时长" align="center" prop="startTime">
+ <template #default="scope">
+ <span>{{ scope.row.duration }} ms</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openModal(scope.row)"
+ v-hasPermi="['infra:config: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>
+
+ <!-- 表单弹窗：详情 -->
+ <operate-log-detail ref="modalRef" />
</template>
<script setup lang="ts" name="OperateLog">
-// 业务相关的 import
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
import * as OperateLogApi from '@/api/system/operatelog'
-import { allSchemas } from './operatelog.data'
+import OperateLogDetail from './detail.vue'
+const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-// 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
- allSchemas: allSchemas,
- getListApi: OperateLogApi.getOperateLogPageApi,
- exportListApi: OperateLogApi.exportOperateLogApi
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ module: undefined,
+ userNickname: undefined,
+ type: undefined,
+ success: undefined,
+ startTime: []
})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
-// 弹窗相关的变量
-const dialogVisible = ref(false) // 是否显示弹出层
-const actionLoading = ref(false) // 按钮 Loading
-const detailData = ref() // 详情 Ref
-// 详情
-const handleDetail = (row: OperateLogApi.OperateLogVO) => {
- // 设置数据
- detailData.value = row
- dialogVisible.value = true
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await OperateLogApi.getOperateLogPage(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 modalRef = ref()
+const openModal = (data: OperateLogApi.OperateLogVO) => {
+ modalRef.value.openModal(data)
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await OperateLogApi.exportOperateLog(queryParams)
+ download.excel(data, '操作日志.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/system/operatelog/operatelog.data.ts b/src/views/system/operatelog/operatelog.data.ts
deleted file mode 100644
index f8b4ef90..00000000
--- a/src/views/system/operatelog/operatelog.data.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-
-const { t } = useI18n() // 国际化
-
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'id',
- primaryTitle: '日志编号',
- action: true,
- actionWidth: '80px',
- columns: [
- {
- title: '操作模块',
- field: 'module',
- isSearch: true
- },
- {
- title: '操作名',
- field: 'name'
- },
- {
- title: '操作类型',
- field: 'type',
- dictType: DICT_TYPE.SYSTEM_OPERATE_TYPE,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '请求方法名',
- field: 'requestMethod',
- isTable: false
- },
- {
- title: '请求地址',
- field: 'requestUrl',
- isTable: false
- },
- {
- title: '操作人员',
- field: 'userNickname',
- isSearch: true
- },
- {
- title: '操作明细',
- field: 'content',
- isTable: false
- },
- {
- title: '用户 IP',
- field: 'userIp',
- isTable: false
- },
- {
- title: 'userAgent',
- field: 'userAgent'
- },
- {
- title: '操作结果',
- field: 'resultCode',
- table: {
- slots: {
- default: 'resultCode'
- }
- }
- },
- {
- title: '操作结果',
- field: 'success',
- isTable: false,
- isDetail: false,
- search: {
- show: true,
- itemRender: {
- name: '$select',
- props: { placeholder: t('common.selectText') },
- options: [
- { label: '成功', value: 'true' },
- { label: '失败', value: 'false' }
- ]
- }
- }
- },
- {
- title: '操作日期',
- field: 'startTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- },
- {
- title: '执行时长',
- field: 'duration',
- table: {
- slots: {
- default: 'duration'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/post/PostForm.vue b/src/views/system/post/PostForm.vue
new file mode 100644
index 00000000..a9dec8b0
--- /dev/null
+++ b/src/views/system/post/PostForm.vue
@@ -0,0 +1,120 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible" width="800">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="岗位标题" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入岗位标题" />
+ </el-form-item>
+ <el-form-item label="岗位编码" prop="code">
+ <el-input :model-value="formData.code" placeholder="请输入岗位编码" height="150px" />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="formData.status" placeholder="请选择状态" clearable>
+ <el-option
+ v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="parseInt(dict.value)"
+ :label="dict.label"
+ :value="parseInt(dict.value)"
+ />
+ </el-select>
+ </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, getDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as PostApi from '@/api/system/post'
+
+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: '',
+ code: '',
+ sort: undefined,
+ status: CommonStatusEnum.ENABLE,
+ remark: ''
+})
+const formRules = reactive({
+ name: [{ required: true, message: '岗位标题不能为空', trigger: 'blur' }],
+ code: [{ required: true, message: '岗位编码不能为空', trigger: 'change' }],
+ status: [{ required: true, message: '岗位状态不能为空', trigger: 'change' }],
+ remark: [{ required: false, message: '岗位内容不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const openModal = 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 PostApi.getPost(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+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 PostApi.PostVO
+ if (formType.value === 'create') {
+ await PostApi.createPost(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await PostApi.updatePost(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: '',
+ code: '',
+ sort: undefined,
+ status: CommonStatusEnum.ENABLE,
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/post/form.vue b/src/views/system/post/form.vue
deleted file mode 100644
index 065aecaf..00000000
--- a/src/views/system/post/form.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
- <!-- 弹窗 -->
- <XModal :title="modelTitle" :loading="modelLoading" v-model="modelVisible">
- <!-- 表单：添加/修改 -->
- <Form
- ref="formRef"
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- />
- <!-- 表单：详情 -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
- />
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
- </template>
- </XModal>
-</template>
-<script setup lang="ts">
-import type { FormExpose } from '@/components/Form'
-import * as PostApi from '@/api/system/post'
-import { rules, allSchemas } from './post.data'
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-// 弹窗相关的变量
-const modelVisible = ref(false) // 是否显示弹出层
-const modelTitle = ref('') // 弹出层标题
-const modelLoading = ref(false) // 弹出层loading
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 打开弹窗
-const openModal = async (type: string, id?: number) => {
- modelVisible.value = true
- modelLoading.value = true
- modelTitle.value = t('action.' + type)
- actionType.value = type
- // 设置数据
- if (id) {
- const res = await PostApi.getPostApi(id)
- if (type === 'update') {
- unref(formRef)?.setValues(res)
- } else if (type === 'detail') {
- detailData.value = res
- }
- }
- modelLoading.value = false
-}
-defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
-
-// 提交新增/修改的表单
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
- // 校验表单
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- const valid = await elForm.validate()
- if (!valid) return
- // 提交请求
- actionLoading.value = true
- try {
- const data = unref(formRef)?.formModel as PostApi.PostVO
- if (actionType.value === 'create') {
- await PostApi.createPostApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await PostApi.updatePostApi(data)
- message.success(t('common.updateSuccess'))
- }
- modelVisible.value = false
- emit('success')
- } finally {
- actionLoading.value = false
- }
-}
-</script>
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index c5a13e1e..03e491d0 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -1,71 +1,198 @@
<template>
<ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
+ <!-- 搜索工作栏 -->
+ <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"
+ />
+ </el-form-item>
+ <el-form-item label="岗位编码" prop="code">
+ <el-input
+ v-model="queryParams.code"
+ placeholder="请输入岗位编码"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </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"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:post:create']"
@click="openModal('create')"
- />
- <!-- 操作：导出 -->
- <XButton
- type="primary"
+ v-hasPermi="['system:notice:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button
+ type="success"
plain
- preIcon="ep:download"
- :title="t('action.export')"
- v-hasPermi="['system:post:export']"
- @click="exportList('岗位列表.xls')"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:post:update']"
- @click="openModal('update', row?.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:post:query']"
- @click="openModal('detail', row?.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.delete')"
- v-hasPermi="['system:post:delete']"
- @click="deleteData(row?.id)"
- />
- </template>
- </XTable>
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['infra:config:export']"
+ >
+ <Icon icon="ep:download" class="mr-5px" /> 导出
+ </el-button>
+ </el-form-item>
+ </el-form>
</ContentWrap>
- <!-- 表单弹窗：添加/修改/详情 -->
- <PostForm ref="modalRef" @success="reload()" />
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list" align="center">
+ <el-table-column label="岗位编号" align="center" prop="id" />
+ <el-table-column label="岗位名称" align="center" prop="name" />
+ <el-table-column label="岗位编码" align="center" prop="code" />
+ <el-table-column label="岗位顺序" align="center" prop="sort" />
+ <el-table-column label="岗位备注" align="center" prop="remark" />
+ <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="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openModal('update', scope.row.id)"
+ v-hasPermi="['system:post:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:post:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <PostForm ref="formRef" @success="getList" />
</template>
-<script setup lang="ts" name="Post">
+<script setup lang="tsx">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
import * as PostApi from '@/api/system/post'
-import { allSchemas } from './post.data'
-import PostForm from './form.vue'
+import PostForm from './PostForm.vue'
+
+const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
- allSchemas: allSchemas, // 列表配置
- getListApi: PostApi.getPostPageApi, // 加载列表的 API
- deleteApi: PostApi.deletePostApi, // 删除数据的 API
- exportListApi: PostApi.exportPostApi // 导出数据的 API
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ code: '',
+ name: '',
+ status: undefined
})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
-// 表单相关的变量
-const modalRef = ref()
-const openModal = (type: string, id?: number) => {
- modalRef.value.openModal(type, id)
+/** 查询岗位列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await PostApi.getPostPage(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 formRef = ref()
+const openModal = (type: string, id?: number) => {
+ formRef.value.openModal(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await PostApi.deletePost(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await PostApi.exportPost(queryParams)
+ download.excel(data, '岗位列表.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
</script>
diff --git a/src/views/system/post/post.data.ts b/src/views/system/post/post.data.ts
deleted file mode 100644
index 4926bcc6..00000000
--- a/src/views/system/post/post.data.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
- name: [required],
- code: [required],
- sort: [required]
-})
-
-// 增删改查 CrudSchema 配置
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'id',
- primaryTitle: '岗位编号',
- action: true,
- columns: [
- {
- title: '岗位名称',
- field: 'name',
- isSearch: true
- },
- {
- title: '岗位编码',
- field: 'code',
- isSearch: true
- },
- {
- title: '岗位顺序',
- field: 'sort',
- form: {
- component: 'InputNumber'
- }
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '备注',
- field: 'remark',
- isTable: false
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- table: {
- width: 180
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/role/RoleAssignMenuForm.vue b/src/views/system/role/RoleAssignMenuForm.vue
new file mode 100644
index 00000000..db33811e
--- /dev/null
+++ b/src/views/system/role/RoleAssignMenuForm.vue
@@ -0,0 +1,154 @@
+<template>
+ <Dialog title="菜单权限" v-model="modelVisible">
+ <el-form ref="formRef" :model="formData" label-width="80px" v-loading="formLoading">
+ <el-form-item label="角色名称">
+ <el-tag>{{ formData.name }}</el-tag>
+ </el-form-item>
+ <el-form-item label="角色标识">
+ <el-tag>{{ formData.code }}</el-tag>
+ </el-form-item>
+ <el-form-item label="菜单权限">
+ <el-card class="cardHeight">
+ <template #header>
+ 全选/全不选:
+ <el-switch
+ v-model="treeNodeAll"
+ inline-prompt
+ active-text="是"
+ inactive-text="否"
+ @change="handleCheckedTreeNodeAll"
+ />
+ 全部展开/折叠:
+ <el-switch
+ v-model="menuExpand"
+ inline-prompt
+ active-text="展开"
+ inactive-text="折叠"
+ @change="handleCheckedTreeExpand"
+ />
+ </template>
+ <el-tree
+ ref="treeRef"
+ node-key="id"
+ show-checkbox
+ :props="defaultProps"
+ :data="menuOptions"
+ empty-text="加载中，请稍候"
+ />
+ </el-card>
+ </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 { handleTree, defaultProps } from '@/utils/tree'
+import * as RoleApi from '@/api/system/role'
+import * as MenuApi from '@/api/system/menu'
+import * as PermissionApi from '@/api/system/permission'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = reactive({
+ id: 0,
+ name: '',
+ code: '',
+ menuIds: []
+})
+const formRef = ref() // 表单 Ref
+const menuOptions = ref<any[]>([]) // 菜单树形结构
+const menuExpand = ref(false) // 展开/折叠
+const treeRef = ref() // 菜单树组件 Ref
+const treeNodeAll = ref(false) // 全选/全不选
+
+/** 打开弹窗 */
+const open = async (row: RoleApi.RoleVO) => {
+ modelVisible.value = true
+ resetForm()
+ // 加载 Menu 列表。注意，必须放在前面，不然下面 setChecked 没数据节点
+ menuOptions.value = handleTree(await MenuApi.getSimpleMenusList())
+ // 设置数据
+ formData.id = row.id
+ formData.name = row.name
+ formData.code = row.code
+ formLoading.value = true
+ try {
+ formData.value.menuIds = await PermissionApi.getRoleMenuList(row.id)
+ // 设置选中
+ formData.value.menuIds.forEach((menuId: number) => {
+ treeRef.value.setChecked(menuId, true, false)
+ })
+ } finally {
+ formLoading.value = false
+ }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = {
+ roleId: formData.id,
+ menuIds: [
+ ...(treeRef.value.getCheckedKeys(false) as unknown as Array<number>), // 获得当前选中节点
+ ...(treeRef.value.getHalfCheckedKeys() as unknown as Array<number>) // 获得半选中的父节点
+ ]
+ }
+ await PermissionApi.assignRoleMenu(data)
+ message.success(t('common.updateSuccess'))
+ modelVisible.value = false
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ // 重置选项
+ treeNodeAll.value = false
+ menuExpand.value = false
+ // 重置表单
+ formData.value = {
+ id: 0,
+ name: '',
+ code: '',
+ menuIds: []
+ }
+ treeRef.value?.setCheckedNodes([])
+ formRef.value?.resetFields()
+}
+
+/** 全选/全不选 */
+const handleCheckedTreeNodeAll = () => {
+ treeRef.value.setCheckedNodes(treeNodeAll.value ? menuOptions.value : [])
+}
+
+/** 展开/折叠全部 */
+const handleCheckedTreeExpand = () => {
+ const nodes = treeRef.value?.store.nodesMap
+ for (let node in nodes) {
+ if (nodes[node].expanded === menuExpand.value) {
+ continue
+ }
+ nodes[node].expanded = menuExpand.value
+ }
+}
+</script>
+<style lang="scss" scoped>
+.cardHeight {
+ width: 100%;
+ max-height: 400px;
+ overflow-y: scroll;
+}
+</style>
diff --git a/src/views/system/role/RoleDataPermissionForm.vue b/src/views/system/role/RoleDataPermissionForm.vue
new file mode 100644
index 00000000..9a331b6a
--- /dev/null
+++ b/src/views/system/role/RoleDataPermissionForm.vue
@@ -0,0 +1,161 @@
+<template>
+ <Dialog title="菜单权限" v-model="modelVisible" width="800">
+ <el-form ref="formRef" :model="formData" label-width="80px" v-loading="formLoading">
+ <el-form-item label="角色名称">
+ <el-tag>{{ formData.name }}</el-tag>
+ </el-form-item>
+ <el-form-item label="角色标识">
+ <el-tag>{{ formData.code }}</el-tag>
+ </el-form-item>
+ <el-form-item label="权限范围">
+ <el-select v-model="formData.dataScope">
+ <el-option
+ v-for="item in getIntDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE)"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-form>
+ <el-form-item
+ label="权限范围"
+ v-if="formData.dataScope === SystemDataScopeEnum.DEPT_CUSTOM"
+ style="display: flex"
+ >
+ <el-card class="card" shadow="never">
+ <template #header>
+ 全选/全不选:
+ <el-switch
+ v-model="treeNodeAll"
+ inline-prompt
+ active-text="是"
+ inactive-text="否"
+ @change="handleCheckedTreeNodeAll()"
+ />
+ 全部展开/折叠:
+ <el-switch
+ v-model="deptExpand"
+ inline-prompt
+ active-text="展开"
+ inactive-text="折叠"
+ @change="handleCheckedTreeExpand"
+ />
+ 父子联动(选中父节点，自动选择子节点):
+ <el-switch v-model="checkStrictly" inline-prompt active-text="是" inactive-text="否" />
+ </template>
+ <el-tree
+ ref="treeRef"
+ node-key="id"
+ show-checkbox
+ :check-strictly="!checkStrictly"
+ :props="defaultProps"
+ :data="deptOptions"
+ empty-text="加载中，请稍后"
+ default-expand-all
+ />
+ </el-card>
+ </el-form-item>
+ <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 { SystemDataScopeEnum } from '@/utils/constants'
+import * as RoleApi from '@/api/system/role'
+import * as DeptApi from '@/api/system/dept'
+import * as PermissionApi from '@/api/system/permission'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = reactive({
+ id: 0,
+ name: '',
+ code: '',
+ dataScope: undefined,
+ dataScopeDeptIds: []
+})
+const formRef = ref() // 表单 Ref
+const deptOptions = ref<any[]>([]) // 部门树形结构
+const deptExpand = ref(false) // 展开/折叠
+const treeRef = ref() // 菜单树组件 Ref
+const treeNodeAll = ref(false) // 全选/全不选
+const checkStrictly = ref(true) // 是否严格模式，即父子不关联
+
+/** 打开弹窗 */
+const open = async (row: RoleApi.RoleVO) => {
+ modelVisible.value = true
+ resetForm()
+ // 加载 Dept 列表。注意，必须放在前面，不然下面 setChecked 没数据节点
+ deptOptions.value = handleTree(await DeptApi.getSimpleDeptList())
+ // 设置数据
+ formData.id = row.id
+ formData.name = row.name
+ formData.code = row.code
+ formData.dataScope = row.dataScope
+ row.dataScopeDeptIds?.forEach((deptId: number) => {
+ treeRef.value.setChecked(deptId, true, false)
+ })
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+ formLoading.value = true
+ try {
+ const data = {
+ roleId: formData.id,
+ dataScope: formData.dataScope,
+ dataScopeDeptIds:
+ formData.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM
+ ? []
+ : treeRef.value.getCheckedKeys(false)
+ }
+ await PermissionApi.assignRoleDataScope(data)
+ message.success(t('common.updateSuccess'))
+ modelVisible.value = false
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ // 重置选项
+ treeNodeAll.value = false
+ deptExpand.value = false
+ checkStrictly.value = true
+ // 重置表单
+ formData.value = {
+ id: 0,
+ name: '',
+ code: '',
+ dataScope: undefined,
+ dataScopeDeptIds: []
+ }
+ treeRef.value?.setCheckedNodes([])
+ formRef.value?.resetFields()
+}
+
+/** 全选/全不选 */
+const handleCheckedTreeNodeAll = () => {
+ treeRef.value.setCheckedNodes(treeNodeAll.value ? deptOptions.value : [])
+}
+
+/** 展开/折叠全部 */
+const handleCheckedTreeExpand = () => {
+ const nodes = treeRef.value?.store.nodesMap
+ for (let node in nodes) {
+ if (nodes[node].expanded === deptExpand.value) {
+ continue
+ }
+ nodes[node].expanded = deptExpand.value
+ }
+}
+</script>
diff --git a/src/views/system/role/RoleForm.vue b/src/views/system/role/RoleForm.vue
new file mode 100644
index 00000000..e6444a03
--- /dev/null
+++ b/src/views/system/role/RoleForm.vue
@@ -0,0 +1,123 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="角色名称" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入角色名称" />
+ </el-form-item>
+ <el-form-item label="角色标识" prop="code">
+ <el-input :model-value="formData.code" placeholder="请输入角色标识" height="150px" />
+ </el-form-item>
+ <el-form-item label="显示顺序" prop="sort">
+ <el-input :model-value="formData.sort" placeholder="请输入显示顺序" height="150px" />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="formData.status" placeholder="请选择状态" clearable>
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </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 RoleApi from '@/api/system/role'
+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: '',
+ code: '',
+ sort: undefined,
+ status: CommonStatusEnum.ENABLE,
+ remark: ''
+})
+const formRules = reactive({
+ name: [{ required: true, message: '岗位标题不能为空', trigger: 'blur' }],
+ code: [{ required: true, message: '岗位编码不能为空', trigger: 'change' }],
+ sort: [{ required: true, message: '岗位顺序不能为空', trigger: 'change' }],
+ status: [{ required: true, message: '岗位状态不能为空', trigger: 'change' }],
+ remark: [{ required: false, message: '岗位内容不能为空', 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 RoleApi.getRole(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: '',
+ code: '',
+ sort: undefined,
+ status: CommonStatusEnum.ENABLE,
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
+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 RoleApi.RoleVO
+ if (formType.value === 'create') {
+ await RoleApi.createRole(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await RoleApi.updateRole(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index da4b8389..71f0c415 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,331 +1,251 @@
<template>
<ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <!-- 操作：新增 -->
- <template #toolbar_buttons>
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:role:create']"
- @click="handleCreate()"
+ <!-- 搜索工作栏 -->
+ <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="['system:role:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:role:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：菜单权限 -->
- <XTextButton
- preIcon="ep:basketball"
- title="菜单权限"
- v-hasPermi="['system:permission:assign-role-menu']"
- @click="handleScope('menu', row)"
- />
- <!-- 操作：数据权限 -->
- <XTextButton
- preIcon="ep:coin"
- title="数据权限"
- v-hasPermi="['system:permission:assign-role-data-scope']"
- @click="handleScope('data', row)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:role:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
-
- <XModal v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- ref="formRef"
- />
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <!-- 操作按钮 -->
- <template #footer>
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
- />
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
-
- <XModal v-model="dialogScopeVisible" :title="dialogScopeTitle">
- <el-form :model="dataScopeForm" label-width="140px" :inline="true">
- <el-form-item label="角色名称">
- <el-tag>{{ dataScopeForm.name }}</el-tag>
</el-form-item>
- <el-form-item label="角色标识">
- <el-tag>{{ dataScopeForm.code }}</el-tag>
+ <el-form-item label="角色标识" prop="code">
+ <el-input
+ v-model="queryParams.code"
+ placeholder="请输入角色标识"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
</el-form-item>
- <!-- 分配角色的数据权限对话框 -->
- <el-form-item label="权限范围" v-if="actionScopeType === 'data'">
- <el-select v-model="dataScopeForm.dataScope">
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
<el-option
- v-for="item in dataScopeDictDatas"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
/>
</el-select>
</el-form-item>
- <!-- 分配角色的菜单权限对话框 -->
- <el-row>
- <el-col :span="24">
- <el-form-item
- label="权限范围"
- v-if="
- actionScopeType === 'menu' ||
- dataScopeForm.dataScope === SystemDataScopeEnum.DEPT_CUSTOM
- "
- style="display: flex"
- >
- <el-card class="card" shadow="never">
- <template #header>
- 父子联动(选中父节点，自动选择子节点):
- <el-switch
- v-model="checkStrictly"
- inline-prompt
- active-text="是"
- inactive-text="否"
- />
- 全选/全不选:
- <el-switch
- v-model="treeNodeAll"
- inline-prompt
- active-text="是"
- inactive-text="否"
- @change="handleCheckedTreeNodeAll()"
- />
- </template>
- <el-tree
- ref="treeRef"
- node-key="id"
- show-checkbox
- :check-strictly="!checkStrictly"
- :props="defaultProps"
- :data="treeOptions"
- empty-text="加载中，请稍后"
- />
- </el-card>
- </el-form-item> </el-col
- ></el-row>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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>
+ <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"
+ plain
+ @click="openForm('create')"
+ v-hasPermi="['system:role:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['system:role:export']"
+ >
+ <Icon icon="ep:download" class="mr-5px" /> 导出
+ </el-button>
+ </el-form-item>
</el-form>
- <!-- 操作按钮 -->
- <template #footer>
- <XButton
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitScope()"
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <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="type" />
+ <el-table-column label="角色标识" align="center" prop="code" />
+ <el-table-column label="显示顺序" align="center" prop="sort" />
+ <el-table-column label="备注" align="center" prop="remark" />
+ <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="createTime"
+ width="180"
+ :formatter="dateFormatter"
/>
- <XButton
- :loading="actionLoading"
- :title="t('dialog.close')"
- @click="dialogScopeVisible = false"
- />
- </template>
- </XModal>
+ <el-table-column :width="300" label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['system:role:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ preIcon="ep:basketball"
+ title="菜单权限"
+ v-hasPermi="['system:permission:assign-role-menu']"
+ @click="openAssignMenuForm(scope.row)"
+ >
+ 菜单权限
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ preIcon="ep:coin"
+ title="数据权限"
+ v-hasPermi="['system:permission:assign-role-data-scope']"
+ @click="openDataPermissionForm(scope.row)"
+ >
+ 数据权限
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:role:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <RoleForm ref="formRef" @success="getList" />
+ <!-- 表单弹窗：菜单权限 -->
+ <RoleAssignMenuForm ref="assignMenuFormRef" />
+ <!-- 表单弹窗：数据权限 -->
+ <RoleDataPermissionForm ref="dataPermissionFormRef" />
</template>
-<script setup lang="ts" name="Role">
-import type { ElTree } from 'element-plus'
-import type { FormExpose } from '@/components/Form'
-import { handleTree, defaultProps } from '@/utils/tree'
-import { SystemDataScopeEnum } from '@/utils/constants'
+<script setup lang="tsx">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { rules, allSchemas } from './role.data'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
import * as RoleApi from '@/api/system/role'
-import { listSimpleMenusApi } from '@/api/system/menu'
-import { listSimpleDeptApi } from '@/api/system/dept'
-import * as PermissionApi from '@/api/system/permission'
-
-const { t } = useI18n() // 国际化
+import RoleForm from './RoleForm.vue'
+import RoleAssignMenuForm from './RoleAssignMenuForm.vue'
+import RoleDataPermissionForm from './RoleDataPermissionForm.vue'
const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- getListApi: RoleApi.getRolePageApi,
- deleteApi: RoleApi.deleteRoleApi
-})
+const { t } = useI18n() // 国际化
-// ========== CRUD 相关 ==========
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await RoleApi.getRoleApi(rowId)
- unref(formRef)?.setValues(res)
-}
-
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- // 设置数据
- const res = await RoleApi.getRoleApi(rowId)
- detailData.value = res
-}
-
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as RoleApi.RoleVO
- if (actionType.value === 'create') {
- await RoleApi.createRoleApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await RoleApi.updateRoleApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
-}
-
-// ========== 数据权限 ==========
-const dataScopeForm = reactive({
- id: 0,
- name: '',
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
code: '',
- dataScope: 0,
- checkList: []
+ name: '',
+ status: undefined,
+ createTime: []
})
-const treeOptions = ref<any[]>([]) // 菜单树形结构
-const treeRef = ref<InstanceType<typeof ElTree>>()
-const dialogScopeVisible = ref(false)
-const dialogScopeTitle = ref('数据权限')
-const actionScopeType = ref('')
-const dataScopeDictDatas = ref()
-// 选项
-const checkStrictly = ref(true)
-const treeNodeAll = ref(false)
-// 全选/全不选
-const handleCheckedTreeNodeAll = () => {
- treeRef.value!.setCheckedNodes(treeNodeAll.value ? treeOptions.value : [])
-}
-// 权限操作
-const handleScope = async (type: string, row: RoleApi.RoleVO) => {
- dataScopeForm.id = row.id
- dataScopeForm.name = row.name
- dataScopeForm.code = row.code
- actionScopeType.value = type
- dialogScopeVisible.value = true
- if (type === 'menu') {
- const menuRes = await listSimpleMenusApi()
- treeOptions.value = handleTree(menuRes)
- const role = await PermissionApi.listRoleMenusApi(row.id)
- if (role) {
- role?.forEach((item: any) => {
- unref(treeRef)?.setChecked(item, true, false)
- })
- }
- } else if (type === 'data') {
- const deptRes = await listSimpleDeptApi()
- treeOptions.value = handleTree(deptRes)
- const role = await RoleApi.getRoleApi(row.id)
- dataScopeForm.dataScope = role.dataScope
- if (role.dataScopeDeptIds) {
- role.dataScopeDeptIds?.forEach((item: any) => {
- unref(treeRef)?.setChecked(item, true, false)
- })
- }
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询角色列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await RoleApi.getRolePage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
}
}
-// 保存权限
-const submitScope = async () => {
- if ('data' === actionScopeType.value) {
- const data = ref<PermissionApi.PermissionAssignRoleDataScopeReqVO>({
- roleId: dataScopeForm.id,
- dataScope: dataScopeForm.dataScope,
- dataScopeDeptIds:
- dataScopeForm.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM
- ? []
- : (treeRef.value!.getCheckedKeys(false) as unknown as Array<number>)
- })
- await PermissionApi.assignRoleDataScopeApi(data.value)
- } else if ('menu' === actionScopeType.value) {
- const data = ref<PermissionApi.PermissionAssignRoleMenuReqVO>({
- roleId: dataScopeForm.id,
- menuIds: [
- ...(treeRef.value!.getCheckedKeys(false) as unknown as Array<number>),
- ...(treeRef.value!.getHalfCheckedKeys() as unknown as Array<number>)
- ]
- })
- await PermissionApi.assignRoleMenuApi(data.value)
+
+/** 搜索按钮操作 */
+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 dataPermissionFormRef = ref()
+const openDataPermissionForm = async (row: RoleApi.RoleVO) => {
+ dataPermissionFormRef.value.open(row)
+}
+
+/** 菜单权限操作 */
+const assignMenuFormRef = ref()
+const openAssignMenuForm = async (row: RoleApi.RoleVO) => {
+ assignMenuFormRef.value.open(row)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await RoleApi.deleteRole(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await RoleApi.exportRole(queryParams)
+ download.excel(data, '角色列表.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
}
- message.success(t('common.updateSuccess'))
- dialogScopeVisible.value = false
}
-const init = () => {
- dataScopeDictDatas.value = getIntDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE)
-}
-// ========== 初始化 ==========
+
+/** 初始化 **/
onMounted(() => {
- init()
+ getList()
})
</script>
-<style scoped>
-.card {
- width: 100%;
- max-height: 400px;
- overflow-y: scroll;
-}
-</style>
diff --git a/src/views/system/role/role.data.ts b/src/views/system/role/role.data.ts
deleted file mode 100644
index d55b5e21..00000000
--- a/src/views/system/role/role.data.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-// 国际化
-const { t } = useI18n()
-// 表单校验
-export const rules = reactive({
- name: [required],
- code: [required],
- sort: [required]
-})
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- // primaryKey: 'id',
- // primaryTitle: '角色编号',
- // primaryType: 'seq',
- action: true,
- actionWidth: '400px',
- columns: [
- {
- title: '角色编号',
- field: 'id',
- table: {
- width: 200
- }
- },
- {
- title: '角色名称',
- field: 'name',
- isSearch: true
- },
- {
- title: '角色类型',
- field: 'type',
- dictType: DICT_TYPE.SYSTEM_ROLE_TYPE,
- dictClass: 'number',
- isForm: false
- },
- {
- title: '角色标识',
- field: 'code',
- isSearch: true
- },
- {
- title: '显示顺序',
- field: 'sort'
- },
- {
- title: t('form.remark'),
- field: 'remark',
- isTable: false,
- form: {
- component: 'Input',
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- }
- },
- {
- 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,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/sensitiveWord/SensitiveWordForm.vue b/src/views/system/sensitiveWord/SensitiveWordForm.vue
new file mode 100644
index 00000000..c069756b
--- /dev/null
+++ b/src/views/system/sensitiveWord/SensitiveWordForm.vue
@@ -0,0 +1,128 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <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="description">
+ <el-input v-model="formData.description" placeholder="请输入内容" />
+ </el-form-item>
+ <el-form-item label="标签" prop="tags">
+ <el-select
+ v-model="formData.tags"
+ multiple
+ filterable
+ allow-create
+ placeholder="请选择文章标签"
+ style="width: 380px"
+ >
+ <el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
+ </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" name="SensitiveWordForm">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as SensitiveWordApi from '@/api/system/sensitiveWord'
+import { CommonStatusEnum } from '@/utils/constants'
+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: '',
+ status: CommonStatusEnum.ENABLE,
+ description: '',
+ tags: []
+})
+const formRules = reactive({
+ name: [{ required: true, message: '敏感词不能为空', trigger: 'blur' }],
+ tags: [{ required: true, message: '标签不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const tagList = 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 SensitiveWordApi.getSensitiveWord(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+ // 获得 Tag 标签列表
+ tagList.value = await SensitiveWordApi.getSensitiveWordTagList()
+}
+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 SensitiveWordApi.SensitiveWordVO
+ if (formType.value === 'create') {
+ await SensitiveWordApi.createSensitiveWord(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await SensitiveWordApi.updateSensitiveWord(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: '',
+ status: CommonStatusEnum.ENABLE,
+ description: '',
+ tags: []
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/sensitiveWord/SensitiveWordTestForm.vue b/src/views/system/sensitiveWord/SensitiveWordTestForm.vue
new file mode 100644
index 00000000..881309c8
--- /dev/null
+++ b/src/views/system/sensitiveWord/SensitiveWordTestForm.vue
@@ -0,0 +1,90 @@
+<template>
+ <Dialog title="检测敏感词" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="文本" prop="text">
+ <el-input type="textarea" v-model="formData.text" placeholder="请输入测试文本" />
+ </el-form-item>
+ <el-form-item label="标签" prop="tags">
+ <el-select
+ v-model="formData.tags"
+ multiple
+ filterable
+ allow-create
+ placeholder="请选择标签"
+ style="width: 380px"
+ >
+ <el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
+ </el-select>
+ </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>
+ </template>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import * as SensitiveWordApi from '@/api/system/sensitiveWord'
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+ text: '',
+ tags: []
+})
+const formRules = reactive({
+ text: [{ required: true, message: '测试文本不能为空', trigger: 'blur' }],
+ tags: [{ required: true, message: '标签不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const tagList = ref([]) // 标签数组
+
+/** 打开弹窗 */
+const open = async () => {
+ modelVisible.value = true
+ resetForm()
+ // 获得 Tag 标签列表
+ tagList.value = await SensitiveWordApi.getSensitiveWordTagList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const form = formData.value as unknown as SensitiveWordApi.SensitiveWordTestReqVO
+ const data = await SensitiveWordApi.validateText(form)
+ if (data.length === 0) {
+ message.success('不包含敏感词！')
+ return
+ }
+ message.warning('包含敏感词：' + data.join(', '))
+ modelVisible.value = false
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ text: '',
+ tags: []
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/sensitiveWord/index.vue b/src/views/system/sensitiveWord/index.vue
index c3de895d..5b73132b 100644
--- a/src/views/system/sensitiveWord/index.vue
+++ b/src/views/system/sensitiveWord/index.vue
@@ -1,191 +1,241 @@
<template>
+ <!-- 搜索工作栏 -->
<ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:sensitive-word:create']"
- @click="handleCreate()"
+ <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"
/>
- <!-- 操作：导出 -->
- <XButton
- type="warning"
- preIcon="ep:download"
- :title="t('action.export')"
- v-hasPermi="['system:sensitive-word:export']"
- @click="exportList('敏感词数据.xls')"
- />
- </template>
- <template #tags_default="{ row }">
- <el-tag
- :disable-transitions="true"
- :key="index"
- v-for="(tag, index) in row.tags"
- :index="index"
+ </el-form-item>
+ <el-form-item label="标签" prop="tag">
+ <el-select
+ v-model="queryParams.tag"
+ placeholder="请选择标签"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
>
- {{ tag }}
- </el-tag>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:sensitive-word:update']"
- @click="handleUpdate(row.id)"
+ <el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="请选择启用状态" clearable>
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ class="!w-240px"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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"
/>
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:sensitive-word:update']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:sensitive-word:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
+ </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"
+ plain
+ @click="openForm('create')"
+ v-hasPermi="['system:sensitive-word:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增
+ </el-button>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['system:sensitive-word:export']"
+ >
+ <Icon icon="ep:download" class="mr-5px" /> 导出
+ </el-button>
+ <el-button type="warning" plain @click="openTestForm">
+ <Icon icon="ep:document-checked" class="mr-5px" /> 测试
+ </el-button>
+ </el-form-item>
+ </el-form>
</ContentWrap>
- <XModal v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- ref="formRef"
- >
- <template #tags="form">
- <el-select v-model="form['tags']" multiple placeholder="请选择">
- <el-option v-for="item in tagsOptions" :key="item" :label="item" :value="item" />
- </el-select>
- </template>
- </Form>
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- >
- <template #tags="{ row }">
- <el-tag
- :disable-transitions="true"
- :key="index"
- v-for="(tag, index) in row.tags"
- :index="index"
- >
- {{ tag }}
- </el-tag>
- </template>
- </Descriptions>
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
+ <!-- 列表 -->
+ <ContentWrap>
+ <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="description" />
+ <el-table-column label="标签" align="center" prop="tags">
+ <template #default="scope">
+ <el-tag
+ class="mr-5px"
+ v-for="tag in scope.row.tags"
+ :key="tag"
+ :disable-transitions="true"
+ >
+ {{ tag }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
/>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['infra:config:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['infra:config:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <SensitiveWordForm ref="formRef" @success="getList" />
+
+ <!-- 表单弹窗：测试敏感词 -->
+ <SensitiveWordTestForm ref="testFormRef" />
</template>
<script setup lang="ts" name="SensitiveWord">
-import type { FormExpose } from '@/components/Form'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
import * as SensitiveWordApi from '@/api/system/sensitiveWord'
-import { rules, allSchemas } from './sensitiveWord.data'
-
-const { t } = useI18n() // 国际化
+import SensitiveWordForm from './SensitiveWordForm.vue'
+import SensitiveWordTestForm from './SensitiveWordTestForm.vue'
const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
- allSchemas: allSchemas,
- getListApi: SensitiveWordApi.getSensitiveWordPageApi,
- deleteApi: SensitiveWordApi.deleteSensitiveWordApi,
- exportListApi: SensitiveWordApi.exportSensitiveWordApi
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ name: undefined,
+ tag: undefined,
+ status: undefined,
+ createTime: []
})
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+const tagList = ref([]) // 标签数组
-// 获取标签
-const tagsOptions = ref()
-const getTags = async () => {
- const res = await SensitiveWordApi.getSensitiveWordTagsApi()
- tagsOptions.value = res
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await SensitiveWordApi.getSensitiveWordPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
}
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
}
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await SensitiveWordApi.getSensitiveWordApi(rowId)
- unref(formRef)?.setValues(res)
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
}
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- const res = await SensitiveWordApi.getSensitiveWordApi(rowId)
- detailData.value = res
+/** 测试敏感词按钮操作 */
+const testFormRef = ref()
+const openTestForm = () => {
+ testFormRef.value.open()
}
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as SensitiveWordApi.SensitiveWordVO
- if (actionType.value === 'create') {
- await SensitiveWordApi.createSensitiveWordApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await SensitiveWordApi.updateSensitiveWordApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await SensitiveWordApi.deleteSensitiveWord(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
}
-// ========== 初始化 ==========
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await SensitiveWordApi.exportSensitiveWord(queryParams)
+ download.excel(data, '敏感词.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
onMounted(async () => {
- await getTags()
+ await getList()
+ // 获得 Tag 标签列表
+ tagList.value = await SensitiveWordApi.getSensitiveWordTagList()
})
</script>
diff --git a/src/views/system/sensitiveWord/sensitiveWord.data.ts b/src/views/system/sensitiveWord/sensitiveWord.data.ts
deleted file mode 100644
index d21bb94c..00000000
--- a/src/views/system/sensitiveWord/sensitiveWord.data.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
- name: [required],
- tags: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'id',
- primaryTitle: '敏感词编号',
- action: true,
- columns: [
- {
- title: '敏感词',
- field: 'name',
- isSearch: true
- },
- {
- title: '标签',
- field: 'tag',
- isTable: false,
- isForm: false,
- isDetail: false,
- isSearch: true
- },
- {
- title: '标签',
- field: 'tags',
- table: {
- slots: {
- default: 'tags_default'
- }
- }
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '描述',
- field: 'description',
- form: {
- component: 'Input',
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- }
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/sms/channel/SmsChannelForm.vue b/src/views/system/sms/channel/SmsChannelForm.vue
new file mode 100644
index 00000000..3145af91
--- /dev/null
+++ b/src/views/system/sms/channel/SmsChannelForm.vue
@@ -0,0 +1,141 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="130px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="短信签名" prop="signature">
+ <el-input v-model="formData.signature" placeholder="请输入短信签名" />
+ </el-form-item>
+ <el-form-item label="渠道编码" prop="code">
+ <el-select v-model="formData.code" placeholder="请选择渠道编码" clearable>
+ <el-option
+ v-for="dict in getStrDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="启用状态">
+ <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" placeholder="请输入备注" />
+ </el-form-item>
+ <el-form-item label="短信 API 的账号" prop="apiKey">
+ <el-input v-model="formData.apiKey" placeholder="请输入短信 API 的账号" />
+ </el-form-item>
+ <el-form-item label="短信 API 的密钥" prop="apiSecret">
+ <el-input v-model="formData.apiSecret" placeholder="请输入短信 API 的密钥" />
+ </el-form-item>
+ <el-form-item label="短信发送回调 URL" prop="callbackUrl">
+ <el-input v-model="formData.callbackUrl" placeholder="请输入短信发送回调 URL" />
+ </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, getStrDictOptions } from '@/utils/dict'
+import * as SmsChannelApi from '@/api/system/sms/smsChannel'
+import { CommonStatusEnum } from '@/utils/constants'
+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,
+ signature: '',
+ code: '',
+ status: CommonStatusEnum.ENABLE,
+ remark: '',
+ apiKey: '',
+ apiSecret: '',
+ callbackUrl: ''
+})
+const formRules = reactive({
+ signature: [{ required: true, message: '短信签名不能为空', trigger: 'blur' }],
+ code: [{ required: true, message: '渠道编码不能为空', trigger: 'blur' }],
+ status: [{ required: true, message: '启用状态不能为空', trigger: 'blur' }],
+ apiKey: [{ required: true, message: '短信 API 的账号不能为空', 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 SmsChannelApi.getSmsChannel(id)
+ console.log(formData)
+ } 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 = unref(formRef)?.formModel as SmsChannelApi.SmsChannelVO
+ if (formType.value === 'create') {
+ await SmsChannelApi.createSmsChannel(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await SmsChannelApi.updateSmsChannel(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ signature: '',
+ code: '',
+ status: CommonStatusEnum.ENABLE,
+ remark: '',
+ apiKey: '',
+ apiSecret: '',
+ callbackUrl: ''
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/sms/channel/index.vue b/src/views/system/sms/channel/index.vue
new file mode 100644
index 00000000..62cd7cc2
--- /dev/null
+++ b/src/views/system/sms/channel/index.vue
@@ -0,0 +1,196 @@
+<template>
+ <ContentWrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="短信签名" prop="signature">
+ <el-input
+ v-model="queryParams.signature"
+ placeholder="请输入短信签名"
+ clearable
+ @keyup.enter="handleQuery"
+ />
+ </el-form-item>
+ <el-form-item label="启用状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="请选择启用状态" clearable>
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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')]"
+ />
+ </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="['system:sms-channel:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" /> 新增</el-button
+ >
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list" align="center">
+ <el-table-column label="编号" align="center" prop="id" />
+ <el-table-column label="短信签名" align="center" prop="signature" />
+ <el-table-column label="渠道编码" align="center" prop="code">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.code" />
+ </template>
+ </el-table-column>
+ <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" :show-overflow-tooltip="true" />
+ <el-table-column
+ label="短信 API 的账号"
+ align="center"
+ prop="apiKey"
+ :show-overflow-tooltip="true"
+ width="180"
+ />
+ <el-table-column
+ label="短信 API 的密钥"
+ align="center"
+ prop="apiSecret"
+ :show-overflow-tooltip="true"
+ width="180"
+ />
+ <el-table-column
+ label="短信发送回调 URL"
+ align="center"
+ prop="callbackUrl"
+ :show-overflow-tooltip="true"
+ width="180"
+ />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['system:sms-channel:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:sms-channel:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <SmsChannelForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts" name="SmsChannel">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as SmsChannelApi from '@/api/system/sms/smsChannel'
+import SmsChannelForm from './SmsChannelForm.vue'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const loading = ref(false) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryFormRef = ref() // 搜索的表单
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ signature: undefined,
+ status: undefined,
+ createTime: []
+})
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await SmsChannelApi.getSmsChannelPage(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 formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await SmsChannelApi.deleteSmsChannel(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
+})
+</script>
diff --git a/src/views/system/sms/log/SmsLogDetail.vue b/src/views/system/sms/log/SmsLogDetail.vue
new file mode 100644
index 00000000..736d0b8e
--- /dev/null
+++ b/src/views/system/sms/log/SmsLogDetail.vue
@@ -0,0 +1,87 @@
+<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="短信渠道">
+ {{ channelList.find((channel) => channel.id === detailData.channelId)?.signature }}
+ <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="detailData.channelCode" />
+ </el-descriptions-item>
+ <el-descriptions-item label="短信模板">
+ {{ detailData.templateId }} | {{ detailData.templateCode }}
+ <dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="detailData.templateType" />
+ </el-descriptions-item>
+ <el-descriptions-item label="API 的模板编号">
+ {{ detailData.apiTemplateId }}
+ </el-descriptions-item>
+ <el-descriptions-item label="用户信息">
+ {{ detailData.mobile }}
+ <span v-if="detailData.userType && detailData.userId">
+ <dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
+ ({{ detailData.userId }})
+ </span>
+ </el-descriptions-item>
+ <el-descriptions-item label="短信内容">
+ {{ detailData.templateContent }}
+ </el-descriptions-item>
+ <el-descriptions-item label="短信参数">
+ {{ detailData.templateParams }}
+ </el-descriptions-item>
+ <el-descriptions-item label="创建时间">
+ {{ formatDate(detailData.createTime) }}
+ </el-descriptions-item>
+ <el-descriptions-item label="发送状态">
+ <dict-tag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="detailData.sendStatus" />
+ </el-descriptions-item>
+ <el-descriptions-item label="发送时间">
+ {{ formatDate(detailData.sendTime) }}
+ </el-descriptions-item>
+ <el-descriptions-item label="发送结果">
+ {{ detailData.sendCode }} | {{ detailData.sendMsg }}
+ </el-descriptions-item>
+ <el-descriptions-item label="API 发送结果">
+ {{ detailData.apiSendCode }} | {{ detailData.apiSendMsg }}
+ </el-descriptions-item>
+ <el-descriptions-item label="API 短信编号">
+ {{ detailData.apiSerialNo }}
+ </el-descriptions-item>
+ <el-descriptions-item label="API 请求编号">
+ {{ detailData.apiRequestId }}
+ </el-descriptions-item>
+ <el-descriptions-item label="API 接收状态">
+ <dict-tag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="detailData.receiveStatus" />
+ {{ formatDate(detailData.receiveTime) }}
+ </el-descriptions-item>
+ <el-descriptions-item label="API 接收结果">
+ {{ detailData.apiReceiveCode }} | {{ detailData.apiReceiveMsg }}
+ </el-descriptions-item>
+ </el-descriptions>
+ </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as SmsLogApi from '@/api/system/sms/smsLog'
+import * as SmsChannelApi from '@/api/system/sms/smsChannel'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+const channelList = ref([]) // 短信渠道列表
+
+/** 打开弹窗 */
+const open = async (data: SmsLogApi.SmsLogVO) => {
+ modelVisible.value = true
+ // 设置数据
+ detailLoading.value = true
+ try {
+ detailData.value = data
+ } finally {
+ detailLoading.value = false
+ }
+ // 加载渠道列表
+ channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/src/views/system/sms/log/index.vue b/src/views/system/sms/log/index.vue
new file mode 100644
index 00000000..ec8a4659
--- /dev/null
+++ b/src/views/system/sms/log/index.vue
@@ -0,0 +1,263 @@
+<template>
+ <ContentWrap>
+ <!-- 搜索工作栏 -->
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="100px"
+ >
+ <el-form-item label="手机号" prop="mobile">
+ <el-input
+ v-model="queryParams.mobile"
+ placeholder="请输入手机号"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="短信渠道" prop="channelId">
+ <el-select
+ v-model="queryParams.channelId"
+ placeholder="请选择短信渠道"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="channel in channelList"
+ :key="channel.id"
+ :value="channel.id"
+ :label="
+ channel.signature +
+ `【 ${getDictLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code)}】`
+ "
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="模板编号" prop="templateId">
+ <el-input
+ v-model="queryParams.templateId"
+ placeholder="请输入模板编号"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="发送状态" prop="sendStatus">
+ <el-select
+ v-model="queryParams.sendStatus"
+ placeholder="请选择发送状态"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_SEND_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="发送时间" prop="sendTime">
+ <el-date-picker
+ v-model="queryParams.sendTime"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ type="daterange"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="接收状态" prop="receiveStatus">
+ <el-select
+ v-model="queryParams.receiveStatus"
+ placeholder="请选择接收状态"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="接收时间" prop="receiveTime">
+ <el-date-picker
+ v-model="queryParams.receiveTime"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ type="daterange"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ 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="['system:sms-log:export']"
+ >
+ <Icon icon="ep:download" class="mr-5px" /> 导出
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="编号" align="center" prop="id" />
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="手机号" align="center" prop="mobile" width="120">
+ <template #default="scope">
+ <div>{{ scope.row.mobile }}</div>
+ <div v-if="scope.row.userType && scope.row.userId">
+ <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
+ {{ '(' + scope.row.userId + ')' }}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="短信内容" align="center" prop="templateContent" width="300" />
+ <el-table-column label="发送状态" align="center" width="180">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="scope.row.sendStatus" />
+ <div>{{ formatDate(scope.row.sendTime) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column label="接收状态" align="center" width="180">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="scope.row.receiveStatus" />
+ <div>{{ formatDate(scope.row.receiveTime) }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column label="短信渠道" align="center" width="120">
+ <template #default="scope">
+ <div>
+ {{ channelList.find((channel) => channel.id === scope.row.channelId)?.signature }}
+ </div>
+ <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.channelCode" />
+ </template>
+ </el-table-column>
+ <el-table-column label="模板编号" align="center" prop="templateId" />
+ <el-table-column label="短信类型" align="center" prop="templateType">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="scope.row.templateType" />
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center" fixed="right" class-name="fixed-width">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openDetail(scope.row)"
+ v-hasPermi="['system:sms-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"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：详情 -->
+ <SmsLogDetail ref="detailRef" />
+</template>
+<script setup lang="ts" name="smsLog">
+import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
+import { dateFormatter, formatDate } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as SmsChannelApi from '@/api/system/sms/smsChannel'
+import * as SmsLogApi from '@/api/system/sms/smsLog'
+import SmsLogDetail from './SmsLogDetail.vue'
+const message = useMessage() // 消息弹窗
+
+const loading = ref(false) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryFormRef = ref() // 搜索的表单
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ channelId: null,
+ templateId: null,
+ mobile: '',
+ sendStatus: null,
+ receiveStatus: null,
+ sendTime: [],
+ receiveTime: []
+})
+const exportLoading = ref(false) // 导出的加载中
+const channelList = ref([]) // 短信渠道列表
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await SmsLogApi.getSmsLogPage(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 handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await SmsLogApi.exportSmsLog(queryParams)
+ download.excel(data, '短信日志.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 详情操作 */
+const detailRef = ref()
+const openDetail = (data: SmsLogApi.SmsLogVO) => {
+ detailRef.value.open(data)
+}
+
+/** 初始化 **/
+onMounted(async () => {
+ await getList()
+ // 加载渠道列表
+ channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
+})
+</script>
diff --git a/src/views/system/sms/smsChannel/index.vue b/src/views/system/sms/smsChannel/index.vue
deleted file mode 100644
index ee47a51a..00000000
--- a/src/views/system/sms/smsChannel/index.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <!-- 操作：新增 -->
- <template #toolbar_buttons>
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:sms-channel:create']"
- @click="handleCreate()"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:sms-channel:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:sms-channel:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:sms-channel:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
-
- <XModal id="smsChannel" v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- ref="formRef"
- />
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
- />
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
-</template>
-<script setup lang="ts" name="SmsChannel">
-import type { FormExpose } from '@/components/Form'
-// 业务相关的 import
-import * as SmsChannelApi from '@/api/system/sms/smsChannel'
-import { rules, allSchemas } from './sms.channel.data'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- getListApi: SmsChannelApi.getSmsChannelPageApi,
- deleteApi: SmsChannelApi.deleteSmsChannelApi
-})
-
-// 弹窗相关的变量
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await SmsChannelApi.getSmsChannelApi(rowId)
- unref(formRef)?.setValues(res)
-}
-
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- const res = await SmsChannelApi.getSmsChannelApi(rowId)
- detailData.value = res
-}
-
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as SmsChannelApi.SmsChannelVO
- if (actionType.value === 'create') {
- await SmsChannelApi.createSmsChannelApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await SmsChannelApi.updateSmsChannelApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
-}
-</script>
diff --git a/src/views/system/sms/smsChannel/sms.channel.data.ts b/src/views/system/sms/smsChannel/sms.channel.data.ts
deleted file mode 100644
index 71b096e5..00000000
--- a/src/views/system/sms/smsChannel/sms.channel.data.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
-
-const { t } = useI18n() // 国际化
-
-const authorizedGrantOptions = getStrDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE)
-
-// 表单校验
-export const rules = reactive({
- signature: [required],
- code: [required],
- apiKey: [required],
- status: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'id',
- primaryTitle: '渠道编号',
- action: true,
- columns: [
- {
- title: '短信签名',
- field: 'signature',
- isSearch: true
- },
- {
- title: '渠道编码',
- field: 'code',
- // dictType: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE,
- // dictClass: 'string',
- isSearch: true,
- form: {
- component: 'Select',
- componentProps: {
- options: authorizedGrantOptions,
- multiple: false,
- filterable: true
- }
- }
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '短信 API 的账号',
- field: 'apiKey'
- },
- {
- title: '短信 API 的密钥',
- field: 'apiSecret'
- },
- {
- title: '短信发送回调 URL',
- field: 'callbackUrl'
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/sms/smsLog/index.vue b/src/views/system/sms/smsLog/index.vue
deleted file mode 100644
index 334da2ad..00000000
--- a/src/views/system/sms/smsLog/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <!-- 操作：导出 -->
- <template #toolbar_buttons>
- <XButton
- type="warning"
- preIcon="ep:download"
- :title="t('action.export')"
- @click="exportList('短信日志.xls')"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
- </template>
- </XTable>
- </ContentWrap>
-
- <XModal id="smsLog" v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <!-- 操作按钮 -->
- <template #footer>
- <XButton :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
-</template>
-<script setup lang="ts" name="SmsLog">
-import { allSchemas } from './sms.log.data'
-import * as SmsLoglApi from '@/api/system/sms/smsLog'
-const { t } = useI18n() // 国际化
-
-// 列表相关的变量
-const [registerTable, { exportList }] = useXTable({
- allSchemas: allSchemas,
- getListApi: SmsLoglApi.getSmsLogPageApi,
- exportListApi: SmsLoglApi.exportSmsLogApi
-})
-
-// 弹窗相关的变量
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref(t('action.detail')) // 弹出层标题
-const actionType = ref('') // 操作按钮的类型
-// ========== 详情相关 ==========
-const detailData = ref() // 详情 Ref
-const handleDetail = (row: SmsLoglApi.SmsLogVO) => {
- // 设置数据
- actionType.value = 'detail'
- detailData.value = row
- dialogVisible.value = true
-}
-</script>
diff --git a/src/views/system/sms/smsLog/sms.log.data.ts b/src/views/system/sms/smsLog/sms.log.data.ts
deleted file mode 100644
index c975bb0f..00000000
--- a/src/views/system/sms/smsLog/sms.log.data.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
-
-const { t } = useI18n() // 国际化
-
-const authorizedGrantOptions = getStrDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE)
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'id',
- primaryTitle: '日志编号',
- action: true,
- columns: [
- {
- title: '手机号',
- field: 'mobile',
- isSearch: true
- },
- {
- title: '短信内容',
- field: 'templateContent'
- },
- {
- title: '模板编号',
- field: 'templateId',
- isSearch: true
- },
- {
- title: '短信渠道',
- field: 'channelId',
- // dictType: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE,
- // dictClass: 'number',
- isSearch: true,
- // table: {
- // component: 'Select',
- componentProps: {
- options: authorizedGrantOptions
- // multiple: false,
- // filterable: true
- }
- // }
- },
- {
- title: '发送状态',
- field: 'sendStatus',
- dictType: DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '发送时间',
- field: 'sendTime',
- formatter: 'formatDate',
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- },
- {
- title: '短信类型',
- field: 'templateType',
- dictType: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '接收状态',
- field: 'receiveStatus',
- dictType: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: '接收时间',
- field: 'receiveTime',
- formatter: 'formatDate',
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate'
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/sms/smsTemplate/index.vue b/src/views/system/sms/smsTemplate/index.vue
deleted file mode 100644
index bbc7c863..00000000
--- a/src/views/system/sms/smsTemplate/index.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<template>
- <ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <!-- 操作：新增 -->
- <template #toolbar_buttons>
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:sms-channel:create']"
- @click="handleCreate()"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <XTextButton
- preIcon="ep:cpu"
- :title="t('action.test')"
- v-hasPermi="['system:sms-template:send-sms']"
- @click="handleSendSms(row)"
- />
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:sms-template:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:sms-template:query']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:sms-template:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <XModal id="smsTemplate" v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- ref="formRef"
- />
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- />
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
- />
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
- <XModal id="sendTest" v-model="sendVisible" title="测试">
- <el-form :model="sendSmsForm" :rules="sendSmsRules" label-width="200px" label-position="top">
- <el-form-item label="模板内容" prop="content">
- <el-input
- v-model="sendSmsForm.content"
- type="textarea"
- placeholder="请输入模板内容"
- readonly
- />
- </el-form-item>
- <el-form-item label="手机号" prop="mobile">
- <el-input v-model="sendSmsForm.mobile" placeholder="请输入手机号" />
- </el-form-item>
- <el-form-item
- v-for="param in sendSmsForm.params"
- :key="param"
- :label="'参数 {' + param + '}'"
- :prop="'templateParams.' + param"
- >
- <el-input
- v-model="sendSmsForm.templateParams[param]"
- :placeholder="'请输入 ' + param + ' 参数'"
- />
- </el-form-item>
- </el-form>
- <!-- 操作按钮 -->
- <template #footer>
- <XButton
- type="primary"
- :title="t('action.test')"
- :loading="actionLoading"
- @click="sendSmsTest()"
- />
- <XButton :title="t('dialog.close')" @click="sendVisible = false" />
- </template>
- </XModal>
-</template>
-<script setup lang="ts" name="SmsTemplate">
-import type { FormExpose } from '@/components/Form'
-// 业务相关的 import
-import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
-import { rules, allSchemas } from './sms.template.data'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-// 列表相关的变量
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- getListApi: SmsTemplateApi.getSmsTemplatePageApi,
- deleteApi: SmsTemplateApi.deleteSmsTemplateApi
-})
-
-// 弹窗相关的变量
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
- setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await SmsTemplateApi.getSmsTemplateApi(rowId)
- unref(formRef)?.setValues(res)
-}
-
-// 详情操作
-const handleDetail = async (rowId: number) => {
- setDialogTile('detail')
- // 设置数据
- const res = await SmsTemplateApi.getSmsTemplateApi(rowId)
- detailData.value = res
-}
-
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as SmsTemplateApi.SmsTemplateVO
- if (actionType.value === 'create') {
- await SmsTemplateApi.createSmsTemplateApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await SmsTemplateApi.updateSmsTemplateApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
-}
-
-// ========== 测试相关 ==========
-const sendSmsForm = ref({
- content: '',
- params: {},
- mobile: '',
- templateCode: '',
- templateParams: {}
-})
-const sendSmsRules = ref({
- mobile: [{ required: true, message: '手机不能为空', trigger: 'blur' }],
- templateCode: [{ required: true, message: '模版编号不能为空', trigger: 'blur' }],
- templateParams: {}
-})
-const sendVisible = ref(false)
-
-const handleSendSms = (row: any) => {
- sendSmsForm.value.content = row.content
- sendSmsForm.value.params = row.params
- sendSmsForm.value.templateCode = row.code
- sendSmsForm.value.templateParams = row.params.reduce(function (obj, item) {
- obj[item] = undefined
- return obj
- }, {})
- sendSmsRules.value.templateParams = row.params.reduce(function (obj, item) {
- obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'change' }
- return obj
- }, {})
- sendVisible.value = true
-}
-
-const sendSmsTest = async () => {
- const data: SmsTemplateApi.SendSmsReqVO = {
- mobile: sendSmsForm.value.mobile,
- templateCode: sendSmsForm.value.templateCode,
- templateParams: sendSmsForm.value.templateParams as unknown as Map<string, Object>
- }
- const res = await SmsTemplateApi.sendSmsApi(data)
- if (res) {
- message.success('提交发送成功！发送结果，见发送日志编号：' + res)
- }
- sendVisible.value = false
-}
-</script>
diff --git a/src/views/system/sms/smsTemplate/sms.template.data.ts b/src/views/system/sms/smsTemplate/sms.template.data.ts
deleted file mode 100644
index 6178d6c2..00000000
--- a/src/views/system/sms/smsTemplate/sms.template.data.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-import * as smsApi from '@/api/system/sms/smsChannel'
-const { t } = useI18n() // 国际化
-const tenantPackageOption = []
-const getTenantPackageOptions = async () => {
- const res = await smsApi.getSimpleSmsChannels()
- console.log(res, 'resresres')
- res.forEach((tenantPackage: TenantPackageVO) => {
- tenantPackageOption.push({
- key: tenantPackage.id,
- value: tenantPackage.id,
- label: tenantPackage.signature
- })
- })
-}
-getTenantPackageOptions()
-// 表单校验
-export const rules = reactive({
- type: [required],
- status: [required],
- code: [required],
- name: [required],
- content: [required],
- apiTemplateId: [required],
- channelId: [required]
-})
-
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'id',
- primaryTitle: '模板编号',
- action: true,
- actionWidth: '280',
- columns: [
- {
- title: '短信渠道编码',
- field: 'channelId',
- isSearch: false,
- isForm: true,
- isTable: false,
- form: {
- component: 'Select',
- componentProps: {
- options: tenantPackageOption
- }
- }
- },
- {
- title: '模板编码',
- field: 'code',
- isSearch: true
- },
- {
- title: '模板名称',
- field: 'name',
- isSearch: true
- },
- {
- title: '模板内容',
- field: 'content'
- },
- {
- title: '短信 API 的模板编号',
- field: 'apiTemplateId',
- isSearch: true
- },
- {
- title: '短信类型',
- field: 'type',
- dictType: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
- dictClass: 'number',
- isSearch: true,
- table: {
- width: 80
- }
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- isSearch: true,
- table: {
- width: 80
- }
- },
- {
- title: t('form.remark'),
- field: 'remark',
- isTable: false
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/sms/template/SmsTemplateForm.vue b/src/views/system/sms/template/SmsTemplateForm.vue
new file mode 100644
index 00000000..03684215
--- /dev/null
+++ b/src/views/system/sms/template/SmsTemplateForm.vue
@@ -0,0 +1,160 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="140px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="短信渠道编号" prop="channelId">
+ <el-select v-model="formData.channelId" placeholder="请选择短信渠道编号">
+ <el-option
+ v-for="channel in channelList"
+ :key="channel.id"
+ :value="channel.id"
+ :label="
+ channel.signature +
+ `【 ${getDictLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code)}】`
+ "
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="短信类型" prop="type">
+ <el-select v-model="formData.type" placeholder="请选择短信类型">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="模板编号" prop="code">
+ <el-input v-model="formData.code" placeholder="请输入模板编号" />
+ </el-form-item>
+ <el-form-item label="模板名称" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入模板名称" />
+ </el-form-item>
+ <el-form-item label="模板内容" prop="content">
+ <el-input type="textarea" v-model="formData.content" 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="parseInt(dict.value as string)"
+ >
+ {{ dict.label }}
+ </el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="短信 API 模板编号" prop="apiTemplateId">
+ <el-input v-model="formData.apiTemplateId" placeholder="请输入短信 API 的模板编号" />
+ </el-form-item>
+ <el-form-item label="备注" prop="remark">
+ <el-input 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 { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
+import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
+import * as SmsChannelApi from '@/api/system/sms/smsChannel'
+import { CommonStatusEnum } from '@/utils/constants'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型
+const formData = ref<SmsTemplateApi.SmsTemplateVO>({
+ id: null,
+ type: null,
+ status: CommonStatusEnum.ENABLE,
+ code: '',
+ name: '',
+ content: '',
+ remark: '',
+ apiTemplateId: '',
+ channelId: null
+})
+const formRules = reactive({
+ type: [{ required: true, message: '短信类型不能为空', trigger: 'change' }],
+ status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
+ code: [{ required: true, message: '模板编码不能为空', trigger: 'blur' }],
+ name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
+ content: [{ required: true, message: '模板内容不能为空', trigger: 'blur' }],
+ apiTemplateId: [{ required: true, message: '短信 API 的模板编号不能为空', trigger: 'blur' }],
+ channelId: [{ required: true, message: '短信渠道编号不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+const channelList = ref<SmsChannelApi.SmsChannelVO[]>([]) // 短信渠道列表
+
+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 SmsTemplateApi.getSmsTemplate(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+ // 加载渠道列表
+ channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
+}
+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 SmsTemplateApi.SmsTemplateVO
+ if (formType.value === 'create') {
+ await SmsTemplateApi.createSmsTemplate(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await SmsTemplateApi.updateSmsTemplate(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: null,
+ type: null,
+ status: CommonStatusEnum.ENABLE,
+ code: '',
+ name: '',
+ content: '',
+ remark: '',
+ apiTemplateId: '',
+ channelId: null
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/sms/template/SmsTemplateSendForm.vue b/src/views/system/sms/template/SmsTemplateSendForm.vue
new file mode 100644
index 00000000..f2ecbe9f
--- /dev/null
+++ b/src/views/system/sms/template/SmsTemplateSendForm.vue
@@ -0,0 +1,117 @@
+<template>
+ <Dialog title="测试" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="140px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="模板内容" prop="content">
+ <el-input
+ v-model="formData.content"
+ type="textarea"
+ placeholder="请输入模板内容"
+ readonly
+ />
+ </el-form-item>
+ <el-form-item label="手机号" prop="mobile">
+ <el-input v-model="formData.mobile" placeholder="请输入手机号" />
+ </el-form-item>
+ <el-form-item
+ v-for="param in formData.params"
+ :key="param"
+ :label="'参数 {' + param + '}'"
+ :prop="'templateParams.' + param"
+ >
+ <el-input
+ v-model="formData.templateParams[param]"
+ :placeholder="'请输入 ' + param + ' 参数'"
+ />
+ </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 SmsTemplateApi from '@/api/system/sms/smsTemplate'
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+
+// 发送短信表单相关
+const formData = ref({
+ content: '',
+ params: {},
+ mobile: '',
+ templateCode: '',
+ templateParams: new Map()
+})
+const formRules = reactive({
+ mobile: [{ required: true, message: '手机不能为空', trigger: 'blur' }],
+ templateCode: [{ required: true, message: '模版编码不能为空', trigger: 'blur' }],
+ templateParams: {}
+})
+const formRef = ref() // 表单 Ref
+
+const open = async (id: number) => {
+ modelVisible.value = true
+ resetForm()
+ // 设置数据
+ formLoading.value = true
+ try {
+ const data = await SmsTemplateApi.getSmsTemplate(id)
+ // 设置动态表单
+ formData.value.content = data.content
+ formData.value.params = data.params
+ formData.value.templateCode = data.code
+ formData.value.templateParams = data.params.reduce((obj, item) => {
+ obj[item] = '' // 给每个动态属性赋值，避免无法读取
+ return obj
+ }, {})
+ formRules.templateParams = data.params.reduce((obj, item) => {
+ obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'blur' }
+ return obj
+ }, {})
+ } finally {
+ formLoading.value = false
+ }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formData.value as SmsTemplateApi.SendSmsReqVO
+ const logId = await SmsTemplateApi.sendSms(data)
+ if (logId) {
+ message.success('提交发送成功！发送结果，见发送日志编号：' + logId)
+ }
+ modelVisible.value = false
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ content: '',
+ params: {},
+ mobile: '',
+ templateCode: '',
+ templateParams: new Map()
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/sms/template/index.vue b/src/views/system/sms/template/index.vue
new file mode 100644
index 00000000..906436a5
--- /dev/null
+++ b/src/views/system/sms/template/index.vue
@@ -0,0 +1,311 @@
+<template>
+ <ContentWrap>
+ <!-- 搜索工作栏 -->
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="150px"
+ >
+ <el-form-item label="短信类型" prop="type">
+ <el-select
+ v-model="queryParams.type"
+ placeholder="请选择短信类型"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="开启状态" prop="status">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择开启状态"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="模板编码" prop="code">
+ <el-input
+ v-model="queryParams.code"
+ placeholder="请输入模板编码"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="短信 API 的模板编号" prop="apiTemplateId">
+ <el-input
+ v-model="queryParams.apiTemplateId"
+ placeholder="请输入短信 API 的模板编号"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="短信渠道" prop="channelId">
+ <el-select
+ v-model="queryParams.channelId"
+ placeholder="请选择短信渠道"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="channel in channelList"
+ :key="channel.id"
+ :value="channel.id"
+ :label="
+ channel.signature +
+ `【 ${getDictLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code)}】`
+ "
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ style="width: 240px"
+ type="daterange"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ 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"
+ plain
+ @click="openForm('create')"
+ v-hasPermi="['system:sms-template:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" />新增
+ </el-button>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['system:sms-template:export']"
+ >
+ <Icon icon="ep:download" class="mr-5px" /> 导出
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list" align="center">
+ <el-table-column
+ label="模板编码"
+ align="center"
+ prop="code"
+ width="120"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="模板名称"
+ align="center"
+ prop="name"
+ width="120"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="模板内容"
+ align="center"
+ prop="content"
+ width="200"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column label="短信类型" align="center" prop="type">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="scope.row.type" />
+ </template>
+ </el-table-column>
+ <el-table-column label="状态" align="center" prop="status" width="80">
+ <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="短信 API 的模板编号"
+ align="center"
+ prop="apiTemplateId"
+ width="200"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column label="短信渠道" align="center" width="120">
+ <template #default="scope">
+ <div>
+ {{ channelList.find((channel) => channel.id === scope.row.channelId)?.signature }}
+ </div>
+ <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.channelCode" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center" width="210" fixed="right">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['system:sms-template:update']"
+ >
+ 修改
+ </el-button>
+ <el-button
+ link
+ type="primary"
+ @click="openSendForm(scope.row.id)"
+ v-hasPermi="['system:sms-template:send-sms']"
+ >
+ 测试
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:sms-template:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <SmsTemplateForm ref="formRef" @success="getList" />
+ <!-- 表单弹窗：测试发送 -->
+ <SmsTemplateSendForm ref="sendFormRef" />
+</template>
+<script setup lang="ts" name="SmsTemplate">
+import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
+import * as SmsChannelApi from '@/api/system/sms/smsChannel'
+import download from '@/utils/download'
+import SmsTemplateForm from './SmsTemplateForm.vue'
+import SmsTemplateSendForm from './SmsTemplateSendForm.vue'
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(false) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryFormRef = ref() // 搜索的表单
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ type: null,
+ status: null,
+ code: '',
+ content: '',
+ apiTemplateId: '',
+ channelId: null,
+ createTime: []
+})
+const exportLoading = ref(false) // 导出的加载中
+const channelList = ref<SmsChannelApi.SmsChannelVO[]>([]) // 短信渠道列表
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await SmsTemplateApi.getSmsTemplatePage(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 formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
+}
+
+/** 发送短信按钮 */
+const sendFormRef = ref()
+const openSendForm = (id: number) => {
+ sendFormRef.value.open(id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await SmsTemplateApi.deleteSmsTemplate(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await SmsTemplateApi.exportSmsTemplate(queryParams)
+ download.excel(data, '短信模板.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(async () => {
+ await getList()
+ // 加载渠道列表
+ channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
+})
+</script>
diff --git a/src/views/system/tenant/form.vue b/src/views/system/tenant/form.vue
new file mode 100644
index 00000000..4a6eaae4
--- /dev/null
+++ b/src/views/system/tenant/form.vue
@@ -0,0 +1,174 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible" width="50%">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="租户名" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入租户名" />
+ </el-form-item>
+ <el-form-item label="租户套餐" prop="packageId">
+ <el-select v-model="formData.packageId" placeholder="请选择租户套餐" clearable>
+ <el-option
+ v-for="item in packageList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="联系人" prop="contactName">
+ <el-input v-model="formData.contactName" placeholder="请输入联系人" />
+ </el-form-item>
+ <el-form-item label="联系手机" prop="contactMobile">
+ <el-input v-model="formData.contactMobile" placeholder="请输入联系手机" />
+ </el-form-item>
+ <el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
+ <el-input v-model="formData.username" placeholder="请输入用户名称" />
+ </el-form-item>
+ <el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
+ <el-input
+ v-model="formData.password"
+ placeholder="请输入用户密码"
+ type="password"
+ show-password
+ />
+ </el-form-item>
+ <el-form-item label="账号额度" prop="accountCount">
+ <el-input-number
+ v-model="formData.accountCount"
+ placeholder="请输入账号额度"
+ controls-position="right"
+ :min="0"
+ />
+ </el-form-item>
+ <el-form-item label="过期时间" prop="expireTime">
+ <el-date-picker
+ clearable
+ v-model="formData.expireTime"
+ type="date"
+ value-format="x"
+ placeholder="请选择过期时间"
+ />
+ </el-form-item>
+ <el-form-item label="绑定域名" prop="domain">
+ <el-input v-model="formData.domain" 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>
+ <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 * as TenantApi from '@/api/system/tenant'
+import { CommonStatusEnum } from '@/utils/constants'
+import * as TenantPackageApi from '@/api/system/tenantPackage'
+
+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,
+ packageId: undefined,
+ contactName: undefined,
+ contactMobile: undefined,
+ accountCount: undefined,
+ expireTime: undefined,
+ domain: undefined,
+ status: CommonStatusEnum.ENABLE
+})
+const formRules = reactive({
+ name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }],
+ packageId: [{ required: true, message: '租户套餐不能为空', trigger: 'blur' }],
+ contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
+ status: [{ required: true, message: '租户状态不能为空', trigger: 'blur' }],
+ accountCount: [{ required: true, message: '账号额度不能为空', trigger: 'blur' }],
+ expireTime: [{ required: true, message: '过期时间不能为空', trigger: 'blur' }],
+ domain: [{ required: true, message: '绑定域名不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const packageList = 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 TenantApi.getTenant(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+ // 加载套餐列表
+ packageList.value = await TenantPackageApi.getTenantPackageList()
+}
+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 TenantApi.TenantVO
+ if (formType.value === 'create') {
+ await TenantApi.createTenant(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await TenantApi.updateTenant(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ name: undefined,
+ packageId: undefined,
+ contactName: undefined,
+ contactMobile: undefined,
+ accountCount: undefined,
+ expireTime: undefined,
+ domain: undefined,
+ status: CommonStatusEnum.ENABLE
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index bb1ca1a3..1991fbea 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -1,197 +1,257 @@
<template>
+ <!-- 搜索 -->
<ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:tenant:create']"
- @click="handleCreate()"
- />
- <XButton
- type="warning"
- preIcon="ep:download"
- :title="t('action.export')"
- v-hasPermi="['system:tenant:export']"
- @click="exportList('租户列表.xls')"
- />
- </template>
- <template #accountCount_default="{ row }">
- <el-tag> {{ row.accountCount }} </el-tag>
- </template>
- <template #packageId_default="{ row }">
- <el-tag v-if="row.packageId === 0" type="danger">系统租户</el-tag>
- <el-tag v-else type="success"> {{ getPackageName(row.packageId) }} </el-tag>
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：修改 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:tenant:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:tenant:update']"
- @click="handleDetail(row.id)"
- />
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:tenant:delete']"
- @click="deleteData(row.id)"
- />
- </template>
- </XTable>
- </ContentWrap>
- <XModal v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- ref="formRef"
- />
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
>
- <template #packageId="{ row }">
- <el-tag v-if="row.packageId === 0" type="danger">系统租户</el-tag>
- <el-tag v-else type="success"> {{ getPackageName(row.packageId) }} </el-tag>
- </template>
- </Descriptions>
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="actionLoading"
- @click="submitForm()"
+ <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 label="联系人" prop="contactName">
+ <el-input
+ v-model="queryParams.contactName"
+ placeholder="请输入联系人"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="联系手机" prop="contactMobile">
+ <el-input
+ v-model="queryParams.contactMobile"
+ placeholder="请输入联系手机"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="租户状态" prop="status">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择租户状态"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ 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>
+ <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="['system:tenant:create']">
+ <Icon icon="ep:plus" class="mr-5px" />
+ 新增
+ </el-button>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['system:tenant:export']"
+ >
+ <Icon icon="ep:download" class="mr-5px" />
+ 导出
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list" align="center">
+ <el-table-column label="租户编号" align="center" prop="id" />
+ <el-table-column label="租户名" align="center" prop="name" />
+ <el-table-column label="租户套餐" align="center" prop="packageId">
+ <template #default="scope">
+ <el-tag v-if="scope.row.packageId === 0" type="danger">系统租户</el-tag>
+ <template v-else v-for="item in packageList">
+ <el-tag type="success" :key="item.id" v-if="item.id === scope.row.packageId"
+ >{{ item.name }}
+ </el-tag>
+ </template>
+ </template>
+ </el-table-column>
+ <el-table-column label="联系人" align="center" prop="contactName" />
+ <el-table-column label="联系手机" align="center" prop="contactMobile" />
+ <el-table-column label="账号额度" align="center" prop="accountCount">
+ <template #default="scope">
+ <el-tag>{{ scope.row.accountCount }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="过期时间"
+ align="center"
+ prop="expireTime"
+ width="180"
+ :formatter="dateFormatter"
/>
- <!-- 按钮：关闭 -->
- <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ <el-table-column label="绑定域名" align="center" prop="domain" width="180" />
+ <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="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="操作" align="center" min-width="110" fixed="right">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['system:tenant:update']"
+ >
+ 编辑
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:tenant:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <TenantForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="Tenant">
-import type { FormExpose } from '@/components/Form'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
import * as TenantApi from '@/api/system/tenant'
-import { rules, allSchemas, tenantPackageOption } from './tenant.data'
+import * as TenantPackageApi from '@/api/system/tenantPackage'
+import TenantForm from './form.vue'
-const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
- allSchemas: allSchemas,
- getListApi: TenantApi.getTenantPageApi,
- deleteApi: TenantApi.deleteTenantApi,
- exportListApi: TenantApi.exportTenantApi
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ name: undefined,
+ contactName: undefined,
+ contactMobile: undefined,
+ status: undefined,
+ createTime: []
})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+const packageList = ref([]) //租户套餐列表
-const actionLoading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-const detailData = ref() // 详情 Ref
-const getPackageName = (packageId: number) => {
- for (let item of tenantPackageOption) {
- if (item.value === packageId) {
- return item.label
- }
- }
- return '未知套餐'
-}
-
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = async () => {
- // 重置表单
- setDialogTile('create')
- await nextTick()
- console.log(allSchemas.formSchema, 'allSchemas.formSchema')
- if (allSchemas.formSchema[4].field !== 'username') {
- unref(formRef)?.addSchema(
- {
- field: 'username',
- label: '用户名称',
- component: 'Input'
- },
- 0
- )
- unref(formRef)?.addSchema(
- {
- field: 'password',
- label: '用户密码',
- component: 'InputPassword'
- },
- 1
- )
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await TenantApi.getTenantPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
}
}
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- await nextTick()
- unref(formRef)?.delSchema('username')
- unref(formRef)?.delSchema('password')
- // 设置数据
- const res = await TenantApi.getTenantApi(rowId)
- unref(formRef)?.setValues(res)
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
-// 详情操作
-const handleDetail = async (rowId: number) => {
- // 设置数据
- const res = await TenantApi.getTenantApi(rowId)
- detailData.value = res
- setDialogTile('detail')
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value.resetFields()
+ handleQuery()
}
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- actionLoading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as TenantApi.TenantVO
- if (actionType.value === 'create') {
- await TenantApi.createTenantApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await TenantApi.updateTenantApi(data)
- message.success(t('common.updateSuccess'))
- }
- // 操作成功，重新加载列表
- dialogVisible.value = false
- } finally {
- actionLoading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await TenantApi.deleteTenant(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await TenantApi.exportTenant(queryParams)
+ download.excel(data, '租户列表.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 初始化 **/
+onMounted(async () => {
+ await getList()
+ packageList.value = await TenantPackageApi.getTenantPackageList()
+})
</script>
diff --git a/src/views/system/tenant/tenant.data.ts b/src/views/system/tenant/tenant.data.ts
deleted file mode 100644
index 2c1e846a..00000000
--- a/src/views/system/tenant/tenant.data.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-import { getTenantPackageList, TenantPackageVO } from '@/api/system/tenantPackage'
-import { ComponentOptions } from '@/types/components'
-
-const { t } = useI18n() // 国际化
-
-export const tenantPackageOption: ComponentOptions[] = []
-const getTenantPackageOptions = async () => {
- const res = await getTenantPackageList()
- res.forEach((tenantPackage: TenantPackageVO) => {
- tenantPackageOption.push({
- key: tenantPackage.id,
- value: tenantPackage.id,
- label: tenantPackage.name
- })
- })
-
- return tenantPackageOption
-}
-getTenantPackageOptions()
-
-const validateName = (rule: any, value: any, callback: any) => {
- const reg = /^[a-zA-Z0-9]{4,30}$/
- if (value === '') {
- callback(new Error('请输入用户名称'))
- } else {
- console.log(reg.test(rule), 'reg.test(rule)')
- if (!reg.test(value)) {
- callback(new Error('用户名称由 数字、字母 组成'))
- } else {
- callback()
- }
- }
-}
-const validateMobile = (rule: any, value: any, callback: any) => {
- const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
- if (value === '') {
- callback(new Error('请输入联系手机'))
- } else {
- if (!reg.test(value)) {
- callback(new Error('请输入正确的手机号'))
- } else {
- callback()
- }
- }
-}
-
-// 表单校验
-export const rules = reactive({
- name: [required],
- packageId: [required],
- contactName: [required],
- contactMobile: [
- required,
- {
- validator: validateMobile,
- trigger: 'blur'
- }
- ],
- accountCount: [required],
- expireTime: [required],
- username: [
- required,
- {
- min: 4,
- max: 30,
- trigger: 'blur',
- message: '用户名称长度为 4-30 个字符'
- },
- { validator: validateName, trigger: 'blur' }
- ],
- password: [
- required,
- {
- min: 4,
- max: 16,
- trigger: 'blur',
- message: '密码长度为 4-16 位'
- }
- ],
- domain: [required],
- status: [required]
-})
-
-// CrudSchema.
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryTitle: '租户编号',
- primaryType: 'id',
- action: true,
- columns: [
- {
- title: '租户名称',
- field: 'name',
- isSearch: true
- },
- {
- title: '租户套餐',
- field: 'packageId',
- table: {
- slots: {
- default: 'packageId_default'
- }
- },
- form: {
- component: 'Select',
- componentProps: {
- options: tenantPackageOption
- }
- }
- },
- {
- title: '联系人',
- field: 'contactName',
- isSearch: true
- },
- {
- title: '联系手机',
- field: 'contactMobile',
- isSearch: true
- },
- {
- title: '用户名称',
- field: 'username',
- isTable: false,
- isDetail: false
- },
- {
- title: '用户密码',
- field: 'password',
- isTable: false,
- isDetail: false,
- form: {
- component: 'InputPassword'
- }
- },
- {
- title: '账号额度',
- field: 'accountCount',
- table: {
- slots: {
- default: 'accountCount_default'
- }
- },
- form: {
- component: 'InputNumber',
- value: null,
- componentProps: {
- min: 1
- }
- }
- },
- {
- title: '过期时间',
- field: 'expireTime',
- formatter: 'formatDate',
- form: {
- component: 'DatePicker',
- componentProps: {
- type: 'datetime',
- valueFormat: 'x'
- }
- }
- },
- {
- title: '绑定域名',
- field: 'domain'
- },
- {
- title: '租户状态',
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- isSearch: true
- },
- {
- title: t('table.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/tenantPackage/TenantPackageForm.vue b/src/views/system/tenantPackage/TenantPackageForm.vue
new file mode 100644
index 00000000..6ba78e96
--- /dev/null
+++ b/src/views/system/tenantPackage/TenantPackageForm.vue
@@ -0,0 +1,191 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-form-item label="套餐名" prop="name">
+ <el-input v-model="formData.name" placeholder="请输入套餐名" />
+ </el-form-item>
+ <el-form-item label="菜单权限">
+ <el-card class="cardHeight">
+ <template #header>
+ 全选/全不选:
+ <el-switch
+ v-model="treeNodeAll"
+ inline-prompt
+ active-text="是"
+ inactive-text="否"
+ @change="handleCheckedTreeNodeAll"
+ />
+ 全部展开/折叠:
+ <el-switch
+ v-model="menuExpand"
+ inline-prompt
+ active-text="展开"
+ inactive-text="折叠"
+ @change="handleCheckedTreeExpand"
+ />
+ </template>
+ <el-tree
+ ref="treeRef"
+ node-key="id"
+ show-checkbox
+ :props="defaultProps"
+ :data="menuOptions"
+ empty-text="加载中，请稍候"
+ />
+ </el-card>
+ </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="parseInt(dict.value)"
+ >
+ {{ dict.label }}
+ </el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="备注" prop="remark">
+ <el-input 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" name="TenantPackageForm">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as TenantPackageApi from '@/api/system/tenantPackage'
+import * as MenuApi from '@/api/system/menu'
+import { ElTree } from 'element-plus'
+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: null,
+ name: null,
+ remark: null,
+ menuIds: [],
+ status: CommonStatusEnum.ENABLE
+})
+const formRules = reactive({
+ name: [{ required: true, message: '套餐名不能为空', trigger: 'blur' }],
+ status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
+ menuIds: [{ required: true, message: '关联的菜单编号不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const menuOptions = ref<any[]>([]) // 树形结构数据
+const menuExpand = ref(false) // 展开/折叠
+const treeRef = ref<InstanceType<typeof ElTree>>() // 树组件 Ref
+const treeNodeAll = ref(false) // 全选/全不选
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+ modelVisible.value = true
+ modelTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+ // 加载 Menu 列表。注意，必须放在前面，不然下面 setChecked 没数据节点
+ menuOptions.value = handleTree(await MenuApi.getSimpleMenusList())
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ const res = await TenantPackageApi.getTenantPackage(id)
+ // 设置选中
+ formData.value = res
+ // 设置选中
+ res.menuIds.forEach((menuId: number) => {
+ treeRef.value.setChecked(menuId, true, false)
+ })
+ } 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 as unknown as TenantPackageApi.TenantPackageVO
+ data.menuIds = [
+ ...(treeRef.value.getCheckedKeys(false) as unknown as Array<number>), // 获得当前选中节点
+ ...(treeRef.value.getHalfCheckedKeys() as unknown as Array<number>) // 获得半选中的父节点
+ ]
+ if (formType.value === 'create') {
+ await TenantPackageApi.createTenantPackage(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await TenantPackageApi.updateTenantPackage(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ // 重置选项
+ treeNodeAll.value = false
+ menuExpand.value = false
+ // 重置表单
+ formData.value = {
+ id: null,
+ name: null,
+ remark: null,
+ menuIds: [],
+ status: CommonStatusEnum.ENABLE
+ }
+ treeRef.value?.setCheckedNodes([])
+ formRef.value?.resetFields()
+}
+
+/** 全选/全不选 */
+const handleCheckedTreeNodeAll = () => {
+ treeRef.value.setCheckedNodes(treeNodeAll.value ? menuOptions.value : [])
+}
+
+/** 展开/折叠全部 */
+const handleCheckedTreeExpand = () => {
+ const nodes = treeRef.value?.store.nodesMap
+ for (let node in nodes) {
+ if (nodes[node].expanded === menuExpand.value) {
+ continue
+ }
+ nodes[node].expanded = menuExpand.value
+ }
+}
+</script>
+<style lang="scss" scoped>
+.cardHeight {
+ width: 100%;
+ max-height: 400px;
+ overflow-y: scroll;
+}
+</style>
diff --git a/src/views/system/tenantPackage/index.vue b/src/views/system/tenantPackage/index.vue
index c8f5756a..7e99815d 100644
--- a/src/views/system/tenantPackage/index.vue
+++ b/src/views/system/tenantPackage/index.vue
@@ -1,187 +1,172 @@
<template>
+ <!-- 搜索 -->
<ContentWrap>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- @click="handleCreate()"
+ <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')" @click="handleUpdate(row.id)" />
- <XTextButton preIcon="ep:delete" :title="t('action.del')" @click="deleteData(row.id)" />
- </template>
- </XTable>
- <XModal v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :schema="allSchemas.formSchema"
- :rules="rules"
- ref="formRef"
- >
- <template #menuIds>
- <el-card class="cardHeight">
- <template #header>
- <div class="card-header">
- 全选/全不选:
- <el-switch
- v-model="treeNodeAll"
- inline-prompt
- active-text="是"
- inactive-text="否"
- @change="handleCheckedTreeNodeAll()"
- />
- </div>
- </template>
- <el-tree
- ref="treeRef"
- node-key="id"
- show-checkbox
- :props="defaultProps"
- :data="menuOptions"
- empty-text="加载中，请稍候"
- />
- </el-card>
- </template>
- </Form>
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="loading"
- @click="submitForm()"
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ type="daterange"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ class="!w-240px"
/>
- <!-- 按钮：关闭 -->
- <XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
+ </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="['system:tenant-package:create']"
+ >
+ <Icon icon="ep:plus" class="mr-5px" />
+ 新增
+ </el-button>
+ </el-form-item>
+ </el-form>
</ContentWrap>
+
+ <!-- 列表 -->
+ <ContentWrap>
+ <el-table v-loading="loading" :data="list" align="center">
+ <el-table-column label="套餐编号" align="center" prop="id" width="120" />
+ <el-table-column label="套餐名" align="center" prop="name" />
+ <el-table-column label="状态" align="center" prop="status" width="100">
+ <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" width="180">
+ <template #default="scope">
+ <span>{{ formatDate(scope.row.createTime) }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+ <template #default="scope">
+ <el-button
+ link
+ type="primary"
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['system:tenant-package:update']"
+ >
+ 修改
+ </el-button>
+ <el-button
+ link
+ type="danger"
+ @click="handleDelete(scope.row.id)"
+ v-hasPermi="['system:tenant-package:delete']"
+ >
+ 删除
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 分页 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+
+ <!-- 表单弹窗：添加/修改 -->
+ <TenantPackageForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="TenantPackage">
-import { handleTree, defaultProps } from '@/utils/tree'
-import type { FormExpose } from '@/components/Form'
-import type { ElTree } from 'element-plus'
-// 业务相关的 import
-import { rules, allSchemas } from './tenantPackage.data'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
import * as TenantPackageApi from '@/api/system/tenantPackage'
-import { listSimpleMenusApi } from '@/api/system/menu'
-
-const { t } = useI18n() // 国际化
+import TenantPackageForm from './TenantPackageForm.vue'
const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
-const menuOptions = ref<any[]>([]) // 树形结构
-const menuExpand = ref(false)
-const menuNodeAll = ref(false)
-const treeRef = ref<InstanceType<typeof ElTree>>()
-const treeNodeAll = ref(false)
-const formRef = ref<FormExpose>() // 表单 Ref
-const loading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ name: null,
+ status: null,
+ remark: null,
+ createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
-// 全选/全不选
-const handleCheckedTreeNodeAll = () => {
- treeRef.value!.setCheckedNodes(treeNodeAll.value ? menuOptions.value : [])
-}
-
-const validateCategory = (rule: any, value: any, callback: any) => {
- if (!treeRef.value!.getCheckedKeys().length) {
- callback(new Error('该项为必填项'))
- } else {
- callback()
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await TenantPackageApi.getTenantPackagePage(queryParams.value)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
}
}
-rules.menuIds = [{ required: true, validator: validateCategory, trigger: 'blur' }]
-const getTree = async () => {
- const res = await listSimpleMenusApi()
- menuOptions.value = handleTree(res)
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
-const [registerTable, { reload, deleteData }] = useXTable({
- allSchemas: allSchemas,
- getListApi: TenantPackageApi.getTenantPackageTypePageApi,
- deleteApi: TenantPackageApi.deleteTenantPackageTypeApi
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value?.resetFields()
+ getList()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await TenantPackageApi.deleteTenantPackage(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+ getList()
})
-
-// 设置标题
-const setDialogTile = (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
-}
-
-// 新增操作
-const handleCreate = () => {
- //重置菜单树
- unref(treeRef)?.setCheckedKeys([])
- menuExpand.value = false
- menuNodeAll.value = false
- setDialogTile('create')
-}
-
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- // 设置数据
- const res = await TenantPackageApi.getTenantPackageApi(rowId)
- unref(formRef)?.setValues(res)
- // 设置选中
- res.menuIds?.forEach((item: any) => {
- unref(treeRef)?.setChecked(item, true, false)
- })
-}
-
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- loading.value = true
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as TenantPackageApi.TenantPackageVO
- data.menuIds = [
- ...(treeRef.value!.getCheckedKeys(false) as unknown as Array<number>),
- ...(treeRef.value!.getHalfCheckedKeys() as unknown as Array<number>)
- ]
- if (actionType.value === 'create') {
- await TenantPackageApi.createTenantPackageTypeApi(data)
- message.success(t('common.createSuccess'))
- } else {
- await TenantPackageApi.updateTenantPackageTypeApi(data)
- message.success(t('common.updateSuccess'))
- }
- // 操作成功，重新加载列表
- dialogVisible.value = false
- } finally {
- loading.value = false
- // 刷新列表
- await reload()
- }
- }
- })
-}
-
-// ========== 初始化 ==========
-onMounted(async () => {
- await getTree()
-})
-// getList()
</script>
-<style scoped>
-.cardHeight {
- width: 100%;
- max-height: 400px;
- overflow-y: scroll;
-}
-</style>
diff --git a/src/views/system/tenantPackage/tenantPackage.data.ts b/src/views/system/tenantPackage/tenantPackage.data.ts
deleted file mode 100644
index d57dee29..00000000
--- a/src/views/system/tenantPackage/tenantPackage.data.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-const { t } = useI18n() // 国际化
-
-// 表单校验
-export const rules = reactive({
- name: [required],
- id: [required],
- type: [required],
- remark: [required],
- status: [required],
- menuIds: [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',
- isSearch: true
- },
- {
- title: '菜单权限',
- field: 'menuIds',
- isTable: false,
- form: {
- colProps: {
- span: 24
- }
- }
- },
- {
- title: t('form.remark'),
- field: 'remark',
- isTable: true,
- isSearch: true,
- form: {
- component: 'Input',
- componentProps: {
- type: 'textarea',
- rows: 4
- },
- colProps: {
- span: 24
- }
- }
- },
- {
- title: '创建时间',
- field: 'createTime',
- formatter: 'formatDate',
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/src/views/system/user/DeptTree.vue b/src/views/system/user/DeptTree.vue
new file mode 100644
index 00000000..87ffaf9a
--- /dev/null
+++ b/src/views/system/user/DeptTree.vue
@@ -0,0 +1,56 @@
+<template>
+ <div class="head-container">
+ <el-input v-model="deptName" placeholder="请输入部门名称" clearable class="mb-20px">
+ <template #prefix>
+ <Icon icon="ep:search" />
+ </template>
+ </el-input>
+ </div>
+ <div class="head-container">
+ <el-tree
+ :data="deptList"
+ :props="defaultProps"
+ node-key="id"
+ :expand-on-click-node="false"
+ :filter-node-method="filterNode"
+ ref="treeRef"
+ default-expand-all
+ highlight-current
+ @node-click="handleNodeClick"
+ />
+ </div>
+</template>
+
+<script setup lang="ts" name="UserDeptTree">
+import { ElTree } from 'element-plus'
+import * as DeptApi from '@/api/system/dept'
+import { defaultProps, handleTree } from '@/utils/tree'
+
+const deptName = ref('')
+const deptList = ref<Tree[]>([]) // 树形结构
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+/** 获得部门树 */
+const getTree = async () => {
+ const res = await DeptApi.getSimpleDeptList()
+ deptList.value = []
+ deptList.value.push(...handleTree(res))
+}
+
+/** 基于名字过滤 */
+const filterNode = (name: string, data: Tree) => {
+ if (!name) return true
+ return data.name.includes(name)
+}
+
+/** 处理部门被点击 */
+const handleNodeClick = async (row: { [key: string]: any }) => {
+ emits('node-click', row)
+}
+const emits = defineEmits(['node-click'])
+
+/** 初始化 */
+onMounted(async () => {
+ await getTree()
+})
+</script>
diff --git a/src/views/system/user/UserAssignRoleForm.vue b/src/views/system/user/UserAssignRoleForm.vue
new file mode 100644
index 00000000..2dc04e52
--- /dev/null
+++ b/src/views/system/user/UserAssignRoleForm.vue
@@ -0,0 +1,93 @@
+<template>
+ <Dialog title="分配角色" v-model="modelVisible">
+ <el-form ref="formRef" :model="formData" label-width="80px" v-loading="formLoading">
+ <el-form-item label="用户名称">
+ <el-input v-model="formData.username" :disabled="true" />
+ </el-form-item>
+ <el-form-item label="用户昵称">
+ <el-input v-model="formData.nickname" :disabled="true" />
+ </el-form-item>
+ <el-form-item label="角色">
+ <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
+ <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
+ </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 * as PermissionApi from '@/api/system/permission'
+import * as UserApi from '@/api/system/user'
+import * as RoleApi from '@/api/system/role'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+ id: undefined,
+ nickname: '',
+ username: '',
+ roleIds: []
+})
+const formRef = ref() // 表单 Ref
+const roleList = ref([]) // 角色的列表
+
+/** 打开弹窗 */
+const open = async (row: UserApi.UserVO) => {
+ modelVisible.value = true
+ resetForm()
+ // 设置数据
+ formData.value.id = row.id
+ formData.value.username = row.username
+ formData.value.nickname = row.nickname
+ // 获得角色拥有的菜单集合
+ formLoading.value = true
+ try {
+ formData.value.roleIds = await PermissionApi.getUserRoleList(row.id)
+ } finally {
+ formLoading.value = false
+ }
+ // 获得角色列表
+ roleList.value = await RoleApi.getSimpleRoleList()
+}
+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 {
+ await PermissionApi.assignUserRole({
+ userId: formData.value.id,
+ roleIds: formData.value.roleIds
+ })
+ message.success(t('common.updateSuccess'))
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success', true)
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ nickname: '',
+ username: '',
+ roleIds: []
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/user/UserForm.vue b/src/views/system/user/UserForm.vue
new file mode 100644
index 00000000..ecf67fce
--- /dev/null
+++ b/src/views/system/user/UserForm.vue
@@ -0,0 +1,215 @@
+<template>
+ <Dialog :title="modelTitle" v-model="modelVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="80px"
+ v-loading="formLoading"
+ >
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="用户昵称" prop="nickname">
+ <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="归属部门" prop="deptId">
+ <el-tree-select
+ node-key="id"
+ v-model="formData.deptId"
+ :data="deptList"
+ :props="defaultProps"
+ check-strictly
+ placeholder="请选择归属部门"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="手机号码" prop="mobile">
+ <el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="邮箱" prop="email">
+ <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
+ <el-input v-model="formData.username" placeholder="请输入用户名称" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
+ <el-input
+ v-model="formData.password"
+ placeholder="请输入用户密码"
+ type="password"
+ show-password
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="用户性别">
+ <el-select v-model="formData.sex" placeholder="请选择">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="岗位">
+ <el-select v-model="formData.postIds" multiple placeholder="请选择">
+ <el-option
+ v-for="item in postList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="24">
+ <el-form-item label="备注">
+ <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </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 lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { CommonStatusEnum } from '@/utils/constants'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as PostApi from '@/api/system/post'
+import * as DeptApi from '@/api/system/dept'
+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({
+ nickname: '',
+ deptId: '',
+ mobile: '',
+ email: '',
+ id: undefined,
+ username: '',
+ password: '',
+ sex: undefined,
+ postIds: [],
+ remark: '',
+ status: CommonStatusEnum.ENABLE,
+ roleIds: []
+})
+const formRules = reactive({
+ username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
+ nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
+ password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
+ email: [
+ {
+ type: 'email',
+ message: '请输入正确的邮箱地址',
+ trigger: ['blur', 'change']
+ }
+ ],
+ mobile: [
+ {
+ pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
+ message: '请输入正确的手机号码',
+ trigger: 'blur'
+ }
+ ]
+})
+const formRef = ref() // 表单 Ref
+const deptList = ref<Tree[]>([]) // 树形结构
+const postList = 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 UserApi.getUser(id)
+ } finally {
+ formLoading.value = false
+ }
+ }
+ // 加载部门树
+ deptList.value = handleTree(await DeptApi.getSimpleDeptList())
+ // 加载岗位列表
+ postList.value = await PostApi.getSimplePostList()
+}
+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 UserApi.UserVO
+ if (formType.value === 'create') {
+ await UserApi.createUser(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await UserApi.updateUser(data)
+ message.success(t('common.updateSuccess'))
+ }
+ modelVisible.value = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ nickname: '',
+ deptId: '',
+ mobile: '',
+ email: '',
+ id: undefined,
+ username: '',
+ password: '',
+ sex: undefined,
+ postIds: [],
+ remark: '',
+ status: CommonStatusEnum.ENABLE,
+ roleIds: []
+ }
+ formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/system/user/UserImportForm.vue b/src/views/system/user/UserImportForm.vue
new file mode 100644
index 00000000..0e96bf29
--- /dev/null
+++ b/src/views/system/user/UserImportForm.vue
@@ -0,0 +1,129 @@
+<template>
+ <Dialog title="用户导入" v-model="modelVisible" width="400">
+ <el-upload
+ ref="uploadRef"
+ :action="importUrl + '?updateSupport=' + updateSupport"
+ :headers="uploadHeaders"
+ v-model:file-list="fileList"
+ drag
+ accept=".xlsx, .xls"
+ :limit="1"
+ :on-success="submitFormSuccess"
+ :on-exceed="handleExceed"
+ :on-error="submitFormError"
+ :auto-upload="false"
+ :disabled="formLoading"
+ >
+ <Icon icon="ep:upload" />
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+ <template #tip>
+ <div class="el-upload__tip text-center">
+ <div class="el-upload__tip">
+ <el-checkbox v-model="updateSupport" /> 是否更新已经存在的用户数据
+ </div>
+ <span>仅允许导入 xls、xlsx 格式文件。</span>
+ <el-link
+ type="primary"
+ :underline="false"
+ style="font-size: 12px; vertical-align: baseline"
+ @click="importTemplate"
+ >
+ 下载模板
+ </el-link>
+ </div>
+ </template>
+ </el-upload>
+ <template #footer>
+ <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+ <el-button @click="modelVisible = false">取 消</el-button>
+ </template>
+ </Dialog>
+</template>
+<script lang="ts" setup>
+import * as UserApi from '@/api/system/user'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+import download from '@/utils/download'
+const message = useMessage() // 消息弹窗
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const uploadRef = ref()
+const importUrl =
+ import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/user/import'
+const uploadHeaders = ref() // 上传 Header 头
+const fileList = ref([]) // 文件列表
+const updateSupport = ref(0) // 是否更新已经存在的用户数据
+
+/** 打开弹窗 */
+const open = () => {
+ modelVisible.value = true
+ resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+ if (fileList.value.length == 0) {
+ message.error('请上传文件')
+ return
+ }
+ // 提交请求
+ uploadHeaders.value = {
+ Authorization: 'Bearer ' + getAccessToken(),
+ 'tenant-id': getTenantId()
+ }
+ formLoading.value = true
+ uploadRef.value!.submit()
+}
+
+/** 文件上传成功 */
+const emits = defineEmits(['success'])
+const submitFormSuccess = (response: any) => {
+ if (response.code !== 0) {
+ message.error(response.msg)
+ formLoading.value = false
+ return
+ }
+ // 拼接提示语
+ const data = response.data
+ let text = '上传成功数量：' + data.createUsernames.length + ';'
+ for (let username of data.createUsernames) {
+ text += '< ' + username + ' >'
+ }
+ text += '更新成功数量：' + data.updateUsernames.length + ';'
+ for (const username of data.updateUsernames) {
+ text += '< ' + username + ' >'
+ }
+ text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
+ for (const username in data.failureUsernames) {
+ text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
+ }
+ message.alert(text)
+ // 发送操作成功的事件
+ emits('success')
+}
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+ message.error('上传失败，请您重新上传！')
+ formLoading.value = false
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ // 重置上传状态和文件
+ formLoading.value = false
+ uploadRef.value?.clearFiles()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+ message.error('最多只能上传一个文件！')
+}
+
+/** 下载模板操作 */
+const importTemplate = async () => {
+ const res = await UserApi.importUserTemplate()
+ download.excel(res, '用户导入模版.xls')
+}
+</script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index c59e6d18..b0f7f964 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,577 +1,350 @@
<template>
- <div class="flex">
- <el-card class="w-1/5 user" :gutter="12" shadow="always">
- <template #header>
- <div class="card-header">
- <span>部门列表</span>
- <XTextButton title="修改部门" @click="handleDeptEdit()" />
- </div>
- </template>
- <el-input v-model="filterText" placeholder="搜索部门" />
- <el-scrollbar height="650">
- <el-tree
- ref="treeRef"
- node-key="id"
- default-expand-all
- :data="deptOptions"
- :props="defaultProps"
- :highlight-current="true"
- :filter-node-method="filterNode"
- :expand-on-click-node="false"
- @node-click="handleDeptNodeClick"
- />
- </el-scrollbar>
- </el-card>
- <el-card class="w-4/5 user" style="margin-left: 10px" :gutter="12" shadow="hover">
- <template #header>
- <div class="card-header">
- <span>{{ tableTitle }}</span>
- </div>
- </template>
- <!-- 列表 -->
- <XTable @register="registerTable">
- <template #toolbar_buttons>
- <!-- 操作：新增 -->
- <XButton
- type="primary"
- preIcon="ep:zoom-in"
- :title="t('action.add')"
- v-hasPermi="['system:user:create']"
- @click="handleCreate()"
- />
- <!-- 操作：导入用户 -->
- <XButton
- type="warning"
- preIcon="ep:upload"
- :title="t('action.import')"
- v-hasPermi="['system:user:import']"
- @click="importDialogVisible = true"
- />
- <!-- 操作：导出用户 -->
- <XButton
- type="warning"
- preIcon="ep:download"
- :title="t('action.export')"
- v-hasPermi="['system:user:export']"
- @click="exportList('用户数据.xls')"
- />
- </template>
- <template #status_default="{ row }">
- <el-switch
- v-model="row.status"
- :active-value="0"
- :inactive-value="1"
- @change="handleStatusChange(row)"
- />
- </template>
- <template #actionbtns_default="{ row }">
- <!-- 操作：编辑 -->
- <XTextButton
- preIcon="ep:edit"
- :title="t('action.edit')"
- v-hasPermi="['system:user:update']"
- @click="handleUpdate(row.id)"
- />
- <!-- 操作：详情 -->
- <XTextButton
- preIcon="ep:view"
- :title="t('action.detail')"
- v-hasPermi="['system:user:update']"
- @click="handleDetail(row.id)"
- />
- <el-dropdown
- class="p-0.5"
- v-hasPermi="[
- 'system:user:update-password',
- 'system:permission:assign-user-role',
- 'system:user:delete'
- ]"
- >
- <XTextButton :title="t('action.more')" postIcon="ep:arrow-down" />
- <template #dropdown>
- <el-dropdown-menu>
- <el-dropdown-item>
- <!-- 操作：重置密码 -->
- <XTextButton
- preIcon="ep:key"
- title="重置密码"
- v-hasPermi="['system:user:update-password']"
- @click="handleResetPwd(row)"
- />
- </el-dropdown-item>
- <el-dropdown-item>
- <!-- 操作：分配角色 -->
- <XTextButton
- preIcon="ep:key"
- title="分配角色"
- v-hasPermi="['system:permission:assign-user-role']"
- @click="handleRole(row)"
- />
- </el-dropdown-item>
- <el-dropdown-item>
- <!-- 操作：删除 -->
- <XTextButton
- preIcon="ep:delete"
- :title="t('action.del')"
- v-hasPermi="['system:user:delete']"
- @click="deleteData(row.id)"
- />
- </el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
- </template>
- </XTable>
- </el-card>
- </div>
- <XModal v-model="dialogVisible" :title="dialogTitle">
- <!-- 对话框(添加 / 修改) -->
- <Form
- v-if="['create', 'update'].includes(actionType)"
- :rules="rules"
- :schema="allSchemas.formSchema"
- ref="formRef"
- >
- <template #deptId="form">
- <el-tree-select
- node-key="id"
- v-model="form['deptId']"
- :props="defaultProps"
- :data="deptOptions"
- check-strictly
- />
- </template>
- <template #postIds="form">
- <el-select v-model="form['postIds']" multiple :placeholder="t('common.selectText')">
- <el-option
- v-for="item in postOptions"
- :key="item.id"
- :label="item.name"
- :value="(item.id as unknown as number)"
- />
- </el-select>
- </template>
- </Form>
- <!-- 对话框(详情) -->
- <Descriptions
- v-if="actionType === 'detail'"
- :schema="allSchemas.detailSchema"
- :data="detailData"
- >
- <template #deptId="{ row }">
- <el-tag>{{ dataFormater(row.deptId) }}</el-tag>
- </template>
- <template #postIds="{ row }">
- <template v-if="row.postIds !== ''">
- <el-tag v-for="(post, index) in row.postIds" :key="index" index="">
- <template v-for="postObj in postOptions">
- {{ post === postObj.id ? postObj.name : '' }}
- </template>
- </el-tag>
- </template>
- <template v-else> </template>
- </template>
- </Descriptions>
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- v-if="['create', 'update'].includes(actionType)"
- type="primary"
- :title="t('action.save')"
- :loading="loading"
- @click="submitForm()"
- />
- <!-- 按钮：关闭 -->
- <XButton :loading="loading" :title="t('dialog.close')" @click="dialogVisible = false" />
- </template>
- </XModal>
- <!-- 分配用户角色 -->
- <XModal v-model="roleDialogVisible" title="分配角色">
- <el-form :model="userRole" label-width="140px" :inline="true">
- <el-form-item label="用户名称">
- <el-tag>{{ userRole.username }}</el-tag>
- </el-form-item>
- <el-form-item label="用户昵称">
- <el-tag>{{ userRole.nickname }}</el-tag>
- </el-form-item>
- <el-form-item label="角色">
- <el-transfer
- v-model="userRole.roleIds"
- :titles="['角色列表', '已选择']"
- :props="{
- key: 'id',
- label: 'name'
- }"
- :data="roleOptions"
- />
- </el-form-item>
- </el-form>
- <!-- 操作按钮 -->
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton type="primary" :title="t('action.save')" :loading="loading" @click="submitRole()" />
- <!-- 按钮：关闭 -->
- <XButton :title="t('dialog.close')" @click="roleDialogVisible = false" />
- </template>
- </XModal>
- <!-- 导入 -->
- <XModal v-model="importDialogVisible" :title="importDialogTitle">
- <el-form class="drawer-multiColumn-form" label-width="150px">
- <el-form-item label="模板下载 :">
- <XButton type="primary" prefix="ep:download" title="点击下载" @click="handleImportTemp()" />
- </el-form-item>
- <el-form-item label="文件上传 :">
- <el-upload
- ref="uploadRef"
- :action="updateUrl + '?updateSupport=' + updateSupport"
- :headers="uploadHeaders"
- :drag="true"
- :limit="1"
- :multiple="true"
- :show-file-list="true"
- :disabled="uploadDisabled"
- :before-upload="beforeExcelUpload"
- :on-exceed="handleExceed"
- :on-success="handleFileSuccess"
- :on-error="excelUploadError"
- :auto-upload="false"
- accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+ <el-row :gutter="20">
+ <!-- 左侧部门树 -->
+ <el-col :span="4" :xs="24">
+ <content-wrap class="h-1/1">
+ <DeptTree @node-click="handleDeptNodeClick" />
+ </content-wrap>
+ </el-col>
+ <el-col :span="20" :xs="24">
+ <!-- 搜索 -->
+ <content-wrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
>
- <Icon icon="ep:upload-filled" />
- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
- <template #tip>
- <div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件</div>
- </template>
- </el-upload>
- </el-form-item>
- <el-form-item label="是否更新已经存在的用户数据:">
- <el-checkbox v-model="updateSupport" />
- </el-form-item>
- </el-form>
- <template #footer>
- <!-- 按钮：保存 -->
- <XButton
- type="warning"
- preIcon="ep:upload-filled"
- :title="t('action.save')"
- @click="submitFileForm()"
- />
- <!-- 按钮：关闭 -->
- <XButton :title="t('dialog.close')" @click="importDialogVisible = false" />
- </template>
- </XModal>
+ <el-form-item label="用户名称" prop="username">
+ <el-input
+ v-model="queryParams.username"
+ placeholder="请输入用户名称"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="手机号码" prop="mobile">
+ <el-input
+ v-model="queryParams.mobile"
+ placeholder="请输入手机号码"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="用户状态"
+ clearable
+ class="!w-240px"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ type="datetimerange"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+ <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+ <el-button
+ type="primary"
+ plain
+ @click="openForm('create')"
+ v-hasPermi="['system:user:create']"
+ >
+ <Icon icon="ep:plus" /> 新增
+ </el-button>
+ <el-button type="info" plain @click="handleImport" v-hasPermi="['system:user:import']">
+ <Icon icon="ep:upload" /> 导入
+ </el-button>
+ <el-button
+ type="warning"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ v-hasPermi="['system:user:export']"
+ >
+ <Icon icon="ep:download" />导出
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </content-wrap>
+ <content-wrap>
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="用户编号" align="center" key="id" prop="id" />
+ <el-table-column
+ label="用户名称"
+ align="center"
+ prop="username"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="用户昵称"
+ align="center"
+ prop="nickname"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column
+ label="部门"
+ align="center"
+ key="deptName"
+ prop="dept.name"
+ :show-overflow-tooltip="true"
+ />
+ <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
+ <el-table-column label="状态" key="status">
+ <template #default="scope">
+ <el-switch
+ v-model="scope.row.status"
+ :active-value="0"
+ :inactive-value="1"
+ @change="handleStatusChange(scope.row)"
+ />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="创建时间"
+ align="center"
+ prop="createTime"
+ :formatter="dateFormatter"
+ width="180"
+ />
+ <el-table-column label="操作" align="center" width="160">
+ <template #default="scope">
+ <div class="flex justify-center items-center">
+ <el-button
+ type="primary"
+ link
+ @click="openForm('update', scope.row.id)"
+ v-hasPermi="['system:user:update']"
+ >
+ <Icon icon="ep:edit" />修改
+ </el-button>
+ <el-dropdown
+ @command="(command) => handleCommand(command, scope.row)"
+ v-hasPermi="[
+ 'system:user:delete',
+ 'system:user:update-password',
+ 'system:permission:assign-user-role'
+ ]"
+ >
+ <el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item
+ command="handleDelete"
+ v-if="checkPermi(['system:user:delete'])"
+ >
+ <Icon icon="ep:delete" />删除
+ </el-dropdown-item>
+ <el-dropdown-item
+ command="handleResetPwd"
+ v-if="checkPermi(['system:user:update-password'])"
+ >
+ <Icon icon="ep:key" />重置密码
+ </el-dropdown-item>
+ <el-dropdown-item
+ command="handleRole"
+ v-if="checkPermi(['system:permission:assign-user-role'])"
+ >
+ <Icon icon="ep:circle-check" />分配角色
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </content-wrap>
+ </el-col>
+ </el-row>
+
+ <!-- 添加或修改用户对话框 -->
+ <UserForm ref="formRef" @success="getList" />
+ <!-- 用户导入对话框 -->
+ <UserImportForm ref="importFormRef" @success="getList" />
+ <!-- 分配角色 -->
+ <UserAssignRoleForm ref="assignRoleFormRef" @success="getList" />
</template>
<script setup lang="ts" name="User">
-import type { ElTree, UploadRawFile, UploadInstance } from 'element-plus'
-import { handleTree, defaultProps } from '@/utils/tree'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { checkPermi } from '@/utils/permission'
+import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { CommonStatusEnum } from '@/utils/constants'
-import { getAccessToken, getTenantId } from '@/utils/auth'
-import type { FormExpose } from '@/components/Form'
-import { rules, allSchemas } from './user.data'
import * as UserApi from '@/api/system/user'
-import { listSimpleDeptApi } from '@/api/system/dept'
-import { listSimpleRolesApi } from '@/api/system/role'
-import { listSimplePostsApi, PostVO } from '@/api/system/post'
-import {
- aassignUserRoleApi,
- listUserRolesApi,
- PermissionAssignUserRoleReqVO
-} from '@/api/system/permission'
-
-const { t } = useI18n() // 国际化
+import UserForm from './UserForm.vue'
+import UserImportForm from './UserImportForm.vue'
+import UserAssignRoleForm from './UserAssignRoleForm.vue'
+import DeptTree from './DeptTree.vue'
const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数
const queryParams = reactive({
- deptId: null
+ pageNo: 1,
+ pageSize: 10,
+ username: undefined,
+ mobile: undefined,
+ status: undefined,
+ deptId: undefined,
+ createTime: []
})
-// ========== 列表相关 ==========
-const tableTitle = ref('用户列表')
-// 列表相关的变量
-const [registerTable, { reload, deleteData, exportList }] = useXTable({
- allSchemas: allSchemas,
- params: queryParams,
- getListApi: UserApi.getUserPageApi,
- deleteApi: UserApi.deleteUserApi,
- exportListApi: UserApi.exportUserApi
-})
-// ========== 创建部门树结构 ==========
-const filterText = ref('')
-const deptOptions = ref<Tree[]>([]) // 树形结构
-const treeRef = ref<InstanceType<typeof ElTree>>()
-const getTree = async () => {
- const res = await listSimpleDeptApi()
- deptOptions.value.push(...handleTree(res))
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+ loading.value = true
+ try {
+ const data = await UserApi.getUserPage(queryParams.value)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
}
-const filterNode = (value: string, data: Tree) => {
- if (!value) return true
- return data.name.includes(value)
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+ queryParams.pageNo = 1
+ getList()
}
-const handleDeptNodeClick = async (row: { [key: string]: any }) => {
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+ queryFormRef.value?.resetFields()
+ handleQuery()
+}
+
+/** 处理部门被点击 */
+const handleDeptNodeClick = async (row) => {
queryParams.deptId = row.id
- await reload()
-}
-const { push } = useRouter()
-const handleDeptEdit = () => {
- push('/system/dept')
-}
-watch(filterText, (val) => {
- treeRef.value!.filter(val)
-})
-// ========== CRUD 相关 ==========
-const loading = ref(false) // 遮罩层
-const actionType = ref('') // 操作按钮的类型
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref('edit') // 弹出层标题
-const formRef = ref<FormExpose>() // 表单 Ref
-const postOptions = ref<PostVO[]>([]) //岗位列表
-
-// 获取岗位列表
-const getPostOptions = async () => {
- const res = await listSimplePostsApi()
- postOptions.value.push(...res)
-}
-const dataFormater = (val) => {
- return deptFormater(deptOptions.value, val)
-}
-//部门回显
-const deptFormater = (ary, val: any) => {
- var o = ''
- if (ary && val) {
- for (const v of ary) {
- if (v.id == val) {
- o = v.name
- if (o) return o
- } else if (v.children?.length) {
- o = deptFormater(v.children, val)
- if (o) return o
- }
- }
- return o
- } else {
- return val
- }
+ await getList()
}
-// 设置标题
-const setDialogTile = async (type: string) => {
- dialogTitle.value = t('action.' + type)
- actionType.value = type
- dialogVisible.value = true
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+ formRef.value.open(type, id)
}
-// 新增操作
-const handleCreate = async () => {
- setDialogTile('create')
- // 重置表单
- await nextTick()
- if (allSchemas.formSchema[0].field !== 'username') {
- unref(formRef)?.addSchema(
- {
- field: 'username',
- label: '用户账号',
- component: 'Input'
- },
- 0
- )
- unref(formRef)?.addSchema(
- {
- field: 'password',
- label: '用户密码',
- component: 'InputPassword'
- },
- 1
- )
- }
+/** 用户导入 */
+const importFormRef = ref()
+const handleImport = () => {
+ importFormRef.value.open()
}
-// 修改操作
-const handleUpdate = async (rowId: number) => {
- setDialogTile('update')
- await nextTick()
- unref(formRef)?.delSchema('username')
- unref(formRef)?.delSchema('password')
- // 设置数据
- const res = await UserApi.getUserApi(rowId)
- if (res.sex == 0) res.sex = null
- unref(formRef)?.setValues(res)
-}
-const detailData = ref()
-
-// 详情操作
-const handleDetail = async (rowId: number) => {
- // 设置数据
- const res = await UserApi.getUserApi(rowId)
- detailData.value = res
- await setDialogTile('detail')
-}
-
-// 提交按钮
-const submitForm = async () => {
- const elForm = unref(formRef)?.getElFormRef()
- if (!elForm) return
- elForm.validate(async (valid) => {
- if (valid) {
- // 提交请求
- try {
- const data = unref(formRef)?.formModel as UserApi.UserVO
- if (actionType.value === 'create') {
- loading.value = true
- await UserApi.createUserApi(data)
- message.success(t('common.createSuccess'))
- } else {
- loading.value = true
- await UserApi.updateUserApi(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- } finally {
- // unref(formRef)?.setSchema(allSchemas.formSchema)
- // 刷新列表
- await reload()
- loading.value = false
- }
- }
- })
-}
-// 改变用户状态操作
+/** 修改用户状态 */
const handleStatusChange = async (row: UserApi.UserVO) => {
- const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
- message
- .confirm('确认要"' + text + '""' + row.username + '"用户吗?', t('common.reminder'))
- .then(async () => {
- row.status =
- row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.ENABLE : CommonStatusEnum.DISABLE
- await UserApi.updateUserStatusApi(row.id, row.status)
- message.success(text + '成功')
- // 刷新列表
- await reload()
- })
- .catch(() => {
- row.status =
- row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
- })
-}
-// 重置密码
-const handleResetPwd = (row: UserApi.UserVO) => {
- message.prompt('请输入"' + row.username + '"的新密码', t('common.reminder')).then(({ value }) => {
- UserApi.resetUserPwdApi(row.id, value).then(() => {
- message.success('修改成功，新密码是：' + value)
- })
- })
-}
-// 分配角色
-const roleDialogVisible = ref(false)
-const roleOptions = ref()
-const userRole = reactive({
- id: 0,
- username: '',
- nickname: '',
- roleIds: []
-})
-const handleRole = async (row: UserApi.UserVO) => {
- userRole.id = row.id
- userRole.username = row.username
- userRole.nickname = row.nickname
- // 获得角色拥有的权限集合
- const roles = await listUserRolesApi(row.id)
- userRole.roleIds = roles
- // 获取角色列表
- const roleOpt = await listSimpleRolesApi()
- roleOptions.value = roleOpt
- roleDialogVisible.value = true
-}
-// 提交
-const submitRole = async () => {
- const data = ref<PermissionAssignUserRoleReqVO>({
- userId: userRole.id,
- roleIds: userRole.roleIds
- })
- await aassignUserRoleApi(data.value)
- message.success(t('common.updateSuccess'))
- roleDialogVisible.value = false
-}
-// ========== 导入相关 ==========
-// TODO @星语：这个要不要把导入用户，封装成一个小组件？可选哈
-const importDialogVisible = ref(false)
-const uploadDisabled = ref(false)
-const importDialogTitle = ref('用户导入')
-const updateSupport = ref(0)
-let updateUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/user/import'
-const uploadHeaders = ref()
-// 下载导入模版
-const handleImportTemp = async () => {
- const res = await UserApi.importUserTemplateApi()
- download.excel(res, '用户导入模版.xls')
-}
-// 文件上传之前判断
-const beforeExcelUpload = (file: UploadRawFile) => {
- const isExcel =
- file.type === 'application/vnd.ms-excel' ||
- file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
- const isLt5M = file.size / 1024 / 1024 < 5
- if (!isExcel) message.error('上传文件只能是 xls / xlsx 格式!')
- if (!isLt5M) message.error('上传文件大小不能超过 5MB!')
- return isExcel && isLt5M
-}
-// 文件上传
-const uploadRef = ref<UploadInstance>()
-const submitFileForm = () => {
- uploadHeaders.value = {
- Authorization: 'Bearer ' + getAccessToken(),
- 'tenant-id': getTenantId()
+ try {
+ // 修改状态的二次确认
+ const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
+ await message.confirm('确认要"' + text + '""' + row.username + '"用户吗?')
+ // 发起修改状态
+ await UserApi.updateUserStatus(row.id, row.status)
+ // 刷新列表
+ await getList()
+ } catch {
+ // 取消后，进行恢复按钮
+ row.status =
+ row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
}
- uploadDisabled.value = true
- uploadRef.value!.submit()
}
-// 文件上传成功
-const handleFileSuccess = async (response: any): Promise<void> => {
- if (response.code !== 0) {
- message.error(response.msg)
- return
+
+/** 导出按钮操作 */
+const exportLoading = ref(false)
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await UserApi.exportUser(queryParams)
+ download.excel(data, '用户数据.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
}
- importDialogVisible.value = false
- uploadDisabled.value = false
- const data = response.data
- let text = '上传成功数量：' + data.createUsernames.length + ';'
- for (let username of data.createUsernames) {
- text += '< ' + username + ' >'
- }
- text += '更新成功数量：' + data.updateUsernames.length + ';'
- for (const username of data.updateUsernames) {
- text += '< ' + username + ' >'
- }
- text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
- for (const username in data.failureUsernames) {
- text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
- }
- message.alert(text)
- await reload()
}
-// 文件数超出提示
-const handleExceed = (): void => {
- message.error('最多只能上传一个文件！')
+
+/** 操作分发 */
+const handleCommand = (command: string, row: UserApi.UserVO) => {
+ switch (command) {
+ case 'handleDelete':
+ handleDelete(row.id)
+ break
+ case 'handleResetPwd':
+ handleResetPwd(row)
+ break
+ case 'handleRole':
+ handleRole(row)
+ break
+ default:
+ break
+ }
}
-// 上传错误提示
-const excelUploadError = (): void => {
- message.error('导入数据失败，请您重新上传！')
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+ try {
+ // 删除的二次确认
+ await message.delConfirm()
+ // 发起删除
+ await UserApi.deleteUser(id)
+ message.success(t('common.delSuccess'))
+ // 刷新列表
+ await getList()
+ } catch {}
}
-// ========== 初始化 ==========
-onMounted(async () => {
- await getPostOptions()
- await getTree()
+
+/** 重置密码 */
+const handleResetPwd = async (row: UserApi.UserVO) => {
+ try {
+ // 重置的二次确认
+ const result = await message.prompt(
+ '请输入"' + row.username + '"的新密码',
+ t('common.reminder')
+ )
+ const password = result.value
+ // 发起重置
+ await UserApi.resetUserPwd(row.id, password)
+ message.success('修改成功，新密码是：' + password)
+ } catch {}
+}
+
+/** 分配角色 */
+const assignRoleFormRef = ref()
+const handleRole = (row: UserApi.UserVO) => {
+ assignRoleFormRef.value.open(row)
+}
+
+/** 初始化 */
+onMounted(() => {
+ getList()
})
</script>
-
-<style scoped>
-.user {
- height: 780px;
- max-height: 800px;
-}
-.card-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-</style>
diff --git a/src/views/system/user/user.data.ts b/src/views/system/user/user.data.ts
deleted file mode 100644
index 7f7384eb..00000000
--- a/src/views/system/user/user.data.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
-// 国际化
-const { t } = useI18n()
-const validateMobile = (rule: any, value: any, callback: any) => {
- const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
- if (value === '') {
- callback(new Error('请输入联系手机'))
- } else {
- if (!reg.test(value)) {
- callback(new Error('请输入正确的手机号'))
- } else {
- callback()
- }
- }
-}
-// 表单校验
-export const rules = reactive({
- username: [required],
- nickname: [required],
- password: [required],
- deptId: [required],
- email: [
- { required: true, message: t('profile.rules.mail'), trigger: 'blur' },
- {
- type: 'email',
- message: t('profile.rules.truemail'),
- trigger: ['blur', 'change']
- }
- ],
- status: [required],
- postIds: [{ required: true, message: '请选择岗位', trigger: ['blur', 'change'] }],
- mobile: [
- required,
- {
- len: 11,
- trigger: 'blur',
- message: '请输入正确的手机号码'
- },
- { validator: validateMobile, trigger: 'blur' }
- ]
-})
-// crudSchemas
-const crudSchemas = reactive<VxeCrudSchema>({
- primaryKey: 'id',
- primaryType: 'id',
- primaryTitle: '用户编号',
- action: true,
- actionWidth: '200px',
- columns: [
- {
- title: '用户账号',
- field: 'username',
- isSearch: true
- },
- {
- title: '用户密码',
- field: 'password',
- isDetail: false,
- isTable: false,
- form: {
- component: 'InputPassword'
- }
- },
- {
- title: '用户' + t('profile.user.sex'),
- field: 'sex',
- dictType: DICT_TYPE.SYSTEM_USER_SEX,
- dictClass: 'number',
- table: { show: false }
- },
- {
- title: '用户昵称',
- field: 'nickname'
- },
- {
- title: '用户邮箱',
- field: 'email'
- },
- {
- title: '手机号码',
- field: 'mobile',
- isSearch: true
- },
- {
- title: '部门',
- field: 'deptId',
- isTable: false
- },
- {
- title: '岗位',
- field: 'postIds',
- isTable: false
- },
- {
- title: t('common.status'),
- field: 'status',
- dictType: DICT_TYPE.COMMON_STATUS,
- dictClass: 'number',
- isSearch: true,
- table: {
- slots: {
- default: 'status_default'
- }
- }
- },
- {
- title: '最后登录时间',
- field: 'loginDate',
- formatter: 'formatDate',
- isForm: false
- },
- {
- title: '最后登录IP',
- field: 'loginIp',
- isTable: false,
- isForm: false
- },
- {
- title: t('form.remark'),
- field: 'remark',
- isTable: false
- },
- {
- title: t('common.createTime'),
- field: 'createTime',
- formatter: 'formatDate',
- isTable: false,
- isForm: false,
- search: {
- show: true,
- itemRender: {
- name: 'XDataTimePicker'
- }
- }
- }
- ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
diff --git a/tsconfig.json b/tsconfig.json
index 6b412cd8..b97c7079 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -32,6 +32,7 @@
"vite-plugin-svg-icons/client",
"@form-create/element-ui/types"
],
+ "outDir": "target", // 请保留这个属性，防止tsconfig.json文件报错
"typeRoots": ["./node_modules/@types/", "./types"]
},
"include": [
@@ -40,5 +41,5 @@
"src/types/auto-imports.d.ts",
"src/types/auto-components.d.ts"
],
- "exclude": ["dist", "node_modules"]
+ "exclude": ["dist", "target", "node_modules"]
}
diff --git a/types/components.d.ts b/types/components.d.ts
index 85db5663..9d0ba09a 100644
--- a/types/components.d.ts
+++ b/types/components.d.ts
@@ -1,6 +1,7 @@
declare module 'vue' {
export interface GlobalComponents {
- Icon: typeof import('../components/Icon/src/Icon.vue')['default']
+ Icon: typeof import('@/components/Icon')['Icon']
+ DictTag: typeof import('@/components/DictTag')['DictTag']
}
}
diff --git a/types/global.d.ts b/types/global.d.ts
index 3685ffbd..5e292687 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -1,29 +1,29 @@
export {}
declare global {
- declare interface Fn<T = any> {
+ interface Fn<T = any> {
(...arg: T[]): T
}
- declare type Nullable<T> = T | null
+ type Nullable<T> = T | null
- declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>
+ type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>
- declare type Recordable<T = any, K = string> = Record<K extends null | undefined ? string : K, T>
+ type Recordable<T = any, K = string> = Record<K extends null | undefined ? string : K, T>
- declare type ComponentRef<T> = InstanceType<T>
+ type ComponentRef<T> = InstanceType<T>
- declare type LocaleType = 'zh-CN' | 'en'
+ type LocaleType = 'zh-CN' | 'en'
- declare type AxiosHeaders =
+ type AxiosHeaders =
| 'application/json'
| 'application/x-www-form-urlencoded'
| 'multipart/form-data'
- declare type AxiosMethod = 'get' | 'post' | 'delete' | 'put' | 'GET' | 'POST' | 'DELETE' | 'PUT'
+ type AxiosMethod = 'get' | 'post' | 'delete' | 'put' | 'GET' | 'POST' | 'DELETE' | 'PUT'
- declare type AxiosResponseType = 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'
+ type AxiosResponseType = 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'
- declare interface AxiosConfig {
+ interface AxiosConfig {
params?: any
data?: any
url?: string
@@ -32,17 +32,17 @@ declare global {
responseType?: AxiosResponseType
}
- declare interface IResponse<T = any> {
+ interface IResponse<T = any> {
code: string
data: T extends any ? T : T & any
}
- declare interface PageParam {
+ interface PageParam {
pageSize?: number
pageNo?: number
}
- declare interface Tree {
+ interface Tree {
id: number
name: string
children?: Tree[] | any[]
diff --git a/types/router.d.ts b/types/router.d.ts
index 10ba0c15..9b08b805 100644
--- a/types/router.d.ts
+++ b/types/router.d.ts
@@ -54,7 +54,7 @@ type Component<T = any> =
| (() => Promise<T>)
declare global {
- declare interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+ interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
name: string
meta: RouteMeta
component?: Component | string
@@ -64,7 +64,7 @@ declare global {
keepAlive?: boolean
}
- declare interface AppCustomRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
+ interface AppCustomRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
icon: any
name: string
meta: RouteMeta
diff --git a/vite.config.ts b/vite.config.ts
index 6b54e183..fe2d7131 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -42,7 +42,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// },
},
// 项目使用的vite插件。 单独提取到build/vite/plugin中管理
- plugins: createVitePlugins(env.VITE_APP_TITLE),
+ plugins: createVitePlugins(),
css: {
preprocessorOptions: {
scss: {