!228 新增日期选择组件近一周近一个月示例

Merge pull request !228 from xingyu/master

!228 新增日期选择组件近一周近一个月示例
Merge pull request !228 from xingyu/master
芋道源码 · Gitee
2 parents 7641998c 383e5db9
Showing 13 changed files with 121 additions and 29 deletions
yudao-dependencies/pom.xml
yudao-ui-admin-vue3/package.json
yudao-ui-admin-vue3/src/api/system/dept/index.ts
yudao-ui-admin-vue3/src/api/system/dept/types.ts
yudao-ui-admin-vue3/src/api/system/dict/dict.data.ts
yudao-ui-admin-vue3/src/api/system/dict/dict.type.ts
yudao-ui-admin-vue3/src/api/system/dict/types.ts
yudao-ui-admin-vue3/src/api/system/post/index.ts
yudao-ui-admin-vue3/src/api/system/post/types.ts
yudao-ui-admin-vue3/src/hooks/web/useTable.ts
yudao-ui-admin-vue3/src/views/system/dict/dict.type.ts
yudao-ui-admin-vue3/src/views/system/post/index.vue
yudao-ui-admin-vue3/src/views/system/user/user.data.ts
@@ -16,20 +16,19 @@
     <properties>
         <revision>1.6.2-snapshot</revision>
         <!-- 统一依赖管理 -->
-        <spring.boot.version>2.6.9</spring.boot.version>
+        <spring.boot.version>2.6.10</spring.boot.version>
         <!-- Web 相关 -->
         <knife4j.version>3.0.3</knife4j.version>
         <swagger-annotations.version>1.6.6</swagger-annotations.version>
         <servlet.versoin>2.5</servlet.versoin>
         <!-- DB 相关 -->
-        <druid.version>1.2.8</druid.version>
+        <druid.version>1.2.11</druid.version>
         <mybatis-plus.version>3.5.2</mybatis-plus.version>
         <mybatis-plus-generator.version>3.5.2</mybatis-plus-generator.version>
         <dynamic-datasource.version>3.5.0</dynamic-datasource.version>
         <redisson.version>3.17.4</redisson.version>
         <!-- Config 配置中心相关 -->
         <apollo.version>1.9.2</apollo.version>
-        <!-- Job 定时任务相关 -->
         <!-- 服务保障相关 -->
         <lock4j.version>2.2.0</lock4j.version>
         <resilience4j.version>1.7.1</resilience4j.version>
@@ -65,8 +65,8 @@
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.2",
     "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^5.30.7",
-    "@typescript-eslint/parser": "^5.30.7",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
     "@vitejs/plugin-vue": "^3.0.1",
     "@vitejs/plugin-vue-jsx": "^2.0.0",
     "autoprefixer": "^10.4.7",
 import { useAxios } from '@/hooks/web/useAxios'
-import type { DeptVO } from './types'
+import type { DeptVO, DeptListReqVO } from './types'
 const request = useAxios()
@@ -9,7 +9,7 @@ export const listSimpleDeptApi = () =&gt; {
 }
 // 查询部门列表
