!238 新增 todo done 页面,优化redis页面

* chore: update deps
* feat: add todo done pages
* chore: update deps
* docs: update
* feat: redis dialog
This commit is contained in:
xingyu 2022-07-29 07:57:48 +00:00 committed by 芋道源码
parent 35413b52c9
commit f3e1fc4f9b
12 changed files with 466 additions and 68 deletions

View File

@ -193,7 +193,7 @@ ps核心功能已经实现正在对接微信小程序中...
|----------------------------------------------------------------------|------------------|--------|
| [Vue](https://staging-cn.vuejs.org/) | Vue 框架 | 3.2.37 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 3.0.3 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.9 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.11 |
| [TypeScript](https://www.typescriptlang.org/docs/) | TypeScript | 4.7.4 |
| [pinia](https://pinia.vuejs.org/) | Vue 存储库 替代 vuex5 | 2.0.17 |
| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.1.10 |

View File

@ -1,5 +1,17 @@
<h1>🌈 yudao-ui-admin-vue3</h1>
<p align="center">
<img src="https://img.shields.io/badge/-Vue3.2-34495e?logo=vue.j" />
<img src="https://img.shields.io/badge/-Vite3-646cff?logo=vite&logoColor=white" />
<img src="https://img.shields.io/badge/-TypeScript4.7-blue?logo=typescript&logoColor=white" />
<img src="https://img.shields.io/badge/-Pinia2-yellow?logo=picpay&logoColor=white" />
<img src="https://img.shields.io/badge/-ESLint-4b32c3?logo=eslint&logoColor=white" />
<img src="https://img.shields.io/badge/-pnpm7-F69220?logo=pnpm&logoColor=white" />
<img src="https://img.shields.io/badge/-Axios-008fc7?logo=axios.js&logoColor=white" />
<img src="https://img.shields.io/badge/-Prettier-ef9421?logo=Prettier&logoColor=white" alt="Prettier">
<img src="https://img.shields.io/badge/-Less-1D365D?logo=less&logoColor=white" alt="Less">
<img src="https://img.shields.io/badge/-Wind%20CSS-06B6D4?logo=Tailwind%20CSS&logoColor=white" alt="Taiwind">
<img src="" alt="">
</p>
## 介绍
- 基于 vue3.2+ TypeScript Element Plus 2.2.0+ Vite3 Pinia Windicss 等开发的后台管理系统
@ -13,18 +25,18 @@
### 前端依赖
| 框架 | 说明 | 版本 |
| --- | --- | --- |
| --- | --- |--------|
| [Vue](https://staging-cn.vuejs.org/) | vue 框架 | 3.2.37 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 3.0.2 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.9 |
| [Vite](https://cn.vitejs.dev//) | 开发与构建工具 | 3.0.3 |
| [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.2.11 |
| [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 的超集 | 4.7.4 |
| [pinia](https://pinia.vuejs.org/) | Vue 存储库 替代 vuex5 | 2.0.16 |
| [vueuse](https://vueuse.org//) | 常用工具集 | 8.9.4 |
| [pinia](https://pinia.vuejs.org/) | Vue 存储库 替代 vuex5 | 2.0.17 |
| [vueuse](https://vueuse.org//) | 常用工具集 | 9.0.0 |
| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 9.1.10 |
| [vue-router](https://router.vuejs.org/) | vue 路由 | 4.1.2 |
| [vue-router](https://router.vuejs.org/) | vue 路由 | 4.1.3 |
| [windicss](https://cn.windicss.org/) | 下一代工具优先的 CSS 框架 | 3.5.6 |
| [iconify](https://icon-sets.iconify.design/) | 在线图标库 | 2.2.1 |
| [wangeditor](https://www.wangeditor.com/) | 富文本编辑器 | 5.1.10 |
| [wangeditor](https://www.wangeditor.com/) | 富文本编辑器 | 5.1.14 |
### 推荐 VScode 开发,插件如下

View File

@ -56,12 +56,12 @@
"devDependencies": {
"@commitlint/cli": "^17.0.3",
"@commitlint/config-conventional": "^17.0.3",
"@iconify/json": "^2.1.84",
"@iconify/json": "^2.1.85",
"@intlify/vite-plugin-vue-i18n": "^5.0.1",
"@purge-icons/generated": "^0.8.1",
"@types/intro.js": "^5.1.0",
"@types/lodash-es": "^4.17.6",
"@types/node": "^18.6.1",
"@types/node": "^18.6.2",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.4.2",
"@types/qs": "^6.9.7",
@ -101,8 +101,7 @@
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-windicss": "^1.8.7",
"vue-tsc": "^0.39.2",
"windicss": "^3.5.6",
"windicss-analysis": "^0.3.5"
"windicss": "^3.5.6"
},
"engines": {
"node": ">= 14.18.0"

View File

@ -7,3 +7,33 @@ export type FormVO = {
remark: string
createTime: string
}
export type TaskProcessVO = {
id: string
name: string
startUserId: number
startUserNickname: string
processDefinitionId: string
}
export type TaskTodoVO = {
id: string
name: string
claimTime: string
createTime: string
suspensionState: number
processInstance: TaskProcessVO
}
export type TaskDoneVO = {
id: string
name: string
claimTime: string
createTime: string
endTime: string
durationInMillis: number
suspensionState: number
result: number
reason: string
processInstance: TaskProcessVO
}

View File

@ -24,16 +24,16 @@ export const getKeyListApi = (keyTemplate: string) => {
})
}
// 获取缓存内容
export const getKeyValue = (key: string) => {
export const getKeyValueApi = (key: string) => {
return request.get({ url: '/infra/redis/get-key-value?key=' + key })
}
// 根据键名删除缓存
export const deleteKey = (key: string) => {
export const deleteKeyApi = (key: string) => {
return request.delete({ url: '/infra/redis/delete-key?key=' + key })
}
export const deleteKeys = (keyTemplate: string) => {
export const deleteKeysApi = (keyTemplate: string) => {
return request.delete({
url: '/infra/redis/delete-keys?',
params: {

View File

@ -0,0 +1,94 @@
import { reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { DICT_TYPE } from '@/utils/dict'
const { t } = useI18n() // 国际化
// CrudSchema
const crudSchemas = reactive<CrudSchema[]>([
{
label: t('common.index'),
field: 'id',
type: 'index'
},
{
label: '任务名称',
field: 'name',
search: {
show: true
}
},
{
label: '所属流程',
field: 'processInstance.name'
},
{
label: '流程发起人',
field: 'processInstance.startUserNickname'
},
{
label: '结果',
field: 'result',
dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT
},
{
label: '审批意见',
field: 'reason'
},
{
label: t('common.createTime'),
field: 'createTime',
search: {
show: true,
component: 'DatePicker',
componentProps: {
type: 'datetimerange',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)],
shortcuts: [
{
text: '近一周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
}
},
{
text: '近一个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
}
},
{
text: '近三个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
}
}
]
}
}
},
{
label: '审批时间',
field: 'endTime'
},
{
label: '耗时',
field: 'durationInMillis'
},
{
label: t('table.action'),
field: 'action',
width: '100px'
}
])
export const { allSchemas } = useCrudSchemas(crudSchemas)

View File

@ -1,7 +1,67 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import { DICT_TYPE } from '@/utils/dict'
import { useTable } from '@/hooks/web/useTable'
import { useI18n } from '@/hooks/web/useI18n'
import type { TaskDoneVO } from '@/api/bpm/task/types'
import { allSchemas } from './done.data'
import * as TaskDoneApi from '@/api/bpm/task'
import { useRouter } from 'vue-router'
dayjs.extend(duration)
const { t } = useI18n() //
const { push } = useRouter()
// ========== ==========
const { register, tableObject, methods } = useTable<TaskDoneVO>({
getListApi: TaskDoneApi.getDoneTaskPage
})
const { getList, setSearchParams } = methods
//
const handleAudit = async (row: TaskDoneVO) => {
push('/bpm/process-instance/detail?id=' + row.processInstance.id)
}
// ========== ==========
getList()
</script>
<template>
<div>index</div>
<!-- 搜索工作区 -->
<ContentWrap>
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
</ContentWrap>
<ContentWrap>
<!-- 列表 -->
<Table
:columns="allSchemas.tableColumns"
:selection="false"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{
total: tableObject.total
}"
v-model:pageSize="tableObject.pageSize"
v-model:currentPage="tableObject.currentPage"
@register="register"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #createTime="{ row }">
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
<template #endTime="{ row }">
<span>{{ dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
<template #durationInMillis="{ row }">
<span>{{ dayjs.duration(row.durationInMillis).asMilliseconds() }}</span>
</template>
<template #action="{ row }">
<el-button link type="primary" v-hasPermi="['bpm:task:query']" @click="handleAudit(row)">
<Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
</el-button>
</template>
</Table>
</ContentWrap>
</template>
<style scoped></style>

View File

@ -0,0 +1,76 @@
import { reactive } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
const { t } = useI18n() // 国际化
// CrudSchema
const crudSchemas = reactive<CrudSchema[]>([
{
label: t('common.index'),
field: 'id',
type: 'index'
},
{
label: '任务名称',
field: 'name',
search: {
show: true
}
},
{
label: '所属流程',
field: 'processInstance.name'
},
{
label: '流程发起人',
field: 'processInstance.startUserNickname'
},
{
label: t('common.createTime'),
field: 'createTime',
search: {
show: true,
component: 'DatePicker',
componentProps: {
type: 'datetimerange',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
defaultTime: [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)],
shortcuts: [
{
text: '近一周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
}
},
{
text: '近一个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
}
},
{
text: '近三个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
}
}
]
}
}
},
{
label: t('table.action'),
field: 'action',
width: '100px'
}
])
export const { allSchemas } = useCrudSchemas(crudSchemas)

View File

@ -1,7 +1,57 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import dayjs from 'dayjs'
import { DICT_TYPE } from '@/utils/dict'
import { useTable } from '@/hooks/web/useTable'
import type { TaskTodoVO } from '@/api/bpm/task/types'
import { allSchemas } from './done.data'
import * as TaskTodoApi from '@/api/bpm/task'
import { useRouter } from 'vue-router'
const { push } = useRouter()
// ========== ==========
const { register, tableObject, methods } = useTable<TaskTodoVO>({
getListApi: TaskTodoApi.getTodoTaskPage
})
const { getList, setSearchParams } = methods
//
const handleAudit = async (row: TaskTodoVO) => {
push('/bpm/process-instance/detail?id=' + row.processInstance.id)
}
// ========== ==========
getList()
</script>
<template>
<div>index</div>
<!-- 搜索工作区 -->
<ContentWrap>
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
</ContentWrap>
<ContentWrap>
<!-- 列表 -->
<Table
:columns="allSchemas.tableColumns"
:selection="false"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{
total: tableObject.total
}"
v-model:pageSize="tableObject.pageSize"
v-model:currentPage="tableObject.currentPage"
@register="register"
>
<template #status="{ row }">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
</template>
<template #createTime="{ row }">
<span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</template>
<template #action="{ row }">
<el-button link type="primary" v-hasPermi="['bpm:task:update']" @click="handleAudit(row)">
<Icon icon="ep:edit" class="mr-1px" /> 审批
</el-button>
</template>
</Table>
</ContentWrap>
</template>
<style scoped></style>

View File

@ -13,7 +13,8 @@ import {
ElTableColumn,
ElScrollbar,
ElDescriptions,
ElDescriptionsItem
ElDescriptionsItem,
ElMessage
} from 'element-plus'
const cache = ref<RedisMonitorInfoVO>()
const keyListLoad = ref(true)
@ -121,7 +122,33 @@ 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.getKeyListApi(row.keyTemplate)
dialogVisible.value = true
}
const handleDeleteKey = async (row) => {
RedisApi.deleteKeyApi(row)
ElMessage.success('删除成功')
}
const handleDeleteKeys = async (row) => {
RedisApi.deleteKeysApi(row)
ElMessage.success('删除成功')
}
const handleKeyValue = async (row) => {
const res = await RedisApi.getKeyValueApi(row)
cacheForm.value = res
}
onBeforeMount(() => {
readRedisInfo()
})
@ -186,7 +213,12 @@ onBeforeMount(() => {
<el-row style="margin-top: 10px">
<el-col :span="24" class="card-box" shadow="hover">
<el-card>
<el-table v-loading="keyListLoad" :data="keyList" row-key="id">
<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 类型" />
@ -202,4 +234,58 @@ onBeforeMount(() => {
</el-col>
</el-row>
</el-scrollbar>
<Dialog v-model="dialogVisible" :title="keyTemplate + ' 模板'" width="60%" maxHeight="800px">
<el-row>
<el-col :span="14" style="margin-top: 10px">
<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 }">
<el-button link type="primary" @click="handleDeleteKey(row)">
<Icon icon="ep:delete" />
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
<el-col :span="10" style="margin-top: 10px">
<el-card shadow="always">
<template #header>
<div class="card-header">
<span>缓存内容</span>
<el-button
link
type="primary"
@click="handleDeleteKeys(keyTemplate)"
style="float: right; padding: 3px 0"
>
<Icon icon="ep:refresh" />清理全部
</el-button>
</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>
</Dialog>
</template>
<style scoped>
.redis {
height: 600px;
max-height: 860px;
}
</style>

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, ref, unref } from 'vue'
import { onMounted, reactive, ref, unref } from 'vue'
import dayjs from 'dayjs'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { useTable } from '@/hooks/web/useTable'
@ -18,7 +18,7 @@ import {
ElMessage,
ElTree,
ElCard,
ElCheckbox
ElSwitch
} from 'element-plus'
import { listSimpleMenusApi } from '@/api/system/menu'
import { listSimpleDeptApi } from '@/api/system/dept'
@ -98,7 +98,6 @@ const dataScopeForm = reactive({
name: '',
code: '',
dataScope: 0,
checkStrictly: true,
checkList: []
})
const defaultProps = {
@ -113,15 +112,18 @@ const dialogScopeTitle = ref('数据权限')
const actionScopeType = ref('')
const dataScopeDictDatas = ref()
//
const checkStrictly = ref(true)
const treeNodeAll = ref(false)
//
const handleScope = async (type: string, row: RoleVO) => {
checkStrictly.value = true
treeNodeAll.value = false
dataScopeForm.dataScope = 0
dataScopeForm.name = row.name
dataScopeForm.code = row.code
if (type === 'menu') {
const menuRes = await listSimpleMenusApi()
treeOptions.value = handleTree(menuRes)
dataScopeDictDatas.value = getDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE)
} else if (type === 'dept') {
const deptRes = await listSimpleDeptApi()
treeOptions.value = handleTree(deptRes)
@ -129,20 +131,22 @@ const handleScope = async (type: string, row: RoleVO) => {
actionScopeType.value = type
dialogScopeVisible.value = true
}
//
const handleCheckedTreeConnect = (value) => {
dataScopeForm.checkStrictly = value ? true : false
}
// /
const handleCheckedTreeNodeAll = (value) => {
treeRef.value?.setCheckedNodes(value ? dataScopeForm.checkList : [])
const handleCheckedTreeNodeAll = () => {
treeRef.value?.setCheckedNodes(treeNodeAll.value ? treeOptions.value : [])
}
// TODO:
const submitScope = () => {
console.info()
}
const init = () => {
dataScopeDictDatas.value = getDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE)
}
// ========== ==========
onMounted(() => {
getList()
init()
})
</script>
<template>
@ -261,7 +265,7 @@ getList()
<el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
</template>
</Dialog>
<Dialog v-model="dialogScopeVisible" :title="dialogScopeTitle">
<Dialog v-model="dialogScopeVisible" :title="dialogScopeTitle" max-height="600px">
<el-form :model="dataScopeForm">
<el-form-item label="角色名称">
<el-input v-model="dataScopeForm.name" :disabled="true" />
@ -289,21 +293,23 @@ getList()
>
<el-card class="box-card">
<template #header>
<el-checkbox
:checked="!dataScopeForm.checkStrictly"
@change="handleCheckedTreeConnect($event)"
>父子联动(选中父节点自动选择子节点)
</el-checkbox>
<el-checkbox v-model="treeNodeAll" @change="handleCheckedTreeNodeAll($event)">
全选/全不选
</el-checkbox>
父子联动(选中父节点自动选择子节点):
<el-switch v-model="checkStrictly" inline-prompt active-text="" inactive-text="" />
全选/全不选:
<el-switch
v-model="treeNodeAll"
inline-prompt
active-text="是"
inactive-text="否"
@change="handleCheckedTreeNodeAll()"
/>
</template>
<el-tree
ref="treeRef"
node-key="id"
show-checkbox
default-expand-all
:check-strictly="dataScopeForm.checkStrictly"
:check-strictly="!checkStrictly"
:props="defaultProps"
:data="treeOptions"
empty-text="加载中,请稍后"

View File

@ -1,4 +1,4 @@
import { defineConfig } from 'windicss/helpers'
import { defineConfig } from 'vite-plugin-windicss'
import plugin from 'windicss/plugin'
function range(size, startAt = 1) {
@ -18,22 +18,7 @@ export default defineConfig({
// 暗黑背景色
'v-dark': 'var(--dark-bg-color)'
}
// screens: {
// sm: '768px',
// md: '992px',
// lg: '1200px',
// xl: '1920px'
// }
}
// height: {
// ...range(50).map((i) => `h-${i}px`)
// },
// margin: {
// // ...range(50).map((i) => `mt-${i}px`),
// // ...range(50).map((i) => `mr-${i}px`),
// // ...range(50).map((i) => `mb-${i}px`),
// // ...range(50).map((i) => `ml-${i}px`)
// }
},
plugins: [
plugin(({ addComponents }) => {