Skip to content

phsl / admin

Go to a project
Commit 5e705776 by 芋道源码 Committed by Gitee
Options

!111 【众测版】合并最新的 Vue3 重构 

Merge pull request !111 from 芋道源码/dev
parents 808d38f9 47b5ce2f
Showing with 2487 additions and 987 deletions
.env
...@@ -15,3 +15,6 @@ VITE_APP_CAPTCHA_ENABLE=true ...@@ -15,3 +15,6 @@ VITE_APP_CAPTCHA_ENABLE=true
# 验证码的开关 # 验证码的开关
VITE_APP_CAPTCHA_ENABLE=true VITE_APP_CAPTCHA_ENABLE=true
# 百度统计
VITE_APP_BAIDU_CODE = a1ff8825baa73c3a78eb96aa40325abc
.env.dev
...@@ -16,7 +16,7 @@ VITE_API_BASEPATH=/dev-api ...@@ -16,7 +16,7 @@ VITE_API_BASEPATH=/dev-api
VITE_API_URL=/admin-api VITE_API_URL=/admin-api
# 打包路径 # 打包路径
VITE_BASE_PATH=/dist-dev/ VITE_BASE_PATH=/
# 是否删除debugger # 是否删除debugger
VITE_DROP_DEBUGGER=false VITE_DROP_DEBUGGER=false
......
package.json
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
"private": false, "private": false,
"scripts": { "scripts": {
"i": "pnpm install", "i": "pnpm install",
"dev": "pnpm vite", "dev": "vite --mode base",
"front": "vite --mode front", "front": "vite --mode front",
"ts:check": "vue-tsc --noEmit", "ts:check": "vue-tsc --noEmit",
"build:pro": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode pro", "build:pro": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode pro",
......
src/api/bpm/leave/index.ts
...@@ -22,6 +22,6 @@ export const getLeave = async (id: number) => { ...@@ -22,6 +22,6 @@ export const getLeave = async (id: number) => {
} }
// 获得请假申请分页 // 获得请假申请分页
export const getLeavePage = async (params) => { export const getLeavePage = async (params: PageParam) => {
return await request.get({ url: '/bpm/oa/leave/page', params }) return await request.get({ url: '/bpm/oa/leave/page', params })
} }
src/api/infra/redis/index.ts
...@@ -6,39 +6,3 @@ import request from '@/config/axios' ...@@ -6,39 +6,3 @@ import request from '@/config/axios'
export const getCache = () => { export const getCache = () => {
return request.get({ url: '/infra/redis/get-monitor-info' }) return request.get({ url: '/infra/redis/get-monitor-info' })
} }
// 获取模块
export const getKeyDefineList = () => {
return request.get({ url: '/infra/redis/get-key-define-list' })
}
/**
* 获取redis key列表
*/
export const getKeyList = (keyTemplate: string) => {
return request.get({
url: '/infra/redis/get-key-list',
params: {
keyTemplate
}
})
}
// 获取缓存内容
export const getKeyValue = (key: string) => {
return request.get({ url: '/infra/redis/get-key-value?key=' + key })
}
// 根据键名删除缓存
export const deleteKey = (key: string) => {
return request.delete({ url: '/infra/redis/delete-key?key=' + key })
}
export const deleteKeys = (keyTemplate: string) => {
return request.delete({
url: '/infra/redis/delete-keys?',
params: {
keyTemplate
}
})
}
src/api/infra/redis/types.ts
...@@ -174,12 +174,3 @@ export interface RedisCommandStatsVO { ...@@ -174,12 +174,3 @@ export interface RedisCommandStatsVO {
calls: number calls: number
usec: number usec: number
} }
export interface RedisKeyInfo {
keyTemplate: string
keyType: string
valueType: string
timeoutType: number
timeout: number
memo: string
}
src/api/login/index.ts
...@@ -2,15 +2,11 @@ import request from '@/config/axios' ...@@ -2,15 +2,11 @@ import request from '@/config/axios'
import { getRefreshToken } from '@/utils/auth' import { getRefreshToken } from '@/utils/auth'
import type { UserLoginVO } from './types' import type { UserLoginVO } from './types'
export interface CodeImgResult {
captchaOnOff: boolean
img: string
uuid: string
}
export interface SmsCodeVO { export interface SmsCodeVO {
mobile: string mobile: string
scene: number scene: number
} }
export interface SmsLoginVO { export interface SmsLoginVO {
mobile: string mobile: string
code: string code: string
......
src/api/login/oauth2/index.ts 0 → 100644
import request from '@/config/axios'
// 获得授权信息
export const getAuthorize = (clientId: string) => {
return request.get({ url: '/system/oauth2/authorize?clientId=' + clientId })
}
// 发起授权
export const authorize = (
responseType: string,
clientId: string,
redirectUri: string,
state: string,
autoApprove: boolean,
checkedScopes: string[],
uncheckedScopes: string[]
) => {
// 构建 scopes
const scopes = {}
for (const scope of checkedScopes) {
scopes[scope] = true
}
for (const scope of uncheckedScopes) {
scopes[scope] = false
}
// 发起请求
return request.post({
url: '/system/oauth2/authorize',
headers: {
'Content-type': 'application/x-www-form-urlencoded'
},
params: {
response_type: responseType,
client_id: clientId,
redirect_uri: redirectUri,
state: state,
auto_approve: autoApprove,
scope: JSON.stringify(scopes)
}
})
}
src/api/login/types.ts
...@@ -26,17 +26,3 @@ export type UserVO = { ...@@ -26,17 +26,3 @@ export type UserVO = {
loginIp: string loginIp: string
loginDate: string loginDate: string
} }
export type UserInfoVO = {
permissions: []
roles: []
user: {
avatar: string
id: number
nickname: string
}
}
export type TentantNameVO = {
name: string
}
src/api/mall/product/brand.ts 0 → 100644
import request from '@/config/axios'
/**
* 商品品牌
*/
export interface BrandVO {
/**
* 品牌编号
*/
id?: number
/**
* 品牌名称
*/
name: string
/**
* 品牌图片
*/
picUrl: string
/**
* 品牌排序
*/
sort?: number
/**
* 品牌描述
*/
description?: string
/**
* 开启状态
*/
status: number
}
// 创建商品品牌
export const createBrand = (data: BrandVO) => {
return request.post({ url: '/product/brand/create', data })
}
// 更新商品品牌
export const updateBrand = (data: BrandVO) => {
return request.put({ url: '/product/brand/update', data })
}
// 删除商品品牌
export const deleteBrand = (id: number) => {
return request.delete({ url: `/product/brand/delete?id=${id}` })
}
// 获得商品品牌
export const getBrand = (id: number) => {
return request.get({ url: `/product/brand/get?id=${id}` })
}
// 获得商品品牌列表
export const getBrandParam = (params: PageParam) => {
return request.get({ url: '/product/brand/page', params })
}
src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
...@@ -33,9 +33,15 @@ ...@@ -33,9 +33,15 @@
/> />
<el-table-column label="操作" width="90px"> <el-table-column label="操作" width="90px">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="openFieldForm(scope, scope.$index)">编辑</el-button> <el-button type="primary" link @click="openFieldForm(scope, scope.$index)"
>编辑</el-button
>
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button type="text" style="color: #ff4d4f" @click="removeField(scope, scope.$index)" <el-button
type="primary"
link
style="color: #ff4d4f"
@click="removeField(scope, scope.$index)"
>移除</el-button >移除</el-button
> >
</template> </template>
...@@ -97,7 +103,10 @@ ...@@ -97,7 +103,10 @@
<el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip /> <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="90px"> <el-table-column label="操作" width="90px">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="openFieldOptionForm(scope, scope.$index, 'enum')" <el-button
type="primary"
link
@click="openFieldOptionForm(scope, scope.$index, 'enum')"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
...@@ -126,7 +135,10 @@ ...@@ -126,7 +135,10 @@
<el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip /> <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="90px"> <el-table-column label="操作" width="90px">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="openFieldOptionForm(scope, scope.$index, 'constraint')" <el-button
type="primary"
link
@click="openFieldOptionForm(scope, scope.$index, 'constraint')"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
...@@ -154,7 +166,10 @@ ...@@ -154,7 +166,10 @@
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip /> <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
<el-table-column label="操作" width="90px"> <el-table-column label="操作" width="90px">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="openFieldOptionForm(scope, scope.$index, 'property')" <el-button
type="primary"
link
@click="openFieldOptionForm(scope, scope.$index, 'property')"
>编辑</el-button >编辑</el-button
> >
<el-divider direction="vertical" /> <el-divider direction="vertical" />
......
src/components/bpmnProcessDesigner/package/penal/listeners/template.js
...@@ -7,9 +7,9 @@ export const template = (isTaskListener) => { ...@@ -7,9 +7,9 @@ export const template = (isTaskListener) => {
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" /> <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
<el-table-column label="操作" width="90px"> <el-table-column label="操作" width="90px">
<template #default="scope"> <template #default="scope">
<el-button size="small" type="text" @click="openListenerForm(scope, scope.$index)">编辑</el-button> <el-button size="small" type="primary" link @click="openListenerForm(scope, scope.$index)">编辑</el-button>
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button> <el-button size="small" type="primary" link style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -125,9 +125,9 @@ export const template = (isTaskListener) => { ...@@ -125,9 +125,9 @@ export const template = (isTaskListener) => {
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" /> <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
<el-table-column label="操作" width="100px"> <el-table-column label="操作" width="100px">
<template #default="scope"> <template #default="scope">
<el-button size="small" type="text" @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button> <el-button size="small" type="primary" link @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button> <el-button size="small" type="primary" link style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
......
src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</el-table> </el-table>
<el-dialog <el-dialog
v-model="modelVisible" v-model="dialogVisible"
:title="modelConfig.title" :title="modelConfig.title"
:close-on-click-modal="false" :close-on-click-modal="false"
width="400px" width="400px"
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button @click="modelVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addNewObject">保 存</el-button> <el-button type="primary" @click="addNewObject">保 存</el-button>
</template> </template>
</el-dialog> </el-dialog>
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
const message = useMessage() const message = useMessage()
const signalList = ref<any[]>([]) const signalList = ref<any[]>([])
const messageList = ref<any[]>([]) const messageList = ref<any[]>([])
const modelVisible = ref(false) const dialogVisible = ref(false)
const modelType = ref('') const modelType = ref('')
const modelObjectForm = ref<any>({}) const modelObjectForm = ref<any>({})
const rootElements = ref() const rootElements = ref()
...@@ -85,7 +85,7 @@ const initDataList = () => { ...@@ -85,7 +85,7 @@ const initDataList = () => {
const openModel = (type) => { const openModel = (type) => {
modelType.value = type modelType.value = type
modelObjectForm.value = {} modelObjectForm.value = {}
modelVisible.value = true dialogVisible.value = true
} }
const addNewObject = () => { const addNewObject = () => {
if (modelType.value === 'message') { if (modelType.value === 'message') {
...@@ -101,7 +101,7 @@ const addNewObject = () => { ...@@ -101,7 +101,7 @@ const addNewObject = () => {
const signalRef = bpmnInstances().moddle.create('bpmn:Signal', modelObjectForm.value) const signalRef = bpmnInstances().moddle.create('bpmn:Signal', modelObjectForm.value)
rootElements.value.push(signalRef) rootElements.value.push(signalRef)
} }
modelVisible.value = false dialogVisible.value = false
initDataList() initDataList()
} }
......
src/config/axios/service.ts
import axios, { import axios, {
AxiosError,
AxiosInstance, AxiosInstance,
AxiosRequestHeaders, AxiosRequestHeaders,
AxiosResponse, AxiosResponse,
AxiosError,
InternalAxiosRequestConfig InternalAxiosRequestConfig
} from 'axios' } from 'axios'
...@@ -230,7 +230,8 @@ const handleAuthorized = () => { ...@@ -230,7 +230,8 @@ const handleAuthorized = () => {
wsCache.clear() wsCache.clear()
removeToken() removeToken()
isRelogin.show = false isRelogin.show = false
window.location.href = import.meta.env.VITE_BASE_PATH // 干掉token后再走一次路由让它过router.beforeEach的校验
window.location.href = window.location.href
}) })
} }
return Promise.reject(t('sys.api.timeoutMessage')) return Promise.reject(t('sys.api.timeoutMessage'))
......
src/locales/zh-CN.ts
...@@ -352,6 +352,7 @@ export default { ...@@ -352,6 +352,7 @@ export default {
login: { login: {
backSignIn: '返回', backSignIn: '返回',
signInFormTitle: '登录', signInFormTitle: '登录',
ssoFormTitle: '三方授权',
mobileSignInFormTitle: '手机登录', mobileSignInFormTitle: '手机登录',
qrSignInFormTitle: '二维码登录', qrSignInFormTitle: '二维码登录',
signUpFormTitle: '注册', signUpFormTitle: '注册',
......
src/main.ts
...@@ -52,6 +52,8 @@ import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css' ...@@ -52,6 +52,8 @@ import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import hljs from 'highlight.js' //导入代码高亮文件 import hljs from 'highlight.js' //导入代码高亮文件
import 'highlight.js/styles/github.css' //导入代码高亮样式 新版 import 'highlight.js/styles/github.css' //导入代码高亮样式 新版
import '@/plugins/tongji' // 百度统计
import Logger from '@/utils/Logger' import Logger from '@/utils/Logger'
// 本地开发模式 全局引入 element-plus 样式，加快第一次进入速度 // 本地开发模式 全局引入 element-plus 样式，加快第一次进入速度
......
src/plugins/tongji/index.ts 0 → 100644
import router from '@/router'
// 用于 router push
window._hmt = window._hmt || []
// HM_ID
const HM_ID = import.meta.env.VITE_APP_BAIDU_CODE
;(function () {
// 有值的时候，才开启
if (!HM_ID) {
return
}
const hm = document.createElement('script')
hm.src = 'https://hm.baidu.com/hm.js?' + HM_ID
const s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(hm, s)
})()
router.afterEach(function (to) {
if (!HM_ID) {
return
}
_hmt.push(['_trackPageview', to.fullPath])
})
src/router/index.ts
import type { App } from 'vue' import type { App } from 'vue'
import type { RouteRecordRaw } from 'vue-router' import type { RouteRecordRaw } from 'vue-router'
import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import remainingRouter from './modules/remaining' import remainingRouter from './modules/remaining'
// 创建路由实例 // 创建路由实例
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), // createWebHashHistory URL带#，createWebHistory URL不带# history: createWebHistory(), // createWebHashHistory URL带#，createWebHistory URL不带#
strict: true, strict: true,
routes: remainingRouter as RouteRecordRaw[], routes: remainingRouter as RouteRecordRaw[],
scrollBehavior: () => ({ left: 0, top: 0 }) scrollBehavior: () => ({ left: 0, top: 0 })
......
src/router/modules/remaining.ts
...@@ -116,7 +116,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -116,7 +116,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
{ {
path: 'type/data/:dictType', path: 'type/data/:dictType',
component: () => import('@/views/system/dict/data/index.vue'), component: () => import('@/views/system/dict/data/index.vue'),
name: 'data', name: 'SystemDictData',
meta: { meta: {
title: '字典数据', title: '字典数据',
noCache: true, noCache: true,
...@@ -140,7 +140,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -140,7 +140,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
{ {
path: 'edit', path: 'edit',
component: () => import('@/views/infra/codegen/EditTable.vue'), component: () => import('@/views/infra/codegen/EditTable.vue'),
name: 'EditTable', name: 'InfraCodegenEditTable',
meta: { meta: {
noCache: true, noCache: true,
hidden: true, hidden: true,
...@@ -163,7 +163,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -163,7 +163,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
{ {
path: 'job-log', path: 'job-log',
component: () => import('@/views/infra/job/logger/index.vue'), component: () => import('@/views/infra/job/logger/index.vue'),
name: 'JobLog', name: 'InfraJobLog',
meta: { meta: {
noCache: true, noCache: true,
hidden: true, hidden: true,
...@@ -186,6 +186,16 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -186,6 +186,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
} }
}, },
{ {
path: '/sso',
component: () => import('@/views/Login/Login.vue'),
name: 'SSOLogin',
meta: {
hidden: true,
title: t('router.login'),
noTagsView: true
}
},
{
path: '/403', path: '/403',
component: () => import('@/views/Error/403.vue'), component: () => import('@/views/Error/403.vue'),
name: 'NoAccess', name: 'NoAccess',
...@@ -226,7 +236,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -226,7 +236,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
{ {
path: '/manager/form/edit', path: '/manager/form/edit',
component: () => import('@/views/bpm/form/editor/index.vue'), component: () => import('@/views/bpm/form/editor/index.vue'),
name: 'bpmFormEditor', name: 'BpmFormEditor',
meta: { meta: {
noCache: true, noCache: true,
hidden: true, hidden: true,
...@@ -238,7 +248,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -238,7 +248,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
{ {
path: '/manager/model/edit', path: '/manager/model/edit',
component: () => import('@/views/bpm/model/editor/index.vue'), component: () => import('@/views/bpm/model/editor/index.vue'),
name: 'modelEditor', name: 'BpmModelEditor',
meta: { meta: {
noCache: true, noCache: true,
hidden: true, hidden: true,
...@@ -250,7 +260,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -250,7 +260,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
{ {
path: '/manager/definition', path: '/manager/definition',
component: () => import('@/views/bpm/definition/index.vue'), component: () => import('@/views/bpm/definition/index.vue'),
name: 'BpmProcessDefinitionList', name: 'BpmProcessDefinition',
meta: { meta: {
noCache: true, noCache: true,
hidden: true, hidden: true,
...@@ -262,7 +272,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -262,7 +272,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
{ {
path: '/manager/task-assign-rule', path: '/manager/task-assign-rule',
component: () => import('@/views/bpm/taskAssignRule/index.vue'), component: () => import('@/views/bpm/taskAssignRule/index.vue'),
name: 'BpmTaskAssignRuleList', name: 'BpmTaskAssignRule',
meta: { meta: {
noCache: true, noCache: true,
hidden: true, hidden: true,
...@@ -305,18 +315,6 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -305,18 +315,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
title: '发起 OA 请假', title: '发起 OA 请假',
activeMenu: 'bpm/oa/leave/create' activeMenu: 'bpm/oa/leave/create'
} }
},
{
path: '/bpm/oa/leave/detail',
component: () => import('@/views/bpm/oa/leave/detail.vue'),
name: 'OALeaveDetail',
meta: {
noCache: true,
hidden: true,
canTo: true,
title: '查看 OA 请假',
activeMenu: 'bpm/oa/leave/detail'
}
} }
] ]
}, },
...@@ -331,7 +329,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ ...@@ -331,7 +329,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
{ {
path: 'value/:propertyId(\\d+)', path: 'value/:propertyId(\\d+)',
component: () => import('@/views/mall/product/property/value/index.vue'), component: () => import('@/views/mall/product/property/value/index.vue'),
name: 'PropertyValue', name: 'ProductPropertyValue',
meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' } meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
} }
] ]
......
src/types/auto-components.d.ts
...@@ -25,13 +25,12 @@ declare module '@vue/runtime-core' { ...@@ -25,13 +25,12 @@ declare module '@vue/runtime-core' {
Echart: typeof import('./../components/Echart/src/Echart.vue')['default'] Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
Editor: typeof import('./../components/Editor/src/Editor.vue')['default'] Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert'] ElAlert: typeof import('element-plus/es')['ElAlert']
ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBadge: typeof import('element-plus/es')['ElBadge'] ElBadge: typeof import('element-plus/es')['ElBadge']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup'] ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
ElCard: typeof import('element-plus/es')['ElCard'] ElCard: typeof import('element-plus/es')['ElCard']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
ElCol: typeof import('element-plus/es')['ElCol'] ElCol: typeof import('element-plus/es')['ElCol']
ElCollapse: typeof import('element-plus/es')['ElCollapse'] ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'] ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
...@@ -71,11 +70,9 @@ declare module '@vue/runtime-core' { ...@@ -71,11 +70,9 @@ declare module '@vue/runtime-core' {
ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElSkeleton: typeof import('element-plus/es')['ElSkeleton'] ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
ElSpace: typeof import('element-plus/es')['ElSpace']
ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable'] ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTableV2: typeof import('element-plus/es')['ElTableV2']
ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs'] ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag'] ElTag: typeof import('element-plus/es')['ElTag']
......
src/types/auto-imports.d.ts
...@@ -6,6 +6,7 @@ export {} ...@@ -6,6 +6,7 @@ export {}
declare global { declare global {
const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE'] const DICT_TYPE: typeof import('@/utils/dict')['DICT_TYPE']
const EffectScope: typeof import('vue')['EffectScope'] const EffectScope: typeof import('vue')['EffectScope']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const computed: typeof import('vue')['computed'] const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp'] const createApp: typeof import('vue')['createApp']
const customRef: typeof import('vue')['customRef'] const customRef: typeof import('vue')['customRef']
......
src/utils/dict.ts
...@@ -112,7 +112,6 @@ export enum DICT_TYPE { ...@@ -112,7 +112,6 @@ export enum DICT_TYPE {
// ========== INFRA 模块 ========== // ========== INFRA 模块 ==========
INFRA_BOOLEAN_STRING = 'infra_boolean_string', INFRA_BOOLEAN_STRING = 'infra_boolean_string',
INFRA_REDIS_TIMEOUT_TYPE = 'infra_redis_timeout_type',
INFRA_JOB_STATUS = 'infra_job_status', INFRA_JOB_STATUS = 'infra_job_status',
INFRA_JOB_LOG_STATUS = 'infra_job_log_status', INFRA_JOB_LOG_STATUS = 'infra_job_log_status',
INFRA_API_ERROR_LOG_PROCESS_STATUS = 'infra_api_error_log_process_status', INFRA_API_ERROR_LOG_PROCESS_STATUS = 'infra_api_error_log_process_status',
......
src/views/Login/Login.vue
...@@ -9,19 +9,19 @@ ...@@ -9,19 +9,19 @@
> >
<!-- 左上角的 logo + 系统标题 --> <!-- 左上角的 logo + 系统标题 -->
<div class="flex items-center relative text-white"> <div class="flex items-center relative text-white">
<img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" /> <img alt="" class="w-48px h-48px mr-10px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span> <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div> </div>
<!-- 左边的背景图 + 欢迎语 --> <!-- 左边的背景图 + 欢迎语 -->
<div class="flex justify-center items-center h-[calc(100%-60px)]"> <div class="flex justify-center items-center h-[calc(100%-60px)]">
<TransitionGroup <TransitionGroup
appear appear
tag="div"
enter-active-class="animate__animated animate__bounceInLeft" enter-active-class="animate__animated animate__bounceInLeft"
tag="div"
> >
<img src="@/assets/svgs/login-box-bg.svg" key="1" alt="" class="w-350px" /> <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
<div class="text-3xl text-white" key="2">{{ t('login.welcome') }}</div> <div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
<div class="mt-5 font-normal text-white text-14px" key="3"> <div key="3" class="mt-5 font-normal text-white text-14px">
{{ t('login.message') }} {{ t('login.message') }}
</div> </div>
</TransitionGroup> </TransitionGroup>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<!-- 右上角的主题、语言选择 --> <!-- 右上角的主题、语言选择 -->
<div class="flex justify-between items-center text-white @2xl:justify-end @xl:justify-end"> <div class="flex justify-between items-center text-white @2xl:justify-end @xl:justify-end">
<div class="flex items-center @2xl:hidden @xl:hidden"> <div class="flex items-center @2xl:hidden @xl:hidden">
<img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px" /> <img alt="" class="w-48px h-48px mr-10px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span> <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div> </div>
<div class="flex justify-end items-center space-x-10px"> <div class="flex justify-end items-center space-x-10px">
...@@ -52,20 +52,23 @@ ...@@ -52,20 +52,23 @@
<QrCodeForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" /> <QrCodeForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
<!-- 注册 --> <!-- 注册 -->
<RegisterForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" /> <RegisterForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
<!-- 三方登录 -->
<SSOLoginVue class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
</div> </div>
</Transition> </Transition>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts" setup>
import { underlineToHump } from '@/utils' import { underlineToHump } from '@/utils'
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app' import { useAppStore } from '@/store/modules/app'
import { ThemeSwitch } from '@/layout/components/ThemeSwitch' import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown' import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { LoginForm, MobileForm, RegisterForm, QrCodeForm } from './components'
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
const { t } = useI18n() const { t } = useI18n()
const appStore = useAppStore() const appStore = useAppStore()
......
src/views/Login/components/LoginForm.vue
...@@ -137,7 +137,7 @@ import { useIcon } from '@/hooks/web/useIcon' ...@@ -137,7 +137,7 @@ import { useIcon } from '@/hooks/web/useIcon'
import * as authUtil from '@/utils/auth' import * as authUtil from '@/utils/auth'
import { usePermissionStore } from '@/store/modules/permission' import { usePermissionStore } from '@/store/modules/permission'
import * as LoginApi from '@/api/login' import * as LoginApi from '@/api/login'
import { LoginStateEnum, useLoginState, useFormValid } from './useLogin' import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
const { t } = useI18n() const { t } = useI18n()
const message = useMessage() const message = useMessage()
...@@ -240,7 +240,12 @@ const handleLogin = async (params) => { ...@@ -240,7 +240,12 @@ const handleLogin = async (params) => {
if (!redirect.value) { if (!redirect.value) {
redirect.value = '/' redirect.value = '/'
} }
push({ path: redirect.value || permissionStore.addRouters[0].path }) // 判断是否为SSO登录
if (redirect.value.indexOf('sso') !== -1) {
window.location.href = window.location.href.replace('/login?redirect=', '')
} else {
push({ path: redirect.value || permissionStore.addRouters[0].path })
}
} catch { } catch {
loginLoading.value = false loginLoading.value = false
} finally { } finally {
...@@ -291,6 +296,7 @@ onMounted(() => { ...@@ -291,6 +296,7 @@ onMounted(() => {
color: var(--el-color-primary) !important; color: var(--el-color-primary) !important;
} }
} }
.login-code { .login-code {
width: 100%; width: 100%;
height: 38px; height: 38px;
......
src/views/Login/components/LoginFormTitle.vue
...@@ -16,7 +16,8 @@ const getFormTitle = computed(() => { ...@@ -16,7 +16,8 @@ const getFormTitle = computed(() => {
[LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'), [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
[LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'), [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
[LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'), [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
[LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle') [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
[LoginStateEnum.SSO]: t('sys.login.ssoFormTitle')
} }
return titleObj[unref(getLoginState)] return titleObj[unref(getLoginState)]
}) })
......
src/views/Login/components/SSOLogin.vue 0 → 100644
<template>
<div v-show="ssoVisible" class="form-cont">
<!-- 应用名 -->
<LoginFormTitle style="width: 100%" />
<el-tabs class="form" style="float: none" value="uname">
<el-tab-pane :label="client.name" name="uname" />
</el-tabs>
<div>
<el-form :model="formData" class="login-form">
<!-- 授权范围的选择 -->
此第三方应用请求获得以下权限：
<el-form-item prop="scopes">
<el-checkbox-group v-model="formData.scopes">
<el-checkbox
v-for="scope in queryParams.scopes"
:key="scope"
:label="scope"
style="display: block; margin-bottom: -10px"
>
{{ formatScope(scope) }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- 下方的登录按钮 -->
<el-form-item class="w-1/1">
<el-button
:loading="formLoading"
class="w-6/10"
type="primary"
@click.prevent="handleAuthorize(true)"
>
<span v-if="!formLoading">同意授权</span>
<span v-else>授 权 中...</span>
</el-button>
<el-button class="w-3/10" @click.prevent="handleAuthorize(false)">拒绝</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script lang="ts" name="SSOLogin" setup>
import LoginFormTitle from './LoginFormTitle.vue'
import * as OAuth2Api from '@/api/login/oauth2'
import { LoginStateEnum, useLoginState } from './useLogin'
import type { RouteLocationNormalizedLoaded } from 'vue-router'
const route = useRoute() // 路由
const { currentRoute } = useRouter() // 路由
const { getLoginState, setLoginState } = useLoginState()
const client = ref({
// 客户端信息
name: '',
logo: ''
})
const queryParams = reactive({
// URL 上的 client_id、scope 等参数
responseType: '',
clientId: '',
redirectUri: '',
state: '',
scopes: [] // 优先从 query 参数获取；如果未传递，从后端获取
})
const ssoVisible = computed(() => unref(getLoginState) === LoginStateEnum.SSO) // 是否展示 SSO 登录的表单
const formData = reactive({
scopes: [] // 已选中的 scope 数组
})
const formLoading = ref(false) // 表单是否提交中
/** 初始化授权信息 */
const init = async () => {
// 防止在没有登录的情况下循环弹窗
if (typeof route.query.client_id === 'undefined') return
// 解析参数
// 例如说【自动授权不通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read%20user.write
// 例如说【自动授权通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read
queryParams.responseType = route.query.response_type as string
queryParams.clientId = route.query.client_id as string
queryParams.redirectUri = route.query.redirect_uri as string
queryParams.state = route.query.state as string
if (route.query.scope) {
queryParams.scopes = (route.query.scope as string).split(' ')
}
// 如果有 scope 参数，先执行一次自动授权，看看是否之前都授权过了。
if (queryParams.scopes.length > 0) {
const data = await doAuthorize(true, queryParams.scopes, [])
if (data) {
location.href = data
return
}
}
// 获取授权页的基本信息
const data = await OAuth2Api.getAuthorize(queryParams.clientId)
client.value = data.client
// 解析 scope
let scopes
// 1.1 如果 params.scope 非空，则过滤下返回的 scopes
if (queryParams.scopes.length > 0) {
scopes = []
for (const scope of data.scopes) {
if (queryParams.scopes.indexOf(scope.key) >= 0) {
scopes.push(scope)
}
}
// 1.2 如果 params.scope 为空，则使用返回的 scopes 设置它
} else {
scopes = data.scopes
for (const scope of scopes) {
queryParams.scopes.push(scope.key)
}
}
// 生成已选中的 checkedScopes
for (const scope of scopes) {
if (scope.value) {
formData.scopes.push(scope.key)
}
}
}
/** 处理授权的提交 */
const handleAuthorize = async (approved) => {
// 计算 checkedScopes + uncheckedScopes
let checkedScopes
let uncheckedScopes
if (approved) {
// 同意授权，按照用户的选择
checkedScopes = formData.scopes
uncheckedScopes = queryParams.scopes.filter((item) => checkedScopes.indexOf(item) === -1)
} else {
// 拒绝，则都是取消
checkedScopes = []
uncheckedScopes = queryParams.scopes
}
// 提交授权的请求
formLoading.value = true
try {
const data = await doAuthorize(false, checkedScopes, uncheckedScopes)
if (!data) {
return
}
location.href = data
} finally {
formLoading.value = false
}
}
/** 调用授权 API 接口 */
const doAuthorize = (autoApprove, checkedScopes, uncheckedScopes) => {
return OAuth2Api.authorize(
queryParams.responseType,
queryParams.clientId,
queryParams.redirectUri,
queryParams.state,
autoApprove,
checkedScopes,
uncheckedScopes
)
}
/** 格式化 scope 文本 */
const formatScope = (scope) => {
// 格式化 scope 授权范围，方便用户理解。
// 这里仅仅是一个 demo，可以考虑录入到字典数据中，例如说字典类型 "system_oauth2_scope"，它的每个 scope 都是一条字典数据。
switch (scope) {
case 'user.read':
return '访问你的个人信息'
case 'user.write':
return '修改你的个人信息'
default:
return scope
}
}
/** 监听当前路由为 SSOLogin 时，进行数据的初始化 */
watch(
() => currentRoute.value,
(route: RouteLocationNormalizedLoaded) => {
if (route.name === 'SSOLogin') {
setLoginState(LoginStateEnum.SSO)
init()
}
},
{ immediate: true }
)
</script>
src/views/Login/components/index.ts
...@@ -3,5 +3,6 @@ import MobileForm from './MobileForm.vue' ...@@ -3,5 +3,6 @@ import MobileForm from './MobileForm.vue'
import LoginFormTitle from './LoginFormTitle.vue' import LoginFormTitle from './LoginFormTitle.vue'
import RegisterForm from './RegisterForm.vue' import RegisterForm from './RegisterForm.vue'
import QrCodeForm from './QrCodeForm.vue' import QrCodeForm from './QrCodeForm.vue'
import SSOLoginVue from './SSOLogin.vue'
export { LoginForm, MobileForm, LoginFormTitle, RegisterForm, QrCodeForm } export { LoginForm, MobileForm, LoginFormTitle, RegisterForm, QrCodeForm, SSOLoginVue }
src/views/Login/components/useLogin.ts
...@@ -5,7 +5,8 @@ export enum LoginStateEnum { ...@@ -5,7 +5,8 @@ export enum LoginStateEnum {
REGISTER, REGISTER,
RESET_PASSWORD, RESET_PASSWORD,
MOBILE, MOBILE,
QR_CODE QR_CODE,
SSO
} }
const currentState = ref(LoginStateEnum.LOGIN) const currentState = ref(LoginStateEnum.LOGIN)
......
src/views/bpm/definition/index.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<el-table-column label="定义编号" align="center" prop="id" width="400" /> <el-table-column label="定义编号" align="center" prop="id" width="400" />
<el-table-column label="流程名称" align="center" prop="name" width="200"> <el-table-column label="流程名称" align="center" prop="name" width="200">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="handleBpmnDetail(scope.row)"> <el-button type="primary" link @click="handleBpmnDetail(scope.row)">
<span>{{ scope.row.name }}</span> <span>{{ scope.row.name }}</span>
</el-button> </el-button>
</template> </template>
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
> >
<span>{{ scope.row.formName }}</span> <span>{{ scope.row.formName }}</span>
</el-button> </el-button>
<el-button v-else type="text" @click="handleFormDetail(scope.row)"> <el-button v-else type="primary" link @click="handleFormDetail(scope.row)">
<span>{{ scope.row.formCustomCreatePath }}</span> <span>{{ scope.row.formCustomCreatePath }}</span>
</el-button> </el-button>
</template> </template>
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts" name="Form"> <script setup lang="ts" name="BpmProcessDefinition">
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as DefinitionApi from '@/api/bpm/definition' import * as DefinitionApi from '@/api/bpm/definition'
......
src/views/bpm/form/index.vue
...@@ -83,12 +83,11 @@ ...@@ -83,12 +83,11 @@
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts" name="Form"> <script setup lang="ts" name="BpmForm">
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as FormApi from '@/api/bpm/form' import * as FormApi from '@/api/bpm/form'
import { setConfAndFields2 } from '@/utils/formCreate' import { setConfAndFields2 } from '@/utils/formCreate'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const { push } = useRouter() // 路由 const { push } = useRouter() // 路由
...@@ -130,7 +129,7 @@ const resetQuery = () => { ...@@ -130,7 +129,7 @@ const resetQuery = () => {
/** 添加/修改操作 */ /** 添加/修改操作 */
const openForm = (id?: number) => { const openForm = (id?: number) => {
push({ push({
name: 'bpmFormEditor', name: 'BpmFormEditor',
query: { query: {
id id
} }
......
src/views/bpm/group/index.vue
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
<UserGroupForm ref="formRef" @success="getList" /> <UserGroupForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="UserGroup"> <script setup lang="ts" name="BpmUserGroup">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as UserGroupApi from '@/api/bpm/userGroup' import * as UserGroupApi from '@/api/bpm/userGroup'
......
src/views/bpm/model/editor/index.vue
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts"> <script setup lang="ts" name="BpmModelEditor">
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务） // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad' import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
// 自定义左侧菜单（修改 默认任务 为 用户任务） // 自定义左侧菜单（修改 默认任务 为 用户任务）
......
src/views/bpm/model/index.vue
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
<el-table-column label="流程标识" align="center" prop="key" width="200" /> <el-table-column label="流程标识" align="center" prop="key" width="200" />
<el-table-column label="流程名称" align="center" prop="name" width="200"> <el-table-column label="流程名称" align="center" prop="name" width="200">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="handleBpmnDetail(scope.row)"> <el-button type="primary" link @click="handleBpmnDetail(scope.row)">
<span>{{ scope.row.name }}</span> <span>{{ scope.row.name }}</span>
</el-button> </el-button>
</template> </template>
...@@ -224,7 +224,7 @@ ...@@ -224,7 +224,7 @@
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts" name="Form"> <script setup lang="ts" name="BpmModel">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter, formatDate } from '@/utils/formatTime' import { dateFormatter, formatDate } from '@/utils/formatTime'
import * as ModelApi from '@/api/bpm/model' import * as ModelApi from '@/api/bpm/model'
...@@ -319,7 +319,7 @@ const handleChangeState = async (row) => { ...@@ -319,7 +319,7 @@ const handleChangeState = async (row) => {
/** 设计流程 */ /** 设计流程 */
const handleDesign = (row) => { const handleDesign = (row) => {
push({ push({
name: 'modelEditor', name: 'BpmModelEditor',
query: { query: {
modelId: row.id modelId: row.id
} }
...@@ -352,7 +352,7 @@ const handleAssignRule = (row) => { ...@@ -352,7 +352,7 @@ const handleAssignRule = (row) => {
/** 跳转到指定流程定义列表 */ /** 跳转到指定流程定义列表 */
const handleDefinitionList = (row) => { const handleDefinitionList = (row) => {
push({ push({
name: 'BpmProcessDefinitionList', name: 'BpmProcessDefinition',
query: { query: {
key: row.key key: row.key
} }
......
src/views/bpm/oa/leave/create.vue
<template> <template>
<ContentWrap> <Dialog title="发起 OA 请假流程" v-model="modelVisible">
<!-- 对话框(添加 / 修改) --> <el-form
<Form :schema="allSchemas.formSchema" :rules="rules" ref="formRef" /> ref="formRef"
<!-- 按钮：保存 --> :model="formData"
<XButton :rules="formRules"
type="primary" label-width="80px"
:title="t('action.save')" v-loading="formLoading"
:loading="actionLoading" >
@click="submitForm" <el-form-item label="请假类型" prop="type">
/> <el-select v-model="formData.type" placeholder="请选择请假类型" clearable>
</ContentWrap> <el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
clearable
v-model="formData.startTime"
type="datetime"
value-format="x"
placeholder="请选择开始时间"
/>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker
clearable
v-model="formData.endTime"
type="datetime"
value-format="x"
placeholder="请选择结束时间"
/>
</el-form-item>
<el-form-item label="原因" prop="reason">
<el-input v-model="formData.reason" 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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { FormExpose } from '@/components/Form' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
// import XEUtils from 'xe-utils'
// 业务相关的 import
import * as LeaveApi from '@/api/bpm/leave' import * as LeaveApi from '@/api/bpm/leave'
import { rules, allSchemas } from './leave.data'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { push } = useRouter() // 路由
// 表单参数 const modelVisible = ref(false) // 弹窗的是否展示
const actionLoading = ref(false) // 按钮 Loading const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formRef = ref<FormExpose>() // 表单 Ref const formData = ref({
type: undefined,
reason: undefined,
startTime: undefined,
endTime: undefined
})
const formRules = reactive({
type: [{ required: true, message: '请假类型不能为空', trigger: 'blur' }],
reason: [{ required: true, message: '请假原因不能为空', trigger: 'change' }],
startTime: [{ required: true, message: '请假开始时间不能为空', trigger: 'change' }],
endTime: [{ required: true, message: '请假结束时间不能为空', trigger: 'change' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async () => {
modelVisible.value = true
resetForm()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
// 提交按钮 /** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => { const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef() // 校验表单
if (!elForm) return if (!formRef) return
elForm.validate(async (valid) => { const valid = await formRef.value.validate()
if (!valid) { if (!valid) return
return // 提交请求
} formLoading.value = true
try { try {
// 设置提交中 const data = formData.value as unknown as LeaveApi.LeaveVO
actionLoading.value = true await LeaveApi.createLeave(data)
const data = unref(formRef)?.formModel as LeaveApi.LeaveVO message.success('新增成功')
// data.startTime = XEUtils.toDateString(data.startTime, 'yyyy-MM-dd HH:mm:ss') modelVisible.value = false
// data.endTime = XEUtils.toDateString(data.endTime, 'yyyy-MM-dd HH:mm:ss') // 发送操作成功的事件
data.startTime = Date.parse(new Date(data.startTime).toString()).toString() emit('success')
data.endTime = Date.parse(new Date(data.endTime).toString()).toString() } finally {
// 添加的提交 formLoading.value = false
await LeaveApi.createLeave(data) }
message.success(t('common.createSuccess')) }
// 关闭窗口
push('/bpm/oa/leave') /** 重置表单 */
} finally { const resetForm = () => {
actionLoading.value = false formData.value = {
} type: undefined,
}) reason: undefined,
startTime: undefined,
endTime: undefined
}
formRef.value?.resetFields()
} }
</script> </script>
src/views/bpm/oa/leave/detail.vue
<template> <template>
<ContentWrap> <Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="200">
<!-- 详情 --> <el-descriptions border :column="1">
<Descriptions :schema="allSchemas.detailSchema" :data="formData" /> <el-descriptions-item label="请假类型">
<el-button @click="routerReturn" type="primary">返回</el-button> <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="detailData.type" />
</ContentWrap> </el-descriptions-item>
<el-descriptions-item label="开始时间">
{{ formatDate(detailData.startTime) }}
</el-descriptions-item>
<el-descriptions-item label="结束时间">
{{ formatDate(detailData.endTime) }}
</el-descriptions-item>
<el-descriptions-item label="原因">
{{ detailData.reason }}
</el-descriptions-item>
</el-descriptions>
</Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// 业务相关的 import import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as LeaveApi from '@/api/bpm/leave' import * as LeaveApi from '@/api/bpm/leave'
import { allSchemas } from '@/views/bpm/oa/leave/leave.data'
import { useRouter } from 'vue-router'
const router = useRouter()
const { query } = useRoute() // 查询参数
const message = useMessage() // 消息弹窗
const id = ref() // 请假编号
// 表单参数
const formData = ref({
startTime: undefined,
endTime: undefined,
type: undefined,
reason: undefined
})
const routerReturn = () => { const modelVisible = ref(false) // 弹窗的是否展示
router.back() const detailLoading = ref(false) // 表单的加载中
} const detailData = ref() // 详情数据
onMounted(() => { /** 打开弹窗 */
id.value = query.id const open = async (data: LeaveApi.LeaveVO) => {
if (!id.value) { modelVisible.value = true
message.error('未传递 id 参数，无法查看 OA 请假信息') // 设置数据
return detailLoading.value = true
try {
detailData.value = data
} finally {
detailLoading.value = false
} }
// 获得请假信息 }
LeaveApi.getLeave(id.value).then((data) => { defineExpose({ open }) // 提供 open 方法，用于打开弹窗
formData.value = data
})
})
</script> </script>
src/views/bpm/oa/leave/index.vue
<template> <template>
<ContentWrap> <ContentWrap>
<XTable @register="registerTable"> <!-- 搜索工作栏 -->
<template #toolbar_buttons> <el-form
<!-- 操作：发起请假 --> class="-mb-15px"
<XButton type="primary" preIcon="ep:plus" title="发起请假" @click="handleCreate()" /> :model="queryParams"
</template> ref="queryFormRef"
<template #actionbtns_default="{ row }"> :inline="true"
<!-- 操作: 取消请假 --> label-width="68px"
<XTextButton >
preIcon="ep:delete" <el-form-item label="请假类型" prop="type">
title="取消请假" <el-select
v-hasPermi="['bpm:oa-leave:create']" v-model="queryParams.type"
v-if="row.result === 1" placeholder="请选择请假类型"
@click="cancelLeave(row)" clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_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>
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" /> <el-form-item label="结果" prop="result">
<!-- 操作: 审批进度 --> <el-select v-model="queryParams.result" placeholder="请选择结果" clearable class="!w-240px">
<XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleProcessDetail(row)" /> <el-option
</template> v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
</XTable> :key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="原因" prop="reason">
<el-input
v-model="queryParams.reason"
placeholder="请输入原因"
clearable
@keyup.enter="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="handleCreate()">
<Icon icon="ep:plus" class="mr-5px" /> 发起请假
</el-button>
</el-form-item>
</el-form>
</ContentWrap> </ContentWrap>
</template>
<script setup lang="ts"> <!-- 列表 -->
// 全局相关的 import <ContentWrap>
import { ElMessageBox } from 'element-plus' <el-table v-loading="loading" :data="list">
// 业务相关的 import <el-table-column label="申请编号" align="center" prop="id" />
import { allSchemas } from './leave.data' <el-table-column label="状态" align="center" prop="result">
<template #default="scope">
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result" />
</template>
</el-table-column>
<el-table-column
label="开始时间"
align="center"
prop="startTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column
label="结束时间"
align="center"
prop="endTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="请假类型" align="center" prop="type">
<template #default="scope">
<dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="原因" align="center" prop="reason" />
<el-table-column
label="申请时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center" width="200">
<template #default="scope">
<el-button
link
type="primary"
@click="handleDetail(scope.row)"
v-hasPermi="['bpm:oa-leave:query']"
>
详情
</el-button>
<el-button
link
type="primary"
@click="handleProcessDetail(scope.row)"
v-hasPermi="['bpm:oa-leave:query']"
>
进度
</el-button>
<el-button
link
type="danger"
@click="cancelLeave(scope.row)"
v-hasPermi="['bpm:oa-leave:create']"
v-if="scope.row.result === 1"
>
取消
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：详情 -->
<LeaveDetail ref="detailRef" />
<!-- 表单弹窗：添加 -->
<LeaveForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="BpmOALeave">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as LeaveApi from '@/api/bpm/leave' import * as LeaveApi from '@/api/bpm/leave'
import * as ProcessInstanceApi from '@/api/bpm/processInstance' import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import LeaveDetail from './detail.vue'
const { t } = useI18n() // 国际化 import LeaveForm from './create.vue'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { push } = useRouter() // 路由 const router = useRouter() // 路由
const { t } = useI18n() // 国际化
const [registerTable, { reload }] = useXTable({ const loading = ref(true) // 列表的加载中
allSchemas: allSchemas, const total = ref(0) // 列表的总页数
getListApi: LeaveApi.getLeavePage const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
type: undefined,
result: undefined,
reason: undefined,
createTime: []
}) })
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await LeaveApi.getLeavePage(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 handleCreate = () => { const handleCreate = () => {
push({ formRef.value.open()
name: 'OALeaveCreate'
})
} }
// 取消请假 /** 详情操作 */
const cancelLeave = (row) => { const detailRef = ref()
ElMessageBox.prompt('请输入取消原因', '取消流程', { const handleDetail = (data: LeaveApi.LeaveVO) => {
detailRef.value.open(data)
}
/** 取消请假操作 */
const cancelLeave = async (row) => {
// 二次确认
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
confirmButtonText: t('common.ok'), confirmButtonText: t('common.ok'),
cancelButtonText: t('common.cancel'), cancelButtonText: t('common.cancel'),
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格 inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
inputErrorMessage: '取消原因不能为空' inputErrorMessage: '取消原因不能为空'
}).then(async ({ value }) => {
await ProcessInstanceApi.cancelProcessInstance(row.id, value)
message.success('取消成功')
reload()
})
}
// 详情
const handleDetail = (row) => {
push({
name: 'OALeaveDetail',
query: {
id: row.id
}
}) })
// 发起取消
await ProcessInstanceApi.cancelProcessInstance(row.id, value)
message.success('取消成功')
// 刷新列表
await getList()
} }
// 审批进度 /** 审批进度 */
const handleProcessDetail = (row) => { const handleProcessDetail = (row) => {
push({ router.push({
name: 'BpmProcessInstanceDetail', name: 'BpmProcessInstanceDetail',
query: { query: {
id: row.processInstanceId id: row.processInstanceId
} }
}) })
} }
/** 初始化 **/
onMounted(() => {
getList()
})
</script> </script>
src/views/bpm/oa/leave/leave.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// 表单校验
export const rules = reactive({
startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }]
})
// crudSchemas
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: 'id',
primaryTitle: '申请编号',
action: true,
actionWidth: '260',
searchSpan: 8,
columns: [
{
title: t('common.status'),
field: 'result',
dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
dictClass: 'number',
isSearch: true,
isForm: false
},
{
title: t('common.startTimeText'),
field: 'startTime',
formatter: 'formatDay',
table: {
width: 180
},
detail: {
dateFormat: 'YYYY-MM-DD'
},
form: {
component: 'DatePicker'
}
},
{
title: t('common.endTimeText'),
field: 'endTime',
formatter: 'formatDay',
table: {
width: 180
},
detail: {
dateFormat: 'YYYY-MM-DD'
},
form: {
component: 'DatePicker'
}
},
{
title: '请假类型',
field: 'type',
dictType: DICT_TYPE.BPM_OA_LEAVE_TYPE,
dictClass: 'number',
isSearch: true
},
{
title: '原因',
field: 'reason',
isSearch: true,
componentProps: {
type: 'textarea',
rows: 4
}
},
{
title: '申请时间',
field: 'createTime',
formatter: 'formatDate',
table: {
width: 180
},
isSearch: true,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
},
isForm: false
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/bpm/processInstance/create/index.vue
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
<ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" /> <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts"> <script setup lang="ts" name="BpmProcessInstanceCreate">
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import * as DefinitionApi from '@/api/bpm/definition' import * as DefinitionApi from '@/api/bpm/definition'
import * as ProcessInstanceApi from '@/api/bpm/processInstance' import * as ProcessInstanceApi from '@/api/bpm/processInstance'
......
src/views/bpm/processInstance/detail/index.vue
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
<TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" /> <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts"> <script setup lang="ts" name="BpmProcessInstanceDetail">
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
import { setConfAndFields2 } from '@/utils/formCreate' import { setConfAndFields2 } from '@/utils/formCreate'
import type { ApiAttrs } from '@form-create/element-ui/types/config' import type { ApiAttrs } from '@form-create/element-ui/types/config'
......
src/views/bpm/processInstance/index.vue
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 列表 --> <!-- 搜索工作栏 -->
<XTable @register="registerTable"> <el-form
<template #toolbar_buttons> class="-mb-15px"
<!-- 操作：新增 --> :model="queryParams"
<XButton 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="processDefinitionId">
<el-input
v-model="queryParams.processDefinitionId"
placeholder="请输入流程定义的编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="流程分类" prop="category">
<el-select
v-model="queryParams.category"
placeholder="请选择流程分类"
clearable
class="!w-240px"
>
<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="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="结果" prop="result">
<el-select v-model="queryParams.result" placeholder="请选择结果" clearable class="!w-240px">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="提交时间" prop="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" type="primary"
preIcon="ep:zoom-in" plain
title="发起流程"
v-hasPermi="['bpm:process-instance:query']" v-hasPermi="['bpm:process-instance:query']"
@click="handleCreate" @click="handleCreate"
/> >
</template> <Icon icon="ep:plus" class="mr-5px" /> 发起流程
<!-- 流程分类 -->
<template #category_default="{ row }">
<DictTag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="Number(row?.category)" />
</template>
<!-- 当前审批任务 -->
<template #tasks_default="{ row }">
<el-button v-for="task in row.tasks" :key="task.id" link>
<span>{{ task.name }}</span>
</el-button> </el-button>
</template> </el-form-item>
<!-- 操作 --> </el-form>
<template #actionbtns_default="{ row }"> </ContentWrap>
<XTextButton
preIcon="ep:view" <!-- 列表 -->
:title="t('action.detail')" <ContentWrap>
v-hasPermi="['bpm:process-instance:cancel']" <el-table v-loading="loading" :data="list">
@click="handleDetail(row)" <el-table-column label="流程编号" align="center" prop="id" width="300px" />
/> <el-table-column label="流程名称" align="center" prop="name" />
<XTextButton <el-table-column label="流程分类" align="center" prop="category">
preIcon="ep:delete" <template #default="scope">
title="取消" <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
v-if="row.result === 1" </template>
v-hasPermi="['bpm:process-instance:query']" </el-table-column>
@click="handleCancel(row)" <el-table-column label="当前审批任务" align="center" prop="tasks">
/> <template #default="scope">
</template> <el-button type="primary" v-for="task in scope.row.tasks" :key="task.id" link>
</XTable> <span>{{ task.name }}</span>
</el-button>
</template>
</el-table-column>
<el-table-column label="状态" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="结果" prop="result">
<template #default="scope">
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result" />
</template>
</el-table-column>
<el-table-column
label="提交时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column
label="结束时间"
align="center"
prop="endTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
v-hasPermi="['bpm:process-instance:cancel']"
@click="handleDetail(scope.row)"
>
详情
</el-button>
<el-button
link
type="primary"
v-if="scope.row.result === 1"
v-hasPermi="['bpm:process-instance:query']"
@click="handleCancel(scope.row)"
>
取消
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts"> <script setup lang="ts" name="BpmProcessInstance">
// 全局相关的 import import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
import { DICT_TYPE } from '@/utils/dict'
// 业务相关的 import
import * as ProcessInstanceApi from '@/api/bpm/processInstance' import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import { allSchemas } from './process.data'
const router = useRouter() // 路由 const router = useRouter() // 路由
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
// ========== 列表相关 ========== const loading = ref(true) // 列表的加载中
const [registerTable, { reload }] = useXTable({ const total = ref(0) // 列表的总页数
allSchemas: allSchemas, const list = ref([]) // 列表的数据
getListApi: ProcessInstanceApi.getMyProcessInstancePage const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: '',
processDefinitionId: undefined,
category: undefined,
status: undefined,
result: undefined,
createTime: []
}) })
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ProcessInstanceApi.getMyProcessInstancePage(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 handleCreate = () => { const handleCreate = () => {
...@@ -67,7 +214,7 @@ const handleCreate = () => { ...@@ -67,7 +214,7 @@ const handleCreate = () => {
}) })
} }
// 列表操作 /** 查看详情 */
const handleDetail = (row) => { const handleDetail = (row) => {
router.push({ router.push({
name: 'BpmProcessInstanceDetail', name: 'BpmProcessInstanceDetail',
...@@ -78,16 +225,23 @@ const handleDetail = (row) => { ...@@ -78,16 +225,23 @@ const handleDetail = (row) => {
} }
/** 取消按钮操作 */ /** 取消按钮操作 */
const handleCancel = (row) => { const handleCancel = async (row) => {
ElMessageBox.prompt('请输入取消原因', '取消流程', { // 二次确认
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
confirmButtonText: t('common.ok'), confirmButtonText: t('common.ok'),
cancelButtonText: t('common.cancel'), cancelButtonText: t('common.cancel'),
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格 inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
inputErrorMessage: '取消原因不能为空' inputErrorMessage: '取消原因不能为空'
}).then(async ({ value }) => {
await ProcessInstanceApi.cancelProcessInstance(row.id, value)
message.success('取消成功')
reload()
}) })
// 发起取消
await ProcessInstanceApi.cancelProcessInstance(row.id, value)
message.success('取消成功')
// 刷新列表
await getList()
} }
/** 初始化 **/
onMounted(() => {
getList()
})
</script> </script>
src/views/bpm/processInstance/process.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// CrudSchema
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
primaryTitle: '编号',
action: true,
actionWidth: '200px',
columns: [
{
title: '编号',
field: 'id',
table: {
width: 320
}
},
{
title: '流程名',
field: 'name',
isSearch: true
},
{
title: '所属流程',
field: 'processDefinitionId',
isSearch: true,
isTable: false
},
{
title: '流程分类',
field: 'category',
dictType: DICT_TYPE.BPM_MODEL_CATEGORY,
dictClass: 'number',
isSearch: true,
table: {
slots: {
default: 'category_default'
}
}
},
{
title: '当前审批任务',
field: 'tasks',
table: {
width: 140,
slots: {
default: 'tasks_default'
}
}
},
{
title: t('common.status'),
field: 'status',
dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
dictClass: 'number',
isSearch: true
},
{
title: '结果',
field: 'result',
dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
dictClass: 'number',
isSearch: true
},
{
title: '提交时间',
field: 'createTime',
formatter: 'formatDate',
table: {
width: 180
},
isForm: false,
isSearch: true,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: '结束时间',
field: 'endTime',
formatter: 'formatDate',
table: {
width: 180
},
isForm: false
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/bpm/task/done/index.vue
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
<!-- 表单弹窗：详情 --> <!-- 表单弹窗：详情 -->
<TaskDetail ref="detailRef" @success="getList" /> <TaskDetail ref="detailRef" @success="getList" />
</template> </template>
<script setup lang="tsx"> <script setup lang="tsx" name="BpmTodoTask">
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as TaskApi from '@/api/bpm/task' import * as TaskApi from '@/api/bpm/task'
......
src/views/bpm/task/todo/index.vue
<template> <template>
<ContentWrap> <ContentWrap>
<XTable @register="registerTable"> <!-- 搜索工作栏 -->
<template #suspensionState_default="{ row }"> <el-form
<el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag> class="-mb-15px"
<el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag> :model="queryParams"
</template> ref="queryFormRef"
<template #actionbtns_default="{ row }"> :inline="true"
<!-- 操作: 审批进度 --> label-width="68px"
<XTextButton preIcon="ep:edit-pen" title="审批进度" @click="handleAudit(row)" /> >
</template> <el-form-item label="任务名称" prop="name">
</XTable> <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-form-item>
</el-form>
</ContentWrap> </ContentWrap>
</template>
<script setup lang="ts"> <!-- 列表 -->
// 业务相关的 import <ContentWrap>
import { allSchemas } from './todo.data' <el-table v-loading="loading" :data="list">
import * as TaskApi from '@/api/bpm/task' <el-table-column label="任务编号" align="center" prop="id" width="300px" />
<el-table-column label="任务名称" align="center" prop="name" />
<el-table-column label="所属流程" align="center" prop="processInstance.name" />
<el-table-column label="流程发起人" align="center" prop="processInstance.startUserNickname" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="任务状态" prop="suspensionState">
<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">
<template #default="scope">
<el-button link type="primary" @click="handleAudit(scope.row)">审批进度</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="tsx" name="BpmDoneTask">
import { dateFormatter } from '@/utils/formatTime'
const { push } = useRouter() // 路由 const { push } = useRouter() // 路由
import * as TaskApi from '@/api/bpm/task'
const [registerTable] = useXTable({ const loading = ref(true) // 列表的加载中
allSchemas: allSchemas, const total = ref(0) // 列表的总页数
topActionSlots: false, const list = ref([]) // 列表的数据
getListApi: TaskApi.getTodoTaskPage const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: '',
createTime: []
}) })
const queryFormRef = ref() // 搜索的表单
/** 查询任务列表 */
const getList = async () => {
loading.value = true
try {
const data = await TaskApi.getTodoTaskPage(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 handleAudit = (row) => { const handleAudit = (row) => {
push({ push({
name: 'BpmProcessInstanceDetail', name: 'BpmProcessInstanceDetail',
...@@ -35,4 +120,9 @@ const handleAudit = (row) => { ...@@ -35,4 +120,9 @@ const handleAudit = (row) => {
} }
}) })
} }
/** 初始化 **/
onMounted(() => {
getList()
})
</script> </script>
src/views/bpm/task/todo/todo.data.ts deleted 100644 → 0
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
const { t } = useI18n() // 国际化
// crudSchemas
const crudSchemas = reactive<VxeCrudSchema>({
primaryKey: 'id',
primaryType: null,
action: true,
searchSpan: 8,
columns: [
{
title: '任务编号',
field: 'id',
table: {
width: 320
}
},
{
title: '任务名称',
field: 'name',
isSearch: true
},
{
title: '所属流程',
field: 'processInstance.name'
},
{
title: '流程发起人',
field: 'processInstance.startUserNickname'
},
{
title: t('common.createTime'),
field: 'createTime',
formatter: 'formatDate',
table: {
width: 180
},
isSearch: true,
search: {
show: true,
itemRender: {
name: 'XDataTimePicker'
}
}
},
{
title: '任务状态',
field: 'suspensionState',
table: {
slots: {
default: 'suspensionState_default'
}
}
}
]
})
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
src/views/bpm/taskAssignRule/index.vue
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<!-- 添加/修改弹窗 --> <!-- 添加/修改弹窗 -->
<TaskAssignRuleForm ref="formRef" @success="getList" /> <TaskAssignRuleForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="TaskAssignRule"> <script setup lang="ts" name="BpmTaskAssignRule">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule' import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
import * as RoleApi from '@/api/system/role' import * as RoleApi from '@/api/system/role'
......
src/views/infra/apiAccessLog/index.vue
...@@ -139,7 +139,7 @@ ...@@ -139,7 +139,7 @@
<!-- 表单弹窗：详情 --> <!-- 表单弹窗：详情 -->
<ApiAccessLogDetail ref="detailRef" /> <ApiAccessLogDetail ref="detailRef" />
</template> </template>
<script setup lang="ts" name="ApiAccessLog"> <script setup lang="ts" name="InfraApiAccessLog">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import download from '@/utils/download' import download from '@/utils/download'
import { formatDate } from '@/utils/formatTime' import { formatDate } from '@/utils/formatTime'
......
src/views/infra/apiErrorLog/index.vue
...@@ -158,14 +158,13 @@ ...@@ -158,14 +158,13 @@
<ApiErrorLogDetail ref="detailRef" /> <ApiErrorLogDetail ref="detailRef" />
</template> </template>
<script setup lang="ts" name="ApiErrorLog"> <script setup lang="ts" name="InfraApiErrorLog">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
import * as ApiErrorLogApi from '@/api/infra/apiErrorLog' import * as ApiErrorLogApi from '@/api/infra/apiErrorLog'
import ApiErrorLogDetail from './ApiErrorLogDetail.vue' import ApiErrorLogDetail from './ApiErrorLogDetail.vue'
import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants' import { InfraApiErrorLogProcessStatusEnum } from '@/utils/constants'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中 const loading = ref(true) // 列表的加载中
......
src/views/infra/build/index.vue
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</div> </div>
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts" name="Build"> <script setup lang="ts" name="InfraBuild">
import formCreate from '@form-create/element-ui' import formCreate from '@form-create/element-ui'
import { useClipboard } from '@vueuse/core' import { useClipboard } from '@vueuse/core'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
......
src/views/infra/codegen/index.vue
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
<!-- 弹窗：预览代码 --> <!-- 弹窗：预览代码 -->
<PreviewCode ref="previewRef" /> <PreviewCode ref="previewRef" />
</template> </template>
<script setup lang="ts" name="Codegen"> <script setup lang="ts" name="InfraCodegen">
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
import * as CodegenApi from '@/api/infra/codegen' import * as CodegenApi from '@/api/infra/codegen'
......
src/views/infra/config/index.vue
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<ConfigForm ref="formRef" @success="getList" /> <ConfigForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="Config"> <script setup lang="ts" name="InfraConfig">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
......
src/views/infra/dataSourceConfig/index.vue
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<DataSourceConfigForm ref="formRef" @success="getList" /> <DataSourceConfigForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="DataSourceConfig"> <script setup lang="ts" name="InfraDataSourceConfig">
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig' import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
import DataSourceConfigForm from './DataSourceConfigForm.vue' import DataSourceConfigForm from './DataSourceConfigForm.vue'
......
src/views/infra/dbDoc/index.vue
...@@ -2,46 +2,38 @@ ...@@ -2,46 +2,38 @@
<doc-alert title="数据库文档" url="https://doc.iocoder.cn/db-doc/" /> <doc-alert title="数据库文档" url="https://doc.iocoder.cn/db-doc/" />
<ContentWrap title="数据库文档"> <ContentWrap title="数据库文档">
<!-- 操作工具栏 -->
<div class="mb-10px"> <div class="mb-10px">
<XButton <el-button type="primary" plain @click="handleExport('HTML')">
type="primary" <Icon icon="ep:download" /> 导出 HTML
preIcon="ep:download" </el-button>
:title="t('action.export') + ' HTML'" <el-button type="primary" plain @click="handleExport('Word')">
@click="handleExport('HTML')" <Icon icon="ep:download" /> 导出 Word
/> </el-button>
<XButton <el-button type="primary" plain @click="handleExport('Markdown')">
type="primary" <Icon icon="ep:download" /> 导出 Markdown
preIcon="ep:download" </el-button>
:title="t('action.export') + ' Word'"
@click="handleExport('Word')"
/>
<XButton
type="primary"
preIcon="ep:download"
:title="t('action.export') + ' Markdown'"
@click="handleExport('Markdown')"
/>
</div> </div>
<IFrame v-if="!loding" v-loading="loding" :src="src" /> <IFrame v-if="!loading" v-loading="loading" :src="src" />
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts" name="DbDoc"> <script setup lang="ts" name="InfraDBDoc">
import download from '@/utils/download' import download from '@/utils/download'
import * as DbDocApi from '@/api/infra/dbDoc' import * as DbDocApi from '@/api/infra/dbDoc'
const { t } = useI18n() // 国际化 const loading = ref(true) // 是否加载中
const src = ref('') const src = ref('') // HTML 的地址
const loding = ref(true)
/** 页面加载 */ /** 页面加载 */
const init = async () => { const init = async () => {
const res = await DbDocApi.exportHtml() try {
let blob = new Blob([res], { type: 'text/html' }) const data = await DbDocApi.exportHtml()
let blobUrl = window.URL.createObjectURL(blob) const blob = new Blob([data], { type: 'text/html' })
src.value = blobUrl src.value = window.URL.createObjectURL(blob)
loding.value = false } finally {
loading.value = false
}
} }
/** 处理导出 */ /** 处理导出 */
const handleExport = async (type: string) => { const handleExport = async (type: string) => {
if (type === 'HTML') { if (type === 'HTML') {
...@@ -57,6 +49,8 @@ const handleExport = async (type: string) => { ...@@ -57,6 +49,8 @@ const handleExport = async (type: string) => {
download.markdown(res, '数据库文档.md') download.markdown(res, '数据库文档.md')
} }
} }
/** 初始化 */
onMounted(async () => { onMounted(async () => {
await init() await init()
}) })
......
src/views/infra/druid/index.vue
...@@ -3,10 +3,24 @@ ...@@ -3,10 +3,24 @@
<doc-alert title="多数据源（读写分离）" url="https://doc.iocoder.cn/dynamic-datasource/" /> <doc-alert title="多数据源（读写分离）" url="https://doc.iocoder.cn/dynamic-datasource/" />
<ContentWrap> <ContentWrap>
<IFrame :src="src" /> <IFrame v-if="!loading" :src="url" />
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts" name="Druid"> <script setup lang="ts" name="InfraDruid">
const BASE_URL = import.meta.env.VITE_BASE_URL import * as ConfigApi from '@/api/infra/config'
const src = ref(BASE_URL + '/druid/index.html')
const loading = ref(true) // 是否加载中
const url = ref(import.meta.env.VITE_BASE_URL + '/druid/index.html')
/** 初始化 */
onMounted(async () => {
try {
const data = await ConfigApi.getConfigKey('url.druid')
if (data && data.length > 0) {
url.value = data
}
} finally {
loading.value = false
}
})
</script> </script>
src/views/infra/file/FileForm.vue
...@@ -2,17 +2,19 @@ ...@@ -2,17 +2,19 @@
<Dialog title="上传文件" v-model="dialogVisible"> <Dialog title="上传文件" v-model="dialogVisible">
<el-upload <el-upload
ref="uploadRef" ref="uploadRef"
:limit="1"
accept=".jpg, .png, .gif"
:auto-upload="false"
drag
:headers="headers"
:action="url" :action="url"
:data="data" :data="data"
:disabled="formLoading" :headers="uploadHeaders"
v-model:file-list="fileList"
drag
accept=".jpg, .png, .gif"
:limit="1"
:on-success="submitFormSuccess"
:on-exceed="handleExceed"
:on-error="submitFormError"
:on-change="handleFileChange" :on-change="handleFileChange"
:on-progress="handleFileUploadProgress" :auto-upload="false"
:on-success="handleFileSuccess" :disabled="formLoading"
> >
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
<div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div> <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
...@@ -29,44 +31,47 @@ ...@@ -29,44 +31,47 @@
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Dialog } from '@/components/Dialog' import { getAccessToken, getTenantId } from '@/utils/auth'
import { getAccessToken } from '@/utils/auth'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示 const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题 const formLoading = ref(false) // 表单的加载中
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const url = import.meta.env.VITE_UPLOAD_URL const url = import.meta.env.VITE_UPLOAD_URL
const headers = { Authorization: 'Bearer ' + getAccessToken() } const uploadHeaders = ref() // 上传 Header 头
const fileList = ref([]) // 文件列表
const data = ref({ path: '' }) const data = ref({ path: '' })
const uploadRef = ref() const uploadRef = ref()
/** 打开弹窗 */ /** 打开弹窗 */
const open = async () => { const open = async () => {
dialogVisible.value = true dialogVisible.value = true
resetForm()
} }
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
/** 处理上传的文件发生变化 */ /** 处理上传的文件发生变化 */
const handleFileChange = (file) => { const handleFileChange = (file) => {
data.value.path = file.name data.value.path = file.name
} }
/** 处理文件上传中 */ /** 提交表单 */
const handleFileUploadProgress = () => {
formLoading.value = true // 禁止修改
}
/** 发起文件上传 */
const submitFileForm = () => { const submitFileForm = () => {
if (fileList.value.length == 0) {
message.error('请上传文件')
return
}
// 提交请求
uploadHeaders.value = {
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
}
unref(uploadRef)?.submit() unref(uploadRef)?.submit()
} }
/** 文件上传成功处理 */ /** 文件上传成功处理 */
const handleFileSuccess = () => { const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitFormSuccess = () => {
// 清理 // 清理
dialogVisible.value = false dialogVisible.value = false
formLoading.value = false formLoading.value = false
...@@ -75,4 +80,22 @@ const handleFileSuccess = () => { ...@@ -75,4 +80,22 @@ const handleFileSuccess = () => {
message.success(t('common.createSuccess')) message.success(t('common.createSuccess'))
emit('success') emit('success')
} }
/** 上传错误提示 */
const submitFormError = (): void => {
message.error('上传失败，请您重新上传！')
formLoading.value = false
}
/** 重置表单 */
const resetForm = () => {
// 重置上传状态和文件
formLoading.value = false
uploadRef.value?.clearFiles()
}
/** 文件数超出提示 */
const handleExceed = (): void => {
message.error('最多只能上传一个文件！')
}
</script> </script>
src/views/infra/file/index.vue
<template> <template>
<doc-alert title="上传下载" url="https://doc.iocoder.cn/file/"/> <doc-alert title="上传下载" url="https://doc.iocoder.cn/file/" />
<!-- 搜索 --> <!-- 搜索 -->
<ContentWrap> <ContentWrap>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true"> <el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="文件路径" prop="path"> <el-form-item label="文件路径" prop="path">
<el-input <el-input
v-model="queryParams.path" v-model="queryParams.path"
...@@ -33,7 +38,7 @@ ...@@ -33,7 +38,7 @@
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <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="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button type="primary" @click="openForm"> <el-button type="primary" plain @click="openForm">
<Icon icon="ep:upload" class="mr-5px" /> 上传文件 <Icon icon="ep:upload" class="mr-5px" /> 上传文件
</el-button> </el-button>
</el-form-item> </el-form-item>
...@@ -86,11 +91,11 @@ ...@@ -86,11 +91,11 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<FileForm ref="formRef" @success="getList" /> <FileForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="Config"> <script setup lang="ts" name="InfraFile">
import { fileSizeFormatter } from '@/utils' import { fileSizeFormatter } from '@/utils'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as FileApi from '@/api/infra/file' import * as FileApi from '@/api/infra/file'
import FileUploadForm from './FileForm.vue' import FileForm from './FileForm.vue'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
......
src/views/infra/fileConfig/index.vue
...@@ -3,17 +3,29 @@ ...@@ -3,17 +3,29 @@
<!-- 搜索 --> <!-- 搜索 -->
<ContentWrap> <ContentWrap>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true"> <el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="配置名" prop="name"> <el-form-item label="配置名" prop="name">
<el-input <el-input
v-model="queryParams.name" v-model="queryParams.name"
placeholder="请输入配置名" placeholder="请输入配置名"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
class="!w-240px"
/> />
</el-form-item> </el-form-item>
<el-form-item label="存储器" prop="storage"> <el-form-item label="存储器" prop="storage">
<el-select v-model="queryParams.storage" placeholder="请选择存储器" clearable> <el-select
v-model="queryParams.storage"
placeholder="请选择存储器"
clearable
class="!w-240px"
>
<el-option <el-option
v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_FILE_STORAGE)" v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_FILE_STORAGE)"
:key="dict.value" :key="dict.value"
...@@ -30,6 +42,7 @@ ...@@ -30,6 +42,7 @@
start-placeholder="开始日期" start-placeholder="开始日期"
end-placeholder="结束日期" end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -113,7 +126,7 @@ ...@@ -113,7 +126,7 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<FileConfigForm ref="formRef" @success="getList" /> <FileConfigForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="Config"> <script setup lang="ts" name="InfraFileConfig">
import * as FileConfigApi from '@/api/infra/fileConfig' import * as FileConfigApi from '@/api/infra/fileConfig'
import FileConfigForm from './FileConfigForm.vue' import FileConfigForm from './FileConfigForm.vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
......
src/views/infra/job/index.vue
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
<!-- 表单弹窗：查看 --> <!-- 表单弹窗：查看 -->
<JobDetail ref="detailRef" /> <JobDetail ref="detailRef" />
</template> </template>
<script setup lang="ts" name="Job"> <script setup lang="ts" name="InfraJob">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { checkPermi } from '@/utils/permission' import { checkPermi } from '@/utils/permission'
import JobForm from './JobForm.vue' import JobForm from './JobForm.vue'
......
src/views/infra/job/logger/index.vue
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
<!-- 表单弹窗：查看 --> <!-- 表单弹窗：查看 -->
<JobLogDetail ref="detailRef" /> <JobLogDetail ref="detailRef" />
</template> </template>
<script setup lang="ts" name="JobLog"> <script setup lang="ts" name="InfraJobLog">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime' import { formatDate } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
......
src/views/infra/redis/index.vue
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<el-scrollbar height="calc(100vh - 88px - 40px - 50px)"> <el-scrollbar height="calc(100vh - 88px - 40px - 50px)">
<el-row> <el-row>
<!-- 基本信息 -->
<el-col :span="24" class="card-box" shadow="hover"> <el-col :span="24" class="card-box" shadow="hover">
<el-card> <el-card>
<el-descriptions title="基本信息" :column="6" border> <el-descriptions title="基本信息" :column="6" border>
...@@ -47,106 +48,33 @@ ...@@ -47,106 +48,33 @@
</el-descriptions> </el-descriptions>
</el-card> </el-card>
</el-col> </el-col>
<!-- 命令统计 -->
<el-col :span="12" class="mt-3"> <el-col :span="12" class="mt-3">
<el-card :gutter="12" shadow="hover"> <el-card :gutter="12" shadow="hover">
<div ref="commandStatsRef" class="h-88"></div> <div ref="commandStatsRef" class="h-88"></div>
</el-card> </el-card>
</el-col> </el-col>
<!-- 内存使用量统计 -->
<el-col :span="12" class="mt-3"> <el-col :span="12" class="mt-3">
<el-card class="ml-3" :gutter="12" shadow="hover"> <el-card class="ml-3" :gutter="12" shadow="hover">
<div ref="usedmemory" class="h-88"></div> <div ref="usedmemory" class="h-88"></div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="mt-3">
<el-col :span="24" class="card-box" shadow="hover">
<el-card>
<el-table
v-loading="keyListLoad"
:data="keyList"
row-key="id"
@row-click="openKeyTemplate"
>
<el-table-column prop="keyTemplate" label="Key 模板" width="200" />
<el-table-column prop="keyType" label="Key 类型" width="100" />
<el-table-column prop="valueType" label="Value 类型" />
<el-table-column prop="timeoutType" label="超时时间" width="200">
<template #default="{ row }">
<DictTag :type="DICT_TYPE.INFRA_REDIS_TIMEOUT_TYPE" :value="row?.timeoutType" />
<span v-if="row?.timeout > 0">({{ row?.timeout / 1000 }} 秒)</span>
</template>
</el-table-column>
<el-table-column prop="memo" label="备注" />
</el-table>
</el-card>
</el-col>
</el-row>
</el-scrollbar> </el-scrollbar>
<XModal v-model="dialogVisible" :title="keyTemplate + ' 模板'">
<el-row>
<el-col :span="14" class="mt-3">
<el-card shadow="always">
<template #header>
<div class="card-header">
<span>键名列表</span>
</div>
</template>
<el-table :data="cacheKeys" style="width: 100%" @row-click="handleKeyValue">
<el-table-column label="缓存键名" align="center" :show-overflow-tooltip="true">
<template #default="{ row }">
{{ row }}
</template>
</el-table-column>
<el-table-column label="操作" align="right" width="60">
<template #default="{ row }">
<XTextButton preIcon="ep:delete" @click="handleDeleteKey(row)" />
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :span="10" class="mt-3">
<el-card shadow="always">
<template #header>
<div class="card-header">
<span>缓存内容</span>
<XTextButton
preIcon="ep:refresh"
title="清理全部"
@click="handleDeleteKeys(keyTemplate)"
class="float-right p-1"
/>
</div>
</template>
<el-descriptions :column="1">
<el-descriptions-item label="缓存键名:">{{ cacheForm.key }}</el-descriptions-item>
<el-descriptions-item label="缓存内容:">{{ cacheForm.value }}</el-descriptions-item>
</el-descriptions>
</el-card>
</el-col>
</el-row>
</XModal>
</template> </template>
<script setup lang="ts" name="Redis"> <script setup lang="ts" name="InfraRedis">
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { DICT_TYPE } from '@/utils/dict'
import * as RedisApi from '@/api/infra/redis' import * as RedisApi from '@/api/infra/redis'
import { RedisKeyInfo, RedisMonitorInfoVO } from '@/api/infra/redis/types' import { RedisMonitorInfoVO } from '@/api/infra/redis/types'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const cache = ref<RedisMonitorInfoVO>() const cache = ref<RedisMonitorInfoVO>()
const keyListLoad = ref(true)
const keyList = ref<RedisKeyInfo[]>([])
// 基本信息 // 基本信息
const readRedisInfo = async () => { const readRedisInfo = async () => {
const data = await RedisApi.getCache() const data = await RedisApi.getCache()
cache.value = data cache.value = data
loadEchartOptions(data.commandStats) loadEchartOptions(data.commandStats)
const redisKeysInfo = await RedisApi.getKeyDefineList()
keyList.value = redisKeysInfo
keyListLoad.value = false //加载完成
} }
// 图表 // 图表
const commandStatsRef = ref<HTMLElement>() const commandStatsRef = ref<HTMLElement>()
...@@ -241,40 +169,8 @@ const loadEchartOptions = (stats) => { ...@@ -241,40 +169,8 @@ const loadEchartOptions = (stats) => {
] ]
}) })
} }
const dialogVisible = ref(false)
const keyTemplate = ref('')
const cacheKeys = ref()
const cacheForm = ref<{
key: string
value: string
}>({
key: '',
value: ''
})
const openKeyTemplate = async (row: RedisKeyInfo) => {
keyTemplate.value = row.keyTemplate
cacheKeys.value = await RedisApi.getKeyList(row.keyTemplate)
dialogVisible.value = true
}
const handleDeleteKey = async (row) => {
RedisApi.deleteKey(row)
message.success(t('common.delSuccess'))
}
const handleDeleteKeys = async (row) => {
RedisApi.deleteKeys(row)
message.success(t('common.delSuccess'))
}
const handleKeyValue = async (row) => {
const res = await RedisApi.getKeyValue(row)
cacheForm.value = res
}
onBeforeMount(() => { onBeforeMount(() => {
readRedisInfo() readRedisInfo()
}) })
</script> </script>
<style scoped>
.redis {
height: 600px;
max-height: 860px;
}
</style>
src/views/infra/server/index.vue
<template> <template>
<doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" /> <doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
<ContentWrap> <ContentWrap>
<IFrame :src="src" /> <IFrame v-if="!loading" v-loading="loading" :src="src" />
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts" name="AdminServer"> <script setup lang="ts" name="InfraAdminServer">
const BASE_URL = import.meta.env.VITE_BASE_URL import * as ConfigApi from '@/api/infra/config'
const src = ref(BASE_URL + '/admin/applications')
const loading = ref(true) // 是否加载中
const src = ref(import.meta.env.VITE_BASE_URL + '/admin/applications')
/** 初始化 */
onMounted(async () => {
try {
const data = await ConfigApi.getConfigKey('url.spring-boot-admin')
if (data && data.length > 0) {
src.value = data
}
} finally {
loading.value = false
}
})
</script> </script>
src/views/infra/skywalking/index.vue
<template> <template>
<doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" /> <doc-alert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
<ContentWrap> <ContentWrap>
<IFrame :src="src" /> <IFrame v-if="!loading" v-loading="loading" :src="src" />
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts" name="Skywalking"> <script setup lang="ts" name="InfraSkyWalking">
import * as ConfigApi from '@/api/infra/config'
const loading = ref(true) // 是否加载中
const src = ref('http://skywalking.shop.iocoder.cn') const src = ref('http://skywalking.shop.iocoder.cn')
/** 初始化 */
onMounted(async () => {
try {
const data = await ConfigApi.getConfigKey('url.skywalking')
if (data && data.length > 0) {
src.value = data
}
} finally {
loading.value = false
}
})
</script> </script>
src/views/infra/swagger/index.vue
...@@ -5,8 +5,22 @@ ...@@ -5,8 +5,22 @@
<IFrame :src="src" /> <IFrame :src="src" />
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts" name="Swagger"> <script setup lang="ts" name="InfraSwagger">
const BASE_URL = import.meta.env.VITE_BASE_URL import * as ConfigApi from '@/api/infra/config'
// const src = ref(BASE_URL + '/doc.html')
const src = ref(BASE_URL + '/swagger-ui') const loading = ref(true) // 是否加载中
const src = ref(import.meta.env.VITE_BASE_URL + '/doc.html') // Knife4j UI
// const src = ref(import.meta.env.VITE_BASE_URL + '/swagger-ui') // Swagger UI
/** 初始化 */
onMounted(async () => {
try {
const data = await ConfigApi.getConfigKey('url.swagger')
if (data && data.length > 0) {
src.value = data
}
} finally {
loading.value = false
}
})
</script> </script>
src/views/mall/product/brand/BrandForm.vue 0 → 100644
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<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="picUrl">
<UploadImg v-model="formData.picUrl" :limit="1" :is-show-tip="false" />
</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="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts" name="ProductBrandForm">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import * as ProductBrandApi from '@/api/mall/product/brand'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = 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({
name: [{ required: true, message: '品牌名称不能为空', trigger: 'blur' }],
picUrl: [{ required: true, message: '品牌图片不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '品牌排序不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ProductBrandApi.getBrand(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 ProductBrandApi.BrandVO
if (formType.value === 'create') {
await ProductBrandApi.createBrand(data)
message.success(t('common.createSuccess'))
} else {
await ProductBrandApi.updateBrand(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: '',
picUrl: '',
status: CommonStatusEnum.ENABLE,
description: ''
}
formRef.value?.resetFields()
}
</script>
src/views/mall/product/brand/index.vue 0 → 100644
<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="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"
plain
@click="openForm('create')"
v-hasPermi="['product:brand: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:brand:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['product:brand: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>
<!-- 表单弹窗：添加/修改 -->
<BrandForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="ProductBrand">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import * as ProductBrandApi from '@/api/mall/product/brand'
import BrandForm from './BrandForm.vue'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref<any[]>([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
status: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ProductBrandApi.getBrandParam(queryParams)
list.value = data.list
total.value = data.total
} 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 ProductBrandApi.deleteBrand(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/mall/product/category/CategoryForm.vue
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
</template> </template>
</Dialog> </Dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts" name="ProductCategory">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants' import { CommonStatusEnum } from '@/utils/constants'
import { handleTree } from '@/utils/tree' import { handleTree } from '@/utils/tree'
......
src/views/mall/product/property/index.vue
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<PropertyForm ref="formRef" @success="getList" /> <PropertyForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="Config"> <script setup lang="ts" name="ProductProperty">
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as PropertyApi from '@/api/mall/product/property' import * as PropertyApi from '@/api/mall/product/property'
import PropertyForm from './PropertyForm.vue' import PropertyForm from './PropertyForm.vue'
......
src/views/mall/product/property/value/index.vue
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<ValueForm ref="formRef" @success="getList" /> <ValueForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="Config"> <script setup lang="ts" name="ProductPropertyValue">
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as PropertyApi from '@/api/mall/product/property' import * as PropertyApi from '@/api/mall/product/property'
import ValueForm from './ValueForm.vue' import ValueForm from './ValueForm.vue'
......
src/views/mp/components/wx-editor/WxEditor.vue 0 → 100644
<script setup>
import { ref, reactive } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { getAccessToken } from '@/utils/auth'
import editorOptions from './quill-options'
const BASE_URL = import.meta.env.VITE_BASE_URL
const message = useMessage()
const props = defineProps({
/* 公众号账号编号 */
accountId: {
type: Number,
required: true
},
/* 编辑器的内容 */
value: {
type: String,
default: ''
},
/* 图片大小 */
maxSize: {
type: Number,
default: 4000 // kb
}
})
const emit = defineEmits(['input'])
const myQuillEditorRef = ref()
const content = ref(props.value.replace(/data-src/g, 'src'))
const loading = ref(false) // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
const actionUrl = ref(BASE_URL + '/admin-api/mp/material/upload-news-image') // 这里写你要上传的图片服务器地址
const headers = ref({ Authorization: 'Bearer ' + getAccessToken() }) // 设置上传的请求头部
const uploadData = reactive({
type: 'image', // TODO 芋艿：试试要不要换成 thumb
accountId: props.accountId
})
const onEditorChange = () => {
//内容改变事件
emit('input', content.value)
}
// 富文本图片上传前
const beforeUpload = () => {
// 显示 loading 动画
loading.value = true
}
// 图片上传成功
// 注意！由于微信公众号的图片有访问限制，所以会显示“此图片来自微信公众号，未经允许不可引用”
const uploadSuccess = (res) => {
// res为图片服务器返回的数据
// 获取富文本组件实例
const quill = myQuillEditorRef.value.quill
// 如果上传成功
const link = res.data
if (link) {
// 获取光标所在位置
let length = quill.getSelection().index
// 插入图片 res.info为服务器返回的图片地址
quill.insertEmbed(length, 'image', link)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
message.error('图片插入失败')
}
// loading 动画消失
loading.value = false
}
// 富文本图片上传失败
const uploadError = () => {
// loading 动画消失
loading.value = false
message.error('图片插入失败')
}
</script>
<template>
<div id="wxEditor">
<div v-loading="loading" element-loading-text="请稍等，图片上传中">
<!-- 图片上传组件辅助-->
<el-upload
class="avatar-uploader"
name="file"
:action="actionUrl"
:headers="headers"
:show-file-list="false"
:data="uploadData"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload"
/>
<QuillEditor
class="editor"
v-model="content"
ref="quillEditorRef"
:options="editorOptions"
@change="onEditorChange($event)"
/>
</div>
</div>
</template>
<style>
.editor {
line-height: normal !important;
height: 500px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0;
content: '保存';
padding-right: 0;
}
.ql-snow .ql-tooltip[data-mode='video']::before {
content: '请输入视频地址:';
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
content: '32px';
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
content: '标题6';
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
content: '等宽字体';
}
</style>
src/views/mp/components/wx-editor/quill-options.js 0 → 100644
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
['blockquote', 'code-block'], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
[{ script: 'sub' }, { script: 'super' }], // 上标/下标
[{ indent: '-1' }, { indent: '+1' }], // 缩进
// [{'direction': 'rtl'}], // 文本方向
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ font: [] }], // 字体种类
[{ align: [] }], // 对齐方式
['clean'], // 清除文本格式
['link', 'image', 'video'] // 链接、图片、视频
]
export default {
theme: 'snow',
placeholder: '请输入文章内容',
modules: {
toolbar: {
container: toolbarOptions,
// container: "#toolbar",
handlers: {
image: function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false)
}
},
link: function (value) {
if (value) {
const href = prompt('注意！只支持公众号图文链接')
this.quill.format('link', href)
} else {
this.quill.format('link', false)
}
}
}
}
}
}
src/views/mp/components/wx-msg/main.vue
...@@ -139,7 +139,7 @@ import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue' ...@@ -139,7 +139,7 @@ import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
import WxNews from '@/views/mp/components/wx-news/main.vue' import WxNews from '@/views/mp/components/wx-news/main.vue'
import WxLocation from '@/views/mp/components/wx-location/main.vue' import WxLocation from '@/views/mp/components/wx-location/main.vue'
import WxMusic from '@/views/mp/components/wx-music/main.vue' import WxMusic from '@/views/mp/components/wx-music/main.vue'
import { getUser } from '@/api/mp/mpuser' import { getUser } from '@/api/mp/user'
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
......
src/views/mp/components/wx-voice-play/main.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<span class="amr-duration" v-if="duration">{{ duration }} 秒</span> <span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
</el-icon> </el-icon>
<div v-if="content"> <div v-if="content">
<el-tag type="success" size="mini">语音识别</el-tag> <el-tag type="success" size="small">语音识别</el-tag>
{{ content }} {{ content }}
</div> </div>
</div> </div>
......
src/views/mp/draft/mock.js 0 → 100644
export default {
list: [
{
mediaId: 'r6ryvl6LrxBU0miaST4Y-q-G9pdsmZw0OYG4FzHQkKfpLfEwIH51wy2bxisx8PvW',
content: {
newsItem: [
{
title: '我是标题（OOO）',
author: '我是作者',
digest: '我是摘要',
content: '我是内容',
contentSourceUrl: 'https://www.iocoder.cn',
thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
showCoverPic: 0,
needOpenComment: 0,
onlyFansCanComment: 0,
url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9XaFphcmtJVFh3VEc4Q1MxQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN2QxTE56SFBCYXc2RE9NcUxIeS1CQjJuUHhTWjBlN2VOeGRpRi1fZUhwN1FNQjdrQV9yRU9EU0hibHREZmZoVW5acnZrN3ZjaWsxejR3RGpKczBzTHFIM0dFNFZWVkpBc0dWWlAzUEhlVmpnfn4%3D&chksm=1f6354802814dd969ef83c0f3babe555c614270b30bc383beaf7ffd13b0257f0fe5ced9af694#rd',
thumbUrl:
'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png'
},
{
title: '我是标题（XXX）',
author: '我是作者',
digest: '我是摘要',
content: '我是内容',
contentSourceUrl: 'https://www.iocoder.cn',
thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
showCoverPic: 0,
needOpenComment: 0,
onlyFansCanComment: 0,
url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9yTlYwOEs1clpwcE5OUEhCQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN0NSMjFqN3N1aUZMbFNVLTZHN2ZDME9qOGp2THk2RFNlSTlKZ3Y1czFVZDdQQm5IeUg3dEppSUtpQUh5SExOOTRkT3dHNUdBdHdWSWlOendlREV3dS1jUEVQbFpiVTZmVW5iRWhZcGdkNTFRfn4%3D&chksm=1f6354802814dd96a403151cd44c7da4eecf0e475d25423e46ecd795b513bafd829a75daef9b#rd',
thumbUrl:
'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png'
}
]
},
updateTime: 1673655730
},
{
mediaId: 'r6ryvl6LrxBU0miaST4Y-jGpXnO73ihN0lsNXknCRQHapp2xgHMRxHKG50LituFe',
content: {
newsItem: [
{
title: '我是标题（修改）',
author: '我是作者',
digest: '我是摘要',
content: '我是内容',
contentSourceUrl: 'https://www.iocoder.cn',
thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
showCoverPic: 0,
needOpenComment: 0,
onlyFansCanComment: 0,
url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl95WVFXYndIZnZJd0t5cjgvQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN1dlNURPbWswbEF4RDd5dVJTdjQ4cm9Cc0Q1TWhpMUh6SE1hVEE3ZHljaHhlZjZYSGF5N2JNSHpDTlh6ajNZbkpGTGpTcUQ4M3NMdW41ZUpXNFZZQ1VKbVlaMVp5ekxEV1czREdsY1dOYTZnfn4%3D&chksm=1f6354be2814dda8e6238037c2ebd52b1c8e80e93249a861ad80e4d40e5ca7207233475ca689#rd',
thumbUrl:
'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png'
}
]
},
updateTime: 1673655584
},
{
mediaId: 'r6ryvl6LrxBU0miaST4Y-v5SrbNCPpD6M_p3TmSrYwTjKogs-0DMJgmjMyNZPeMO',
content: {
newsItem: [
{
title: '1321',
author: '3232',
digest: '1333',
content: '<p>444</p>',
contentSourceUrl: 'http://www.iocoder.cn',
thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-tlQmcl3RdC-Jcgns6IQtf7zenGy3b86WLT7GzUcrb1T',
showCoverPic: 0,
needOpenComment: 0,
onlyFansCanComment: 0,
url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9jelJiaDAzbmdpSkJOZ2M2QWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNDNXVVc2ZDRYeTY0Zm1weXR6dE9vQWh1TzEwbEpUVnRfVzJyaGFDNXBkZ0ZXM2JFOTNaRHNhOHRUeFdEanhMeS01X01kMUNWQ1BpRER3cjYwTl9pMnpFLUJhZXFucVVfM1pDUXlTUEl1S25nfn4%3D&chksm=1f6354bc2814ddaa56a90ad5bc3d078601c8d1589ba01827a8170587bc830ff9747b5f59c3a0#rd',
thumbUrl:
'http://mmbiz.qpic.cn/mmbiz_png/btUmCVHwbJUoicwBiacjVeQbu6QxgBVrukfSJXz509boa21SpH8OVHAqXCJiaiaAaHQJNxwwsa0gHRXVr0G5EZYamw/0?wx_fmt=png'
}
]
},
updateTime: 1673628969
},
{
mediaId: 'r6ryvl6LrxBU0miaST4Y-vdWrisK5EZbk4Y3tzh8P0PG0eEUbnQrh0BcsEb3WNP0',
content: {
newsItem: [
{
title: 'tudou',
author: 'haha',
digest: '312',
content: '<p>132312</p>',
contentSourceUrl: 'http://www.iocoder.cn',
thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG',
showCoverPic: 0,
needOpenComment: 0,
onlyFansCanComment: 0,
url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qdkJ1ZjBoUmg2Uk9TS3RlQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNVg2aTJsaC1fMkU2eXNacUplN3VDTTZFZkhtMjhuTUZvWkxsNDBRSXExY2tiVXRHb09TaHgtREhzY3doZ0JYeC1TSTZ5eWZldXJsOWtfbV8yMi1aYkcyZ2pOY0haM0Ntb3VSWEtxUGVFRlNBfn4%3D&chksm=1f6354ba2814ddacf0184b24d310483641ef190b1faac098c285eb416c70017e2f54decfa1af#rd',
thumbUrl:
'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG.png'
}
]
},
updateTime: 1673628760
},
{
mediaId: 'r6ryvl6LrxBU0miaST4Y-u9kTIm1DhWZDdXyxsxUVv2Z5DAB99IPxkIRTUUD206k',
content: {
newsItem: [
{
title: '12',
author: '333',
digest: '123',
content: '123',
contentSourceUrl: 'https://www.iocoder.cn',
thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8',
showCoverPic: 0,
needOpenComment: 0,
onlyFansCanComment: 0,
url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qVVhpSDZUaFJWTzBBWWRVQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNWRnTDJWYmF2NER0clV1bThmQ0xUR3hqQnJkZ3BJSUNmNDJmc0lCZ1dadkVnZ3Z5bkN4YWtVUjhoaWZWYzZURUR4NnpMd0Y4Z3U5aUdib0lkMzI4Rjg3SG9JX2FycTMxbUctOHplaTlQVVhnfn4%3D&chksm=1f6354b62814dda076c778af33f06580165d8aa81f7798d55cfabb1886b5c74d9b2124a3535c#rd',
thumbUrl:
'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8.jpg'
}
]
},
updateTime: 1673626494
},
{
mediaId: 'r6ryvl6LrxBU0miaST4Y-sO24upobaENDmeByfBTfaozB3aOqSMAV0lGy-UkHXE7',
content: {
newsItem: [
{
title: '我是标题',
author: '我是作者',
digest: '我是摘要',
content: '我是内容',
contentSourceUrl: 'https://www.iocoder.cn',
thumbMediaId: 'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
showCoverPic: 0,
needOpenComment: 0,
onlyFansCanComment: 0,
url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9LT2dqRnpMNUpsR0hjYWtBQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNGNmazZTdlE5WkxvU0tfX2V5cjV2WjJiR0xjQUhyREFSZWo2eWNrUW9EYVh6ZkpWRXBLR3FmTEV6YldBMno3Q2ZvVXBSdzlaVDc3aFhndEpQWUwzWmFMUWt0YVVURE1VZ1FsQTdPMlRtc3JBfn4%3D&chksm=1f6354aa2814ddbcc2637382f963a8742993ac38ebcebe6e3411df5ac82ac7bbdb391be6494a#rd',
thumbUrl:
'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png'
}
]
},
updateTime: 1673534279
}
],
total: 6
}
src/views/mp/freePublish/index.vue
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts" name="freePublish"> <script setup lang="ts" name="MpFreePublish">
import * as FreePublishApi from '@/api/mp/freePublish' import * as FreePublishApi from '@/api/mp/freePublish'
import * as MpAccountApi from '@/api/mp/account' import * as MpAccountApi from '@/api/mp/account'
import WxNews from '@/views/mp/components/wx-news/main.vue' import WxNews from '@/views/mp/components/wx-news/main.vue'
......
src/views/mp/menu/menuOptions.ts 0 → 100644
export default [
{
value: 'view',
label: '跳转网页'
},
{
value: 'miniprogram',
label: '跳转小程序'
},
{
value: 'click',
label: '点击回复'
},
{
value: 'article_view_limited',
label: '跳转图文消息'
},
{
value: 'scancode_push',
label: '扫码直接返回结果'
},
{
value: 'scancode_waitmsg',
label: '扫码回复'
},
{
value: 'pic_sysphoto',
label: '系统拍照发图'
},
{
value: 'pic_photo_or_album',
label: '拍照或者相册'
},
{
value: 'pic_weixin',
label: '微信相册'
},
{
value: 'location_select',
label: '选择地理位置'
}
]
src/views/mp/mpuser/index.vue deleted 100644 → 0
<template>
<span>开发中</span>
</template>
src/views/mp/user/UserForm.vue 0 → 100644
<template>
<Dialog title="修改" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="80px"
v-loading="formLoading"
>
<el-form-item label="昵称" prop="nickname">
<el-input v-model="formData.nickname" 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="tagIds">
<el-select v-model="formData.tagIds" multiple clearable placeholder="请选择标签">
<el-option
v-for="item in tagList"
:key="item.tagId"
:label="item.name"
:value="item.tagId"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as MpTagApi from '@/api/mp/tag'
import * as MpUserApi from '@/api/mp/user'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const formData = ref({
id: undefined,
nickname: undefined,
remark: undefined,
tagIds: []
})
const formRules = reactive({}) // 表单的校验
const formRef = ref() // 表单 Ref
const tagList = ref([]) // 公众号标签列表
/** 打开弹窗 */
const open = async (id: number) => {
dialogVisible.value = true
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await MpUserApi.getUser(id)
} finally {
formLoading.value = false
}
}
// 加载标签
tagList.value = await MpTagApi.getSimpleTagList()
}
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 MpUserApi.updateUser(formData.value)
message.success(t('common.updateSuccess'))
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
nickname: undefined,
remark: undefined,
tagIds: []
}
formRef.value?.resetFields()
}
</script>
src/views/mp/user/index.vue 0 → 100644
<template>
<doc-alert title="公众号粉丝" url="https://doc.iocoder.cn/mp/user/" />
<!-- 搜索工作栏 -->
<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="openid">
<el-input
v-model="queryParams.openid"
placeholder="请输入用户标识"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="昵称" prop="nickname">
<el-input
v-model="queryParams.nickname"
placeholder="请输入昵称"
clearable
@keyup.enter="handleQuery"
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="success" plain @click="handleSync" v-hasPermi="['mp:user: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="openid" width="260" />
<el-table-column label="昵称" align="center" prop="nickname" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="标签" align="center" prop="tagIds" width="200">
<template #default="scope">
<span v-for="(tagId, index) in scope.row.tagIds" :key="index">
<el-tag>{{ tagList.find((tag) => tag.tagId === tagId)?.name }} </el-tag>&nbsp;
</span>
</template>
</el-table-column>
<el-table-column label="订阅状态" align="center" prop="subscribeStatus">
<template #default="scope">
<el-tag v-if="scope.row.subscribeStatus === 0" type="success">已订阅</el-tag>
<el-tag v-else type="danger">未订阅</el-tag>
</template>
</el-table-column>
<el-table-column
label="订阅时间"
align="center"
prop="subscribeTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
type="primary"
link
@click="openForm(scope.row.id)"
v-hasPermi="['mp:user:update']"
>
修改
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：修改 -->
<UserForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup name="MpUser">
import { dateFormatter } from '@/utils/formatTime'
import * as MpAccountApi from '@/api/mp/account'
import * as MpUserApi from '@/api/mp/user'
import * as MpTagApi from '@/api/mp/tag'
import UserForm from './UserForm.vue'
const message = useMessage() // 消息
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
accountId: null,
openid: null,
nickname: null
})
const queryFormRef = ref() // 搜索的表单
const accountList = ref([]) // 公众号账号列表
const tagList = ref([]) // 公众号标签列表
/** 查询列表 */
const getList = async () => {
// 如果没有选中公众号账号，则进行提示。
if (!queryParams.accountId) {
message.error('未选中公众号，无法查询用户')
return false
}
try {
loading.value = true
const data = await MpUserApi.getUserPage(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 = (id: number) => {
formRef.value.open(id)
}
/** 同步标签 */
const handleSync = async () => {
const accountId = queryParams.accountId
try {
await message.confirm('是否确认同步粉丝？')
await MpUserApi.syncUser(accountId)
message.success('开始从微信公众号同步粉丝信息，同步需要一段时间，建议稍后再查询')
await getList()
} catch {}
}
/** 初始化 */
onMounted(async () => {
// 加载标签
tagList.value = await MpTagApi.getSimpleTagList()
// 加载账号
accountList.value = await MpAccountApi.getSimpleAccountList()
if (accountList.value.length > 0) {
queryParams.accountId = accountList.value[0].id
}
await getList()
})
</script>
src/views/pay/app/index.vue
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
</template> </template>
</XModal> </XModal>
</template> </template>
<script setup lang="ts" name="App"> <script setup lang="ts" name="PayApp">
import type { FormExpose } from '@/components/Form' import type { FormExpose } from '@/components/Form'
import { rules, allSchemas } from './app.data' import { rules, allSchemas } from './app.data'
import * as AppApi from '@/api/pay/app' import * as AppApi from '@/api/pay/app'
......
src/views/pay/merchant/index.vue
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<MerchantForm ref="formRef" @success="getList" /> <MerchantForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="Merchant"> <script setup lang="ts" name="PayMerchant">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants' import { CommonStatusEnum } from '@/utils/constants'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
......
src/views/pay/order/index.vue
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</template> </template>
</XModal> </XModal>
</template> </template>
<script setup lang="ts" name="Order"> <script setup lang="ts" name="PayOrder">
import { allSchemas } from './order.data' import { allSchemas } from './order.data'
import * as OrderApi from '@/api/pay/order' import * as OrderApi from '@/api/pay/order'
......
src/views/pay/refund/index.vue
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</template> </template>
</XModal> </XModal>
</template> </template>
<script setup lang="ts" name="Refund"> <script setup lang="ts" name="PayRefund">
import { allSchemas } from './refund.data' import { allSchemas } from './refund.data'
import * as RefundApi from '@/api/pay/refund' import * as RefundApi from '@/api/pay/refund'
......
src/views/system/area/index.vue
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<AreaForm ref="formRef" /> <AreaForm ref="formRef" />
</template> </template>
<script setup lang="tsx" name="Area"> <script setup lang="tsx" name="SystemArea">
import type { Column } from 'element-plus' import type { Column } from 'element-plus'
import AreaForm from './AreaForm.vue' import AreaForm from './AreaForm.vue'
import * as AreaApi from '@/api/system/area' import * as AreaApi from '@/api/system/area'
......
src/views/system/dept/index.vue
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<DeptForm ref="formRef" @success="getList" /> <DeptForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="Dept"> <script setup lang="ts" name="SystemDept">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import { handleTree } from '@/utils/tree' import { handleTree } from '@/utils/tree'
......
src/views/system/dict/data/index.vue
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<DictDataForm ref="formRef" @success="getList" /> <DictDataForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="DictData"> <script setup lang="ts" name="SystemDictData">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
......
src/views/system/dict/index.vue
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
<DictTypeForm ref="formRef" @success="getList" /> <DictTypeForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="DictType"> <script setup lang="ts" name="SystemDictType">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict' import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as DictTypeApi from '@/api/system/dict/dict.type' import * as DictTypeApi from '@/api/system/dict/dict.type'
......
src/views/system/errorCode/index.vue
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
<ErrorCodeForm ref="formRef" @success="getList" /> <ErrorCodeForm ref="formRef" @success="getList" />
</template> </template>
<script setup lang="ts" name="ErrorCode"> <script setup lang="ts" name="SystemErrorCode">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
......
src/views/system/loginlog/index.vue
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
<!-- 表单弹窗：详情 --> <!-- 表单弹窗：详情 -->
<LoginLogDetail ref="detailRef" /> <LoginLogDetail ref="detailRef" />
</template> </template>
<script setup lang="ts" name="LoginLog"> <script setup lang="ts" name="SystemLoginLog">
import { DICT_TYPE } from '@/utils/dict' import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download' import download from '@/utils/download'
......
src/views/system/mail/account/MailAccountDetail.vue 0 → 100644
<template>
<Dialog title="详情" v-model="dialogVisible">
<Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
</Dialog>
</template>
<script setup lang="ts">
import * as MailAccountApi from '@/api/system/mail/account'
import { allSchemas } from './account.data'
const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中
const detailData = ref() // 详情数据
/** 打开弹窗 */
const open = async (id: number) => {
dialogVisible.value = true
// 设置数据
detailLoading.value = true
try {
detailData.value = await MailAccountApi.getMailAccount(id)
} finally {
detailLoading.value = false
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
src/views/system/mail/account/account.data.ts
...@@ -61,12 +61,16 @@ const crudSchemas = reactive<CrudSchema[]>([ ...@@ -61,12 +61,16 @@ const crudSchemas = reactive<CrudSchema[]>([
label: '创建时间', label: '创建时间',
field: 'createTime', field: 'createTime',
isForm: false, isForm: false,
formatter: dateFormatter formatter: dateFormatter,
detail: {
dateFormat: 'YYYY-MM-DD HH:mm:ss'
}
}, },
{ {
label: '操作', label: '操作',
field: 'action', field: 'action',
isForm: false isForm: false,
isDetail: false
} }
]) ])
export const { allSchemas } = useCrudSchemas(crudSchemas) export const { allSchemas } = useCrudSchemas(crudSchemas)
src/views/system/mail/account/index.vue
...@@ -41,6 +41,14 @@ ...@@ -41,6 +41,14 @@
</el-button> </el-button>
<el-button <el-button
link link
type="primary"
@click="openDetail(row.id)"
v-hasPermi="['system:mail-account:query']"
>
详情
</el-button>
<el-button
link
type="danger" type="danger"
v-hasPermi="['system:mail-account:delete']" v-hasPermi="['system:mail-account:delete']"
@click="handleDelete(row.id)" @click="handleDelete(row.id)"
...@@ -53,11 +61,14 @@ ...@@ -53,11 +61,14 @@
<!-- 表单弹窗：添加/修改 --> <!-- 表单弹窗：添加/修改 -->
<MailAccountForm ref="formRef" @success="getList" /> <MailAccountForm ref="formRef" @success="getList" />
<!-- 详情弹窗 -->
<MailAccountDetail ref="detailRef" />
</template> </template>
<script setup lang="ts" name="MailAccount"> <script setup lang="ts" name="SystemMailAccount">
import { allSchemas } from './account.data' import { allSchemas } from './account.data'
import * as MailAccountApi from '@/api/system/mail/account' import * as MailAccountApi from '@/api/system/mail/account'
import MailAccountForm from './MailAccountForm.vue' import MailAccountForm from './MailAccountForm.vue'
import MailAccountDetail from './MailAccountDetail.vue'
// tableObject：表格的属性对象，可获得分页大小、条数等属性 // tableObject：表格的属性对象，可获得分页大小、条数等属性
// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作 // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
...@@ -75,6 +86,12 @@ const openForm = (type: string, id?: number) => { ...@@ -75,6 +86,12 @@ const openForm = (type: string, id?: number) => {
formRef.value.open(type, id) formRef.value.open(type, id)
} }
/** 详情操作 */
const detailRef = ref()
const openDetail = (id: number) => {
detailRef.value.open(id)
}
/** 删除按钮操作 */ /** 删除按钮操作 */
const handleDelete = (id: number) => { const handleDelete = (id: number) => {
tableMethods.delList(id, false) tableMethods.delList(id, false)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment