From e20159debce951e5d79a5b657e16517d68ad628c Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Sun, 16 Dec 2018 12:25:41 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=97=A5=E6=9C=9F=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E7=9A=84=20filter=20=E5=92=8C=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E4=B8=80=E4=BA=9B=E8=8F=9C=E5=8D=95=E7=9A=84=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: bacfe4e86ce0599752cc74916bb9547add6b0725 [formerly bacfe4e86ce0599752cc74916bb9547add6b0725 [formerly bacfe4e86ce0599752cc74916bb9547add6b0725 [formerly bacfe4e86ce0599752cc74916bb9547add6b0725 [formerly f5ed703f2aefb46bd7a6dd7dbb6d141cd43dec08 [formerly b679a8fecf5a7d908d20d57b1098d9c4708574c3]]]]] Former-commit-id: 36c9337dc53258282bc83ed7b52a88c617a75a66 Former-commit-id: b418eed9356e5de890b70a8ccaa93ee1abbd30bf Former-commit-id: e06310cdc83cd1c614e523f33558d2cb303ca81f [formerly 20341d1ed3372bfe16f777a177710894ca29f378] Former-commit-id: 1795ddf1c595363c49c3d6530e2a552aa7906edd Former-commit-id: 38c0384164faa36103bc9ee5d881cdacf367bbb4 Former-commit-id: 0a13e600fb5a8add5a282304dc2f26d35e711572 Former-commit-id: 5845a0b7620bd23f145b02cbe0427eb351792e6a Former-commit-id: a8aeed67fd895c549600e636cf16094197c1891a --- src/filters/module.date.js | 98 +++++++++++++++++++ src/menu/index.js | 4 + src/menu/modules/demo-business.js | 2 +- src/menu/modules/demo-charts.js | 2 +- src/menu/modules/demo-components.js | 2 +- src/menu/modules/demo-d2-crud.js | 2 +- src/menu/modules/demo-element.js | 2 +- src/menu/modules/demo-filters.js | 9 ++ src/menu/modules/demo-frame.js | 2 +- src/menu/modules/demo-playground.js | 2 +- src/menu/modules/demo-plugins.js | 2 +- .../day/components/code-and-result.vue | 77 +++++++++++++++ .../filters/day/components/code-title.vue | 41 ++++++++ src/pages/demo/filters/day/index.vue | 95 ++++++++++++++++++ src/pages/demo/filters/index/index.vue | 22 +++++ src/plugin/d2admin/index.js | 4 + src/router/modules/filters.js | 25 +++++ src/router/routes.js | 2 + 18 files changed, 385 insertions(+), 8 deletions(-) create mode 100644 src/filters/module.date.js create mode 100644 src/menu/modules/demo-filters.js create mode 100644 src/pages/demo/filters/day/components/code-and-result.vue create mode 100644 src/pages/demo/filters/day/components/code-title.vue create mode 100644 src/pages/demo/filters/day/index.vue create mode 100644 src/pages/demo/filters/index/index.vue create mode 100644 src/router/modules/filters.js diff --git a/src/filters/module.date.js b/src/filters/module.date.js new file mode 100644 index 00000000..86096dcc --- /dev/null +++ b/src/filters/module.date.js @@ -0,0 +1,98 @@ +// 日期时间相关 filter +// https://github.com/iamkun/dayjs/blob/master/docs/zh-cn/API-reference.md + +import dayjs from 'dayjs' + +// 对象代理 +const P = Day => { + return new Proxy(Day, { + get (target, key) { + if (dayjs.isDayjs(target)) { + // 是 Dayjs 对象，正常返回 + return target[key] + } else { + // 不是 Dayjs 对象 + if (dayjs(target).isValid()) { + // 尝试帮用户解析成 Dayjs 对象 + return dayjs(target)[key] + } else { + // 无法解析 + return function () { + return '无效日期' + } + } + } + }, + set (target, key, value) { + target[key] = value + } + }) +} + +const filters = { + // ---------- [ dayjs 解析 ] ---------- + // 时间字符串 | Date 对象 | Unix 时间戳 (毫秒) + day: value => dayjs(value), + // Unix 时间戳 (秒) + day_unix: value => dayjs.unix(value), + // ---------- [ 获取 ] ---------- + day_year: Day => P(Day).year(), + day_month: Day => P(Day).month(), + day_date: Day => P(Day).date(), + day_day: Day => P(Day).day(), + day_hour: Day => P(Day).hour(), + day_minute: Day => P(Day).minute(), + day_second: Day => P(Day).second(), + day_millisecond: Day => P(Day).millisecond(), + // ---------- [ 设置 ] ---------- + // date | day | month | year | hour | minute | second | millisecond + // 对大小写不敏感 + day_set: (Day, unit, value) => P(Day).set(unit, value), + // ---------- [ 操作 ] ---------- + // 增加 + day_add: (Day, value, unit) => P(Day).add(value, unit), + // 减少 + day_subtract: (Day, value, unit) => P(Day).subtract(value, unit), + // 开头时间 + day_startof: (Day, unit) => P(Day).startOf(unit), + // 末尾时间 + day_endof: (Day, unit) => P(Day).endOf(unit), + // ---------- [ 显示 ] ---------- + // 格式化 + day_format: (Day, setting = 'YYYY-MM-DD HH:mm:ss') => P(Day).format(setting), + // 时间差 + day_diff: (Day, Day2 = '', unit = 'millisecond', accurate = false) => P(Day).diff(dayjs(Day2), unit, accurate), + // Unix 时间戳 (毫秒) + day_value_millisecond: Day => P(Day).valueOf(), + // Unix 时间戳 (秒) + day_value_second: Day => P(Day).unix(), + // 月份的天数 + day_days_in_month: Day => P(Day).daysInMonth(), + // Date 对象 + day_to_date: Day => P(Day).toDate(), + // 数组 + day_to_array: Day => P(Day).toArray(), + // JSON + day_to_json: Day => P(Day).toJSON(), + // ISO8601 格式 + day_to_iso: Day => P(Day).toISOString(), + // 对象 + day_to_object: Day => P(Day).toObject(), + // 字符 + day_to_string: Day => P(Day).toString(), + // ---------- [ 查询 ] ---------- + // 是否之前 + day_is_before: (Day, Day2, unit = 'millisecond') => P(Day).isBefore(dayjs(Day2), unit), + // 是否之后 + day_is_after: (Day, Day2, unit = 'millisecond') => P(Day).isAfter(dayjs(Day2), unit), + // 是否相同 + day_is_same: (Day, Day2, unit = 'millisecond') => P(Day).isSame(dayjs(Day2), unit) +} + +export default { + install: function (Vue) { + Object.keys(filters).forEach(name => { + Vue.filter(name, filters[name]) + }) + } +} diff --git a/src/menu/index.js b/src/menu/index.js index 3c3a7684..45df2abc 100644 --- a/src/menu/index.js +++ b/src/menu/index.js @@ -6,6 +6,8 @@ import demoComponents from './modules/demo-components' import demoCharts from './modules/demo-charts' // 组件库 import demoElement from './modules/demo-element' +// 组件库 +import demoFilters from './modules/demo-filters' // 试验台 import demoPlayground from './modules/demo-playground' // 示例 @@ -21,6 +23,7 @@ export const menuAside = [ demoPlugins, demoCharts, demoElement, + demoFilters, demoPlayground, demoBusiness, demoD2Crud, @@ -40,6 +43,7 @@ export const menuHeader = [ children: [ demoD2Crud, demoComponents, + demoFilters, demoElement, demoCharts, demoPlugins, diff --git a/src/menu/modules/demo-business.js b/src/menu/modules/demo-business.js index 71b01f37..736696f9 100644 --- a/src/menu/modules/demo-business.js +++ b/src/menu/modules/demo-business.js @@ -3,7 +3,7 @@ export default { title: '示例', icon: 'flask', children: (pre => [ - { path: `${pre}index`, title: '示例首页', icon: 'home' }, + { path: `${pre}index`, title: '示例', icon: 'home' }, { title: '表格', icon: 'table', diff --git a/src/menu/modules/demo-charts.js b/src/menu/modules/demo-charts.js index 3daa018e..bfd808cd 100644 --- a/src/menu/modules/demo-charts.js +++ b/src/menu/modules/demo-charts.js @@ -3,7 +3,7 @@ export default { title: '图表', icon: 'line-chart', children: (pre => [ - { path: `${pre}index`, title: '图表首页', icon: 'home' }, + { path: `${pre}index`, title: '图表', icon: 'home' }, { path: `${pre}list`, title: '图表', diff --git a/src/menu/modules/demo-components.js b/src/menu/modules/demo-components.js index f4ebd4a7..c2780b5c 100644 --- a/src/menu/modules/demo-components.js +++ b/src/menu/modules/demo-components.js @@ -3,7 +3,7 @@ export default { title: '内置组件', icon: 'puzzle-piece', children: (pre => [ - { path: `${pre}index`, title: '扩展组件首页', icon: 'home' }, + { path: `${pre}index`, title: '扩展组件', icon: 'home' }, { path: `${pre}container`, title: '布局容器', diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js index 1d86836a..3300bb08 100644 --- a/src/menu/modules/demo-d2-crud.js +++ b/src/menu/modules/demo-d2-crud.js @@ -3,7 +3,7 @@ export default { title: 'D2 CRUD', iconSvg: 'd2-crud', children: (pre => [ - { path: `${pre}index`, title: 'D2 CRUD 首页', icon: 'home' }, + { path: `${pre}index`, title: 'D2 CRUD ', icon: 'home' }, { title: '基础功能', children: [ diff --git a/src/menu/modules/demo-element.js b/src/menu/modules/demo-element.js index d38c5d35..b2d396b2 100644 --- a/src/menu/modules/demo-element.js +++ b/src/menu/modules/demo-element.js @@ -3,7 +3,7 @@ export default { title: '基础组件库', icon: 'cubes', children: (pre => [ - { path: `${pre}index`, title: '基础组件库首页', icon: 'home' }, + { path: `${pre}index`, title: '基础组件库', icon: 'home' }, { path: `${pre}basic`, title: '基础', diff --git a/src/menu/modules/demo-filters.js b/src/menu/modules/demo-filters.js new file mode 100644 index 00000000..1430469c --- /dev/null +++ b/src/menu/modules/demo-filters.js @@ -0,0 +1,9 @@ +export default { + path: '/demo/filters', + title: '内置过滤器', + icon: 'flask', + children: (pre => [ + { path: `${pre}index`, title: '内置过滤器', icon: 'home' }, + { path: `${pre}day`, title: '日期和时间', icon: 'calendar' } + ])('/demo/filters/') +} diff --git a/src/menu/modules/demo-frame.js b/src/menu/modules/demo-frame.js index 63e81a5a..11cc44d2 100644 --- a/src/menu/modules/demo-frame.js +++ b/src/menu/modules/demo-frame.js @@ -3,7 +3,7 @@ export default { title: '内嵌网页', icon: 'globe', children: (pre => [ - { path: `${pre}index`, title: 'Frame 首页', icon: 'home' }, + { path: `${pre}index`, title: 'Frame ', icon: 'home' }, { path: `${pre}d2-doc`, title: 'D2Admin 中文文档', iconSvg: 'd2-admin' }, { path: `${pre}html`, title: '静态 HTML', icon: 'code' } ])('/demo/frame/') diff --git a/src/menu/modules/demo-playground.js b/src/menu/modules/demo-playground.js index eb84d2d9..1c884574 100644 --- a/src/menu/modules/demo-playground.js +++ b/src/menu/modules/demo-playground.js @@ -3,7 +3,7 @@ export default { title: '试验台', icon: 'flask', children: (pre => [ - { path: `${pre}index`, title: '试验台首页', icon: 'home' }, + { path: `${pre}index`, title: '试验台', icon: 'home' }, { title: 'svg 菜单图标', iconSvg: 'd2-admin', diff --git a/src/menu/modules/demo-plugins.js b/src/menu/modules/demo-plugins.js index 22105b1f..d674975a 100644 --- a/src/menu/modules/demo-plugins.js +++ b/src/menu/modules/demo-plugins.js @@ -3,7 +3,7 @@ export default { title: '插件', icon: 'plug', children: (pre => [ - { path: `${pre}index`, title: '插件首页', icon: 'home' }, + { path: `${pre}index`, title: '插件', icon: 'home' }, { path: `${pre}mock`, title: '模拟数据', diff --git a/src/pages/demo/filters/day/components/code-and-result.vue b/src/pages/demo/filters/day/components/code-and-result.vue new file mode 100644 index 00000000..67463d06 --- /dev/null +++ b/src/pages/demo/filters/day/components/code-and-result.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/src/pages/demo/filters/day/components/code-title.vue b/src/pages/demo/filters/day/components/code-title.vue new file mode 100644 index 00000000..48eeec21 --- /dev/null +++ b/src/pages/demo/filters/day/components/code-title.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/pages/demo/filters/day/index.vue b/src/pages/demo/filters/day/index.vue new file mode 100644 index 00000000..a58ab53f --- /dev/null +++ b/src/pages/demo/filters/day/index.vue @@ -0,0 +1,95 @@ + + + diff --git a/src/pages/demo/filters/index/index.vue b/src/pages/demo/filters/index/index.vue new file mode 100644 index 00000000..659102ec --- /dev/null +++ b/src/pages/demo/filters/index/index.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/plugin/d2admin/index.js b/src/plugin/d2admin/index.js index d7a9e5c2..3e9724c7 100644 --- a/src/plugin/d2admin/index.js +++ b/src/plugin/d2admin/index.js @@ -7,6 +7,8 @@ import 'flex.css' import '@/components' // svg 图标 import '@/assets/svg-icons' +// 过滤器 +import d2VueFiltersDateModule from '@/filters/module.date' // 功能插件 import pluginError from '@/plugin/error' import pluginExport from '@/plugin/export' @@ -29,6 +31,8 @@ export default { Vue.prototype.$buildTime = process.env.VUE_APP_BUILD_TIME // Element Vue.use(ElementUI) + // 过滤器 日期模块 + Vue.use(d2VueFiltersDateModule) // 插件 Vue.use(pluginError) Vue.use(pluginExport) diff --git a/src/router/modules/filters.js b/src/router/modules/filters.js new file mode 100644 index 00000000..8d0cb4b1 --- /dev/null +++ b/src/router/modules/filters.js @@ -0,0 +1,25 @@ +import layoutHeaderAside from '@/layout/header-aside' + +const meta = { auth: true } + +export default { + path: '/demo/filters', + name: 'demo-filters', + meta, + redirect: { name: 'demo-filters-index' }, + component: layoutHeaderAside, + children: (pre => [ + { + path: 'index', + name: `${pre}index`, + component: () => import('@/pages/demo/filters/index'), + meta: { ...meta, title: '过滤器首页' } + }, + { + path: 'day', + name: `${pre}day`, + component: () => import('@/pages/demo/filters/day'), + meta: { ...meta, title: '日期和时间' } + } + ])('demo-filters-') +} diff --git a/src/router/routes.js b/src/router/routes.js index 097e75f0..544380a4 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -5,6 +5,7 @@ import plugins from './modules/plugins' import charts from './modules/charts' import components from './modules/components' import element from './modules/element' +import filters from './modules/filters' import business from './modules/business' import layoutHeaderAside from '@/layout/header-aside' @@ -60,6 +61,7 @@ const frameIn = [ charts, components, element, + filters, business ]