-export const getDeptPageApi = (params) => {
+export const getDeptPageApi = (params: DeptListReqVO) => {
   return request.get({ url: '/system/dept/list', params })
 }
@@ -5,3 +5,8 @@ export type DeptVO = {
   parentId: number
   createTime: string
 }
+
+export type DeptListReqVO = {
+  name: string
+  status: number
+}
 import { useAxios } from '@/hooks/web/useAxios'
-import type { DictDataVO } from './types'
+import type { DictDataVO, DictDataPageReqVO, DictDataExportReqVO } from './types'
 const request = useAxios()
@@ -9,7 +9,7 @@ export const listSimpleDictDataApi = () =&gt; {
 }
 // 查询字典数据列表
-export const getDictDataPageApi = (params) => {
+export const getDictDataPageApi = (params: DictDataPageReqVO) => {
   return request.get({ url: '/system/dict-data/page', params })
 }
@@ -33,6 +33,6 @@ export const deleteDictDataApi = (id: number) =&gt; {
   return request.delete({ url: '/system/dict-data/delete?id=' + id })
 }
 // 导出字典类型数据
-export const exportDictDataApi = (params: DictDataVO) => {
+export const exportDictDataApi = (params: DictDataExportReqVO) => {
   return request.get({ url: '/system/dict-data/export', params })
 }
 import { useAxios } from '@/hooks/web/useAxios'
-import type { DictTypeVO } from './types'
+import type { DictTypeVO, DictTypePageReqVO, DictTypeExportReqVO } from './types'
 const request = useAxios()
@@ -9,7 +9,7 @@ export const listSimpleDictTypeApi = () =&gt; {
 }
 // 查询字典列表
-export const getDictTypePageApi = (params) => {
+export const getDictTypePageApi = (params: DictTypePageReqVO) => {
   return request.get({ url: '/system/dict-type/page', params })
 }
@@ -33,6 +33,6 @@ export const deleteDictTypeApi = (id: number) =&gt; {
   return request.delete({ url: '/system/dict-type/delete?id=' + id })
 }
 // 导出字典类型
-export const exportDictTypeApi = (params: DictTypeVO) => {
+export const exportDictTypeApi = (params: DictTypeExportReqVO) => {
   return request.get({ url: '/system/dict-type/export', params })
 }
@@ -7,6 +7,20 @@ export type DictTypeVO = {
   createTime: string
 }
+export type DictTypePageReqVO = {
+  name: string
+  type: string
+  status: number
+  createTime: []
+}
+
+export type DictTypeExportReqVO = {
+  name: string
+  type: string
+  status: number
+  createTime: []
+}
+
 export type DictDataVO = {
   id: number
   sort: number
@@ -19,3 +33,14 @@ export type DictDataVO = {
   remark: string
   createTime: string
 }
+export type DictDataPageReqVO = {
+  label: string
+  dictType: string
+  status: number
+}
+
+export type DictDataExportReqVO = {
+  label: string
+  dictType: string
+  status: number
+}
 import { useAxios } from '@/hooks/web/useAxios'
-import type { PostVO } from './types'
+import type { PostVO, PostPageReqVO, PostExportReqVO } from './types'
 const request = useAxios()
 // 查询岗位列表
-export const getPostPageApi = async (params) => {
+export const getPostPageApi = async (params: PostPageReqVO) => {
   return await request.get({ url: '/system/post/page', params })
 }
@@ -33,6 +33,6 @@ export const deletePostApi = async (id: number) =&gt; {
 }
 // 导出岗位
-export const exportPostApi = async (params) => {
+export const exportPostApi = async (params: PostExportReqVO) => {
   return await request.download({ url: '/system/post/export', params })
 }
@@ -7,3 +7,15 @@ export type PostVO = {
   remark: string
   createTime: string
 }
+
+export type PostPageReqVO = {
+  code: string
+  name: string
+  status: number
+}
+
+export type PostExportReqVO = {
+  code: string
+  name: string
+  status: number
+}
 import download from '@/utils/download'
 import { Table, TableExpose } from '@/components/Table'
-import { ElTable, ElMessageBox, ElMessage } from 'element-plus'
-import { ref, reactive, watch, computed, unref, nextTick } from 'vue'
+import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
+import { computed, nextTick, reactive, ref, unref, watch } from 'vue'
 import type { TableProps } from '@/components/Table/src/types'
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
 interface ResponseType<T = any> {
   list: T[]
-  total?: string
+  total?: number
 }
 interface UseTableConfig<T = any> {
@@ -114,15 +114,13 @@ export const useTable = &lt;T = any&gt;(config?: UseTableConfig&lt;T&gt;) =&gt; {
     ElMessage.success(t('common.delSuccess'))
     // 计算出临界点
-    const currentPage =
+    tableObject.currentPage =
       tableObject.total % tableObject.pageSize === idsLength || tableObject.pageSize === 1
         ? tableObject.currentPage > 1
           ? tableObject.currentPage - 1
           : tableObject.currentPage
         : tableObject.currentPage
-
-    tableObject.currentPage = currentPage
-    methods.getList()
+    await methods.getList()
   }
   const methods = {
@@ -132,8 +130,10 @@ export const useTable = &lt;T = any&gt;(config?: UseTableConfig&lt;T&gt;) =&gt; {
         tableObject.loading = false
       })
       if (res) {
-        tableObject.tableList = res?.list
-        tableObject.total = res?.total
+        tableObject.tableList = (res as unknown as ResponseType).list
+        if ((res as unknown as ResponseType).total) {
+          tableObject.total = (res as unknown as ResponseType).total as unknown as number
+        }
       }
     },
     setProps: async (props: TableProps = {}) => {
@@ -194,7 +194,7 @@ export const useTable = &lt;T = any&gt;(config?: UseTableConfig&lt;T&gt;) =&gt; {
         .then(async () => {
           const res = await config?.exportListApi?.(unref(paramsObj) as unknown as T)
           if (res) {
-            download.excel(res, fileName)
+            download.excel(res as unknown as Blob, fileName)
           }
         })
         .finally(() => {
@@ -43,6 +43,28 @@ const crudSchemas = reactive&lt;CrudSchema[]&gt;([
     dictType: DICT_TYPE.COMMON_STATUS
   },
   {
+    label: t('common.createTime'),
+    field: 'createTime',
+    table: {
+      show: false
+    },
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    },
+    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)]
+      }
+    }
+  },
+  {
     label: t('form.remark'),
     field: 'remark',
     table: {
@@ -21,7 +21,7 @@ const { getList, setSearchParams, delList, exportList } = methods
 // 导出操作
 const handleExport = async () => {
-  await exportList('用户数据.xls')
+  await exportList('岗位数据.xls')
 }
 // ========== CRUD 相关 ==========
@@ -115,9 +115,38 @@ const crudSchemas = reactive&lt;CrudSchema[]&gt;([
       show: true,
       component: 'DatePicker',
       componentProps: {
-        type: 'daterange',
+        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)]
+        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]
+            }
+          }
+        ]
       }
     }
   },