!24 Vue3 重构：基础设施 -> 配置管理功能

Merge pull request !24 from 芋道源码/dev

Author: YunaiV

src/api/infra/config/index.ts

@@ -1,7 +1,7 @@
 import request from '@/config/axios'
 
 export interface ConfigVO {
-  id: number
+  id: number | undefined
   category: string
   name: string
   key: string
@@ -12,13 +12,6 @@ export interface ConfigVO {
   createTime: Date
 }
 
-export interface ConfigPageReqVO extends PageParam {
-  name?: string
-  key?: string
-  type?: number
-  createTime?: Date[]
-}
-
 export interface ConfigExportReqVO {
   name?: string
   key?: string
@@ -27,32 +20,32 @@ export interface ConfigExportReqVO {
 }
 
 // 查询参数列表
-export const getConfigPageApi = (params: ConfigPageReqVO) => {
+export const getConfigPage = (params: PageParam) => {
   return request.get({ url: '/infra/config/page', params })
 }
 
 // 查询参数详情
-export const getConfigApi = (id: number) => {
+export const getConfig = (id: number) => {
   return request.get({ url: '/infra/config/get?id=' + id })
 }
 
 // 根据参数键名查询参数值
-export const getConfigKeyApi = (configKey: string) => {
+export const getConfigKey = (configKey: string) => {
   return request.get({ url: '/infra/config/get-value-by-key?key=' + configKey })
 }
 
 // 新增参数
-export const createConfigApi = (data: ConfigVO) => {
+export const createConfig = (data: ConfigVO) => {
   return request.post({ url: '/infra/config/create', data })
 }
 
 // 修改参数
-export const updateConfigApi = (data: ConfigVO) => {
+export const updateConfig = (data: ConfigVO) => {
   return request.put({ url: '/infra/config/update', data })
 }
 
 // 删除参数
-export const deleteConfigApi = (id: number) => {
+export const deleteConfig = (id: number) => {
   return request.delete({ url: '/infra/config/delete?id=' + id })
 }
 

src/components/Dialog/src/Dialog.vue

@@ -8,8 +8,9 @@ const props = defineProps({
   modelValue: propTypes.bool.def(false),
   title: propTypes.string.def('Dialog'),
   fullscreen: propTypes.bool.def(true),
-  maxHeight: propTypes.oneOfType([String, Number]).def('300px'),
-  width: propTypes.oneOfType([String, Number]).def('40%')
+  width: propTypes.oneOfType([String, Number]).def('40%'),
+  scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
+  maxHeight: propTypes.oneOfType([String, Number]).def('300px')
 })
 
 const getBindValue = computed(() => {
@@ -35,6 +36,7 @@ const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : pr
 watch(
   () => isFullscreen.value,
   async (val: boolean) => {
+    // 计算最大高度
     await nextTick()
     if (val) {
       const windowHeight = document.documentElement.offsetHeight
@@ -80,9 +82,12 @@ const dialogStyle = computed(() => {
       </div>
     </template>
 
-    <ElScrollbar :style="dialogStyle">
+    <!-- 情况一：如果 scroll 为 true，说明开启滚动条 -->
+    <ElScrollbar :style="dialogStyle" v-if="scroll">
       <slot></slot>
     </ElScrollbar>
+    <!-- 情况二：如果 scroll 为 false，说明关闭滚动条滚动条 -->
+    <slot v-else></slot>
 
     <template v-if="slots.footer" #footer>
       <slot name="footer"></slot>

src/components/DictTag/src/DictTag.vue

@@ -34,7 +34,7 @@ export default defineComponent({
         return null
       }
       // 解决自定义字典标签值为零时标签不渲染的问题
-      if (!props.value && props.value !== 0) {
+      if (props.value === undefined) {
         return null
       }
       getDictObj(props.type, props.value.toString())

src/components/Pagination/index.vue

@@ -0,0 +1,75 @@
+<!-- 基于 ruoyi-vue3 的 Pagination 重构，核心是简化无用的属性，并使用 ts 重写 -->
+<template>
+  <el-pagination
+    v-show="total > 0"
+    class="float-right mt-15px mb-15px"
+    :background="true"
+    layout="total, sizes, prev, pager, next, jumper"
+    :page-sizes="[10, 20, 30, 50]"
+    v-model:current-page="currentPage"
+    v-model:page-size="pageSize"
+    :pager-count="pagerCount"
+    :total="total"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  />
+</template>
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  // 总条目数
+  total: {
+    required: true,
+    type: Number
+  },
+  // 当前页数：pageNo
+  page: {
+    type: Number,
+    default: 1
+  },
+  // 每页显示条目个数：pageSize
+  limit: {
+    type: Number,
+    default: 20
+  },
+  // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
+  // 移动端页码按钮的数量端默认值 5
+  pagerCount: {
+    type: Number,
+    default: document.body.clientWidth < 992 ? 5 : 7
+  }
+})
+
+const emit = defineEmits(['update:page', 'update:limit', 'pagination', 'pagination'])
+const currentPage = computed({
+  get() {
+    return props.page
+  },
+  set(val) {
+    // 触发 update:page 事件，更新 limit 属性，从而更新 pageNo
+    emit('update:page', val)
+  }
+})
+const pageSize = computed({
+  get() {
+    return props.limit
+  },
+  set(val) {
+    // 触发 update:limit 事件，更新 limit 属性，从而更新 pageSize
+    emit('update:limit', val)
+  }
+})
+const handleSizeChange = (val) => {
+  // 如果修改后超过最大页面，强制跳转到第 1 页
+  if (currentPage.value * val > props.total) {
+    currentPage.value = 1
+  }
+  // 触发 pagination 事件，重新加载列表
+  emit('pagination', { page: currentPage.value, limit: val })
+}
+const handleCurrentChange = (val) => {
+  // 触发 pagination 事件，重新加载列表
+  emit('pagination', { page: val, limit: pageSize.value })
+}
+</script>

src/config/axios/service.ts

@@ -170,7 +170,6 @@ service.interceptors.response.use(
       return Promise.reject(new Error(msg))
     } else if (code === 901) {
       ElMessage.error({
-        duration: 5,
         offset: 300,
         dangerouslyUseHTMLString: true,
         message:

src/types/auto-components.d.ts

@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
     Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
     Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
+    ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -34,6 +35,7 @@ declare module '@vue/runtime-core' {
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -91,6 +93,7 @@ declare module '@vue/runtime-core' {
     ImageViewer: typeof import('./../components/ImageViewer/src/ImageViewer.vue')['default']
     Infotip: typeof import('./../components/Infotip/src/Infotip.vue')['default']
     InputPassword: typeof import('./../components/InputPassword/src/InputPassword.vue')['default']
+    Pagination: typeof import('./../components/Pagination/index.vue')['default']
     ProcessDesigner: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue')['default']
     ProcessPalette: typeof import('./../components/bpmnProcessDesigner/package/palette/ProcessPalette.vue')['default']
     ProcessViewer: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessViewer.vue')['default']

src/utils/dict.ts

@@ -55,7 +55,7 @@ export const getBoolDictOptions = (dictType: string) => {
   dictOptions.forEach((dict: DictDataType) => {
     dictOption.push({
       ...dict,
-      value: dict.value + '' === 'true' ? true : false
+      value: dict.value + '' === 'true'
     })
   })
   return dictOption

src/utils/formatTime.ts

@@ -1,3 +1,5 @@
+import dayjs from 'dayjs'
+
 /**
  * 时间日期转换
  * @param date 当前时间，new Date() 格式
@@ -174,3 +176,18 @@ export function formatPast2(ms) {
     return 0 + '秒'
   }
 }
+
+/**
+ * element plus 的时间 Formatter 实现，使用 YYYY-MM-DD HH:mm:ss 格式
+ *
+ * @param row 行数据
+ * @param column 字段
+ * @param cellValue 字段值
+ */
+// @ts-ignore
+export const dateFormatter = (row, column, cellValue) => {
+  if (!cellValue) {
+    return
+  }
+  return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
+}