Merge branch 'dev' of https://github.com/d2-projects/d2-admin into dev
This commit is contained in:
王珏
commit
ac62845e83
|
|
@ -47,7 +47,10 @@
|
|||
"vue-router": "^3.1.3",
|
||||
"vue-splitpane": "^1.0.6",
|
||||
"vue-ueditor-wrap": "^2.4.1",
|
||||
"vuex": "^3.1.2"
|
||||
"vuex": "^3.1.2",
|
||||
"d2-crud-plus": "^1.16.2",
|
||||
"d2-crud-x": "^2.10.2",
|
||||
"d2p-extends": "^1.9.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@d2-projects/vue-filename-injector": "^1.1.0",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import faker from 'faker/locale/zh_CN'
|
|||
import { service, request, serviceForMock, requestForMock, mock } from './service'
|
||||
import * as tools from './tools'
|
||||
|
||||
const files = require.context('./modules', true, /\.js$/)
|
||||
const files = require.context('./modules', true, /\.api\.js$/)
|
||||
const generators = files.keys().map(key => files(key).default)
|
||||
|
||||
export default assign({}, ...map(generators, generator => generator({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
<svg width="240px" height="236px" viewBox="0 0 240 236" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(-8.000000, 0.000000)">
|
||||
<g id="d2-crud" transform="translate(8.000000, 0.000000)">
|
||||
<path d="M111.666667,132.146667 L111.666667,166.813334 C111.666667,169.022473 109.875806,170.813334 107.666667,170.813334 L72.9999997,170.813334 C70.7908607,170.813334 68.9999997,169.022473 68.9999997,166.813334 L68.9999997,132.146667 C68.9999997,129.937528 70.7908607,128.146667 72.9999997,128.146667 L107.666667,128.146667 C109.875806,128.146667 111.666667,129.937528 111.666667,132.146667 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M47.6666667,132.146667 L47.6666667,166.813334 C47.6666667,169.022473 45.8758057,170.813334 43.6666667,170.813334 L9,170.813334 C6.790861,170.813334 5,169.022473 5,166.813334 L5,132.146667 C5,129.937528 6.790861,128.146667 9,128.146667 L43.6666667,128.146667 C45.8758057,128.146667 47.6666667,129.937528 47.6666667,132.146667 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M47.6666667,69 L47.6666667,103.666667 C47.6666667,105.875806 45.8758057,107.666667 43.6666667,107.666667 L9,107.666667 C6.790861,107.666667 5,105.875806 5,103.666667 L5,69 C5,66.790861 6.790861,65 9,65 L43.6666667,65 C45.8758057,65 47.6666667,66.790861 47.6666667,69 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M111.666667,69 L111.666667,103.666667 C111.666667,105.875806 109.875806,107.666667 107.666667,107.666667 L72.9999997,107.666667 C70.7908607,107.666667 68.9999997,105.875806 68.9999997,103.666667 L68.9999997,69 C68.9999997,66.790861 70.7908607,65 72.9999997,65 L107.666667,65 C109.875806,65 111.666667,66.790861 111.666667,69 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M175.666667,132.146667 L175.666667,166.813334 C175.666667,169.022473 173.875806,170.813334 171.666667,170.813334 L137,170.813334 C134.790861,170.813334 133,169.022473 133,166.813334 L133,132.146667 C133,129.937528 134.790861,128.146667 137,128.146667 L171.666667,128.146667 C173.875806,128.146667 175.666667,129.937528 175.666667,132.146667 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M175.666667,69 L175.666667,103.666667 C175.666667,105.875806 173.875806,107.666667 171.666667,107.666667 L137,107.666667 C134.790861,107.666667 133,105.875806 133,103.666667 L133,69 C133,66.790861 134.790861,65 137,65 L171.666667,65 C173.875806,65 175.666667,66.790861 175.666667,69 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M47.6666667,197 L47.6666667,231.666667 C47.6666667,233.875806 45.8758057,235.666667 43.6666667,235.666667 L9,235.666667 C6.790861,235.666667 5,233.875806 5,231.666667 L5,197 C5,194.790861 6.790861,193 9,193 L43.6666667,193 C45.8758057,193 47.6666667,194.790861 47.6666667,197 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M175.666667,197 L175.666667,231.666667 C175.666667,233.875806 173.875806,235.666667 171.666667,235.666667 L137,235.666667 C134.790861,235.666667 133,233.875806 133,231.666667 L133,197 C133,194.790861 134.790861,193 137,193 L171.666667,193 C173.875806,193 175.666667,194.790861 175.666667,197 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<path d="M111.666667,197 L111.666667,231.666667 C111.666667,233.875806 109.875806,235.666667 107.666667,235.666667 L72.9999997,235.666667 C70.7908607,235.666667 68.9999997,233.875806 68.9999997,231.666667 L68.9999997,197 C68.9999997,194.790861 70.7908607,193 72.9999997,193 L107.666667,193 C109.875806,193 111.666667,194.790861 111.666667,197 Z" fill="#409EFF" fill-rule="nonzero"></path>
|
||||
<rect fill="#35495E" x="176" y="19" width="64" height="26" rx="4"></rect>
|
||||
<rect fill="#35495E" transform="translate(208.000000, 32.000000) rotate(-270.000000) translate(-208.000000, -32.000000) " x="176" y="19" width="64" height="26" rx="4"></rect>
|
||||
<rect fill="#35495E" transform="translate(208.500000, 159.000000) rotate(-270.000000) translate(-208.500000, -159.000000) " x="132" y="146" width="153" height="26" rx="4"></rect>
|
||||
<rect fill="#35495E" transform="translate(78.000000, 32.000000) rotate(-180.000000) translate(-78.000000, -32.000000) " x="0" y="19" width="156" height="26" rx="4"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -23,11 +23,6 @@ export default {
|
|||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
betterScrollOptions: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -47,7 +42,6 @@ export default {
|
|||
class="container-component">
|
||||
<this.component
|
||||
ref="component"
|
||||
betterScrollOptions={this.betterScrollOptions}
|
||||
{ ...{ attrs: this.$attrs } }
|
||||
onScroll={ e => this.$emit('scroll', e) }>
|
||||
{ slots }
|
||||
|
|
|
|||
|
|
@ -4,16 +4,12 @@ import { uniqueId } from 'lodash'
|
|||
import demoPlugins from './modules/demo-plugins'
|
||||
// 组件
|
||||
import demoComponents from './modules/demo-components'
|
||||
// 组件
|
||||
import demoCharts from './modules/demo-charts'
|
||||
// 试验台
|
||||
// 功能
|
||||
import demoPlayground from './modules/demo-playground'
|
||||
// 示例
|
||||
import demoBusiness from './modules/demo-business'
|
||||
// CRUD
|
||||
import demoD2Crud from './modules/demo-d2-crud'
|
||||
// 第三方网页
|
||||
import demoFrame from './modules/demo-frame'
|
||||
// CRUD PLUS
|
||||
import demoD2CrudPlus from './modules/demo-d2-crud-plus'
|
||||
|
||||
/**
|
||||
* @description 给菜单数据补充上 path 字段
|
||||
|
|
@ -34,11 +30,9 @@ function supplementPath (menu) {
|
|||
export const menuAside = supplementPath([
|
||||
demoComponents,
|
||||
demoPlugins,
|
||||
demoCharts,
|
||||
demoPlayground,
|
||||
demoBusiness,
|
||||
demoD2Crud,
|
||||
demoFrame
|
||||
demoD2CrudPlus
|
||||
])
|
||||
|
||||
// 菜单 顶栏
|
||||
|
|
@ -48,29 +42,15 @@ export const menuHeader = supplementPath([
|
|||
title: '首页',
|
||||
icon: 'home'
|
||||
},
|
||||
demoPlayground,
|
||||
demoComponents,
|
||||
demoPlugins,
|
||||
{
|
||||
title: '功能',
|
||||
title: '社区插件',
|
||||
icon: 'puzzle-piece',
|
||||
children: [
|
||||
demoD2Crud,
|
||||
demoComponents,
|
||||
demoCharts,
|
||||
demoPlugins,
|
||||
demoFrame,
|
||||
{
|
||||
title: '新窗口打开链接',
|
||||
icon: 'link',
|
||||
children: [
|
||||
{ path: 'https://github.com/d2-projects/d2-admin', title: 'D2Admin Github', icon: 'github' },
|
||||
{ path: 'https://juejin.im/user/57a48b632e958a006691b946/posts', title: '掘金', icon: 'globe' },
|
||||
{ path: 'https://my.oschina.net/u/3871516', title: '开源中国', icon: 'globe' },
|
||||
{ path: 'https://www.zhihu.com/people/fairy-ever/activities', title: '知乎', icon: 'globe' },
|
||||
{ path: 'https://segmentfault.com/blog/liyang-note-book', title: 'segmentfault 专栏', icon: 'globe' },
|
||||
{ path: 'http://www.fairyever.com/', title: 'www.fairyever.com', icon: 'globe' }
|
||||
]
|
||||
}
|
||||
demoD2CrudPlus
|
||||
]
|
||||
},
|
||||
demoPlayground,
|
||||
demoBusiness
|
||||
}
|
||||
])
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
export default {
|
||||
path: '/demo/business',
|
||||
title: '示例',
|
||||
icon: 'flask',
|
||||
children: (pre => [
|
||||
{ path: `${pre}index`, title: '示例', icon: 'home' },
|
||||
{
|
||||
title: '表格',
|
||||
icon: 'table',
|
||||
children: [
|
||||
{ path: `${pre}table/1`, title: '表格 1' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'ISSUES',
|
||||
icon: 'github',
|
||||
children: [
|
||||
{ path: `${pre}issues/142`, title: '#142' }
|
||||
]
|
||||
}
|
||||
])('/demo/business/')
|
||||
}
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
export default {
|
||||
path: '/demo/charts',
|
||||
title: '图表',
|
||||
icon: 'line-chart',
|
||||
children: (pre => [
|
||||
{ path: `${pre}index`, title: '图表', icon: 'home' },
|
||||
{
|
||||
path: `${pre}list`,
|
||||
title: '图表',
|
||||
icon: 'cube',
|
||||
children: [
|
||||
{
|
||||
path: `${pre}list/line`,
|
||||
title: '折线图',
|
||||
children: [
|
||||
{ path: `${pre}list/line/demo1`, title: '一般' },
|
||||
{ path: `${pre}list/line/demo2`, title: '横坐标倾斜' },
|
||||
{ path: `${pre}list/line/demo3`, title: '堆叠面积图' },
|
||||
{ path: `${pre}list/line/demo4`, title: '显示数值' },
|
||||
{ path: `${pre}list/line/demo5`, title: '设置别名' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/histogram`,
|
||||
title: '柱状图',
|
||||
children: [
|
||||
{ path: `${pre}list/histogram/demo1`, title: '一般' },
|
||||
{ path: `${pre}list/histogram/demo2`, title: '指标维度' },
|
||||
{ path: `${pre}list/histogram/demo3`, title: '混合图表' },
|
||||
{ path: `${pre}list/histogram/demo4`, title: '堆叠柱状图' },
|
||||
{ path: `${pre}list/histogram/demo5`, title: '显示数值' },
|
||||
{ path: `${pre}list/histogram/demo6`, title: '横轴连续' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/bar`,
|
||||
title: '条形图',
|
||||
children: [
|
||||
{ path: `${pre}list/bar/demo1`, title: '一般' },
|
||||
{ path: `${pre}list/bar/demo2`, title: '指标维度' },
|
||||
{ path: `${pre}list/bar/demo3`, title: '排序条形图' },
|
||||
{ path: `${pre}list/bar/demo4`, title: '堆叠条形图' },
|
||||
{ path: `${pre}list/bar/demo5`, title: '纵轴连续' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/pie`,
|
||||
title: '饼图',
|
||||
children: [
|
||||
{ path: `${pre}list/pie/demo1`, title: '一般' },
|
||||
{ path: `${pre}list/pie/demo2`, title: '指标维度' },
|
||||
{ path: `${pre}list/pie/demo3`, title: '玫瑰图' },
|
||||
{ path: `${pre}list/pie/demo4`, title: '限制条数' },
|
||||
{ path: `${pre}list/pie/demo5`, title: '多圆饼图' },
|
||||
{ path: `${pre}list/pie/demo6`, title: '设置半径' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/ring`,
|
||||
title: '环图',
|
||||
children: [
|
||||
{ path: `${pre}list/ring/demo1`, title: '一般' },
|
||||
{ path: `${pre}list/ring/demo2`, title: '指标维度' },
|
||||
{ path: `${pre}list/ring/demo3`, title: '玫瑰图' },
|
||||
{ path: `${pre}list/ring/demo4`, title: '限制显示条数' },
|
||||
{ path: `${pre}list/ring/demo5`, title: '设置半径' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/waterfall`,
|
||||
title: '瀑布图',
|
||||
children: [
|
||||
{ path: `${pre}list/waterfall/demo1`, title: '一般' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/funnel`,
|
||||
title: '漏斗图',
|
||||
children: [
|
||||
{ path: `${pre}list/funnel/demo1`, title: '一般' },
|
||||
{ path: `${pre}list/funnel/demo2`, title: '金字塔' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/radar`,
|
||||
title: '雷达图',
|
||||
children: [
|
||||
{ path: `${pre}list/radar/demo1`, title: '一般' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/map`,
|
||||
title: '地图',
|
||||
children: [
|
||||
{ path: `${pre}list/map/demo1`, title: '一般' },
|
||||
{ path: `${pre}list/map/demo2`, title: '设置城市' },
|
||||
{ path: `${pre}list/map/demo3`, title: '设置样式' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/sankey`,
|
||||
title: '桑基图',
|
||||
children: [
|
||||
{ path: `${pre}list/sankey/demo1`, title: '一般' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/heatmap`,
|
||||
title: '热力图',
|
||||
children: [
|
||||
{ path: `${pre}list/heatmap/demo1`, title: '一般' },
|
||||
{ path: `${pre}list/heatmap/demo2`, title: '地图热力图' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/scatter`,
|
||||
title: '散点图',
|
||||
children: [
|
||||
{ path: `${pre}list/scatter/demo1`, title: '单维度多指标' },
|
||||
{ path: `${pre}list/scatter/demo2`, title: '双维度多指标' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/candle`,
|
||||
title: 'K线图',
|
||||
children: [
|
||||
{ path: `${pre}list/candle/demo1`, title: '一般' },
|
||||
{ path: `${pre}list/candle/demo2`, title: 'MA VOL' },
|
||||
{ path: `${pre}list/candle/demo3`, title: '自定义' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/gauge`,
|
||||
title: '仪表盘',
|
||||
children: [
|
||||
{ path: `${pre}list/gauge/demo1`, title: '一般' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}list/tree`,
|
||||
title: '树图',
|
||||
children: [
|
||||
{ path: `${pre}list/tree/demo1`, title: '径向树图' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
])('/demo/charts/')
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
export default {
|
||||
path: '/demo/components',
|
||||
title: '内置组件',
|
||||
title: '组件',
|
||||
icon: 'puzzle-piece',
|
||||
children: (pre => [
|
||||
{ path: `${pre}index`, title: '扩展组件', icon: 'home' },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
import '@/views/demo/d2-crud-plus/install'
|
||||
export default {
|
||||
path: '/demo/d2-crud-plus',
|
||||
title: 'D2 CRUD PLUS',
|
||||
iconSvg: 'd2-crud-plus',
|
||||
children: (pre => [
|
||||
{ path: `${pre}index`, title: 'D2 CRUD PLUS', icon: 'home' },
|
||||
{
|
||||
title: '简单示例',
|
||||
path: `${pre}demo`
|
||||
},
|
||||
{
|
||||
title: '表单分组',
|
||||
path: `${pre}group`
|
||||
},
|
||||
{
|
||||
title: '综合示例',
|
||||
path: `${pre}synthesize`
|
||||
},
|
||||
{
|
||||
title: '权限管理',
|
||||
icon: 'link',
|
||||
path: 'http://qiniu.veryreader.com/D2CrudPlusExample/#/permission/resource'
|
||||
},
|
||||
{
|
||||
title: '更多示例',
|
||||
icon: 'link',
|
||||
path: 'http://qiniu.veryreader.com/D2CrudPlusExample/'
|
||||
},
|
||||
{
|
||||
title: '帮助文档',
|
||||
icon: 'link',
|
||||
path: 'http://greper.gitee.io/d2-crud-plus/'
|
||||
}
|
||||
|
||||
])('/demo/d2-crud-plus/')
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
export default {
|
||||
path: '/demo/frame',
|
||||
title: '内嵌网页',
|
||||
icon: 'globe',
|
||||
children: (pre => [
|
||||
{ path: `${pre}index`, title: 'Frame ', icon: 'home' },
|
||||
{ path: `${pre}d2-doc`, title: 'D2Admin 中文文档', iconSvg: 'd2-admin' },
|
||||
{ path: `${pre}html`, title: '静态 HTML', icon: 'code' },
|
||||
{ path: `${pre}report`, title: '构建分析', icon: 'pie-chart' }
|
||||
])('/demo/frame/')
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
export default {
|
||||
path: '/demo/playground',
|
||||
title: '试验台',
|
||||
title: '功能',
|
||||
icon: 'flask',
|
||||
children: (pre => [
|
||||
{ path: `${pre}index`, title: '试验台', icon: 'home' },
|
||||
{ path: `${pre}index`, title: '功能', icon: 'home' },
|
||||
{
|
||||
title: 'svg 菜单图标',
|
||||
iconSvg: 'd2-admin',
|
||||
|
|
@ -37,6 +37,28 @@ export default {
|
|||
{ title: '正在开发 3' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}frame`,
|
||||
title: '内嵌网页',
|
||||
icon: 'globe',
|
||||
children: [
|
||||
{ path: `${pre}frame/d2-doc`, title: 'D2Admin 中文文档', iconSvg: 'd2-admin' },
|
||||
{ path: `${pre}frame/html`, title: '静态 HTML', icon: 'code' },
|
||||
{ path: `${pre}frame/report`, title: '构建分析', icon: 'pie-chart' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '新窗口打开链接',
|
||||
icon: 'link',
|
||||
children: [
|
||||
{ path: 'https://github.com/d2-projects/d2-admin', title: 'D2Admin Github', icon: 'github' },
|
||||
{ path: 'https://juejin.im/user/57a48b632e958a006691b946/posts', title: '掘金', icon: 'globe' },
|
||||
{ path: 'https://my.oschina.net/u/3871516', title: '开源中国', icon: 'globe' },
|
||||
{ path: 'https://www.zhihu.com/people/fairy-ever/activities', title: '知乎', icon: 'globe' },
|
||||
{ path: 'https://segmentfault.com/blog/liyang-note-book', title: 'segmentfault 专栏', icon: 'globe' },
|
||||
{ path: 'http://www.fairyever.com/', title: 'www.fairyever.com', icon: 'globe' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}store`,
|
||||
title: '全局状态管理',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,147 @@ export default {
|
|||
icon: 'plug',
|
||||
children: (pre => [
|
||||
{ path: `${pre}index`, title: '插件', icon: 'home' },
|
||||
{
|
||||
path: `${pre}charts`,
|
||||
title: '图表',
|
||||
icon: 'bar-chart',
|
||||
children: [
|
||||
{
|
||||
path: `${pre}charts/line`,
|
||||
title: '折线图',
|
||||
children: [
|
||||
{ path: `${pre}charts/line/demo1`, title: '一般' },
|
||||
{ path: `${pre}charts/line/demo2`, title: '横坐标倾斜' },
|
||||
{ path: `${pre}charts/line/demo3`, title: '堆叠面积图' },
|
||||
{ path: `${pre}charts/line/demo4`, title: '显示数值' },
|
||||
{ path: `${pre}charts/line/demo5`, title: '设置别名' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/histogram`,
|
||||
title: '柱状图',
|
||||
children: [
|
||||
{ path: `${pre}charts/histogram/demo1`, title: '一般' },
|
||||
{ path: `${pre}charts/histogram/demo2`, title: '指标维度' },
|
||||
{ path: `${pre}charts/histogram/demo3`, title: '混合图表' },
|
||||
{ path: `${pre}charts/histogram/demo4`, title: '堆叠柱状图' },
|
||||
{ path: `${pre}charts/histogram/demo5`, title: '显示数值' },
|
||||
{ path: `${pre}charts/histogram/demo6`, title: '横轴连续' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/bar`,
|
||||
title: '条形图',
|
||||
children: [
|
||||
{ path: `${pre}charts/bar/demo1`, title: '一般' },
|
||||
{ path: `${pre}charts/bar/demo2`, title: '指标维度' },
|
||||
{ path: `${pre}charts/bar/demo3`, title: '排序条形图' },
|
||||
{ path: `${pre}charts/bar/demo4`, title: '堆叠条形图' },
|
||||
{ path: `${pre}charts/bar/demo5`, title: '纵轴连续' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/pie`,
|
||||
title: '饼图',
|
||||
children: [
|
||||
{ path: `${pre}charts/pie/demo1`, title: '一般' },
|
||||
{ path: `${pre}charts/pie/demo2`, title: '指标维度' },
|
||||
{ path: `${pre}charts/pie/demo3`, title: '玫瑰图' },
|
||||
{ path: `${pre}charts/pie/demo4`, title: '限制条数' },
|
||||
{ path: `${pre}charts/pie/demo5`, title: '多圆饼图' },
|
||||
{ path: `${pre}charts/pie/demo6`, title: '设置半径' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/ring`,
|
||||
title: '环图',
|
||||
children: [
|
||||
{ path: `${pre}charts/ring/demo1`, title: '一般' },
|
||||
{ path: `${pre}charts/ring/demo2`, title: '指标维度' },
|
||||
{ path: `${pre}charts/ring/demo3`, title: '玫瑰图' },
|
||||
{ path: `${pre}charts/ring/demo4`, title: '限制显示条数' },
|
||||
{ path: `${pre}charts/ring/demo5`, title: '设置半径' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/waterfall`,
|
||||
title: '瀑布图',
|
||||
children: [
|
||||
{ path: `${pre}charts/waterfall/demo1`, title: '一般' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/funnel`,
|
||||
title: '漏斗图',
|
||||
children: [
|
||||
{ path: `${pre}charts/funnel/demo1`, title: '一般' },
|
||||
{ path: `${pre}charts/funnel/demo2`, title: '金字塔' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/radar`,
|
||||
title: '雷达图',
|
||||
children: [
|
||||
{ path: `${pre}charts/radar/demo1`, title: '一般' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/map`,
|
||||
title: '地图',
|
||||
children: [
|
||||
{ path: `${pre}charts/map/demo1`, title: '一般' },
|
||||
{ path: `${pre}charts/map/demo2`, title: '设置城市' },
|
||||
{ path: `${pre}charts/map/demo3`, title: '设置样式' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/sankey`,
|
||||
title: '桑基图',
|
||||
children: [
|
||||
{ path: `${pre}charts/sankey/demo1`, title: '一般' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/heatmap`,
|
||||
title: '热力图',
|
||||
children: [
|
||||
{ path: `${pre}charts/heatmap/demo1`, title: '一般' },
|
||||
{ path: `${pre}charts/heatmap/demo2`, title: '地图热力图' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/scatter`,
|
||||
title: '散点图',
|
||||
children: [
|
||||
{ path: `${pre}charts/scatter/demo1`, title: '单维度多指标' },
|
||||
{ path: `${pre}charts/scatter/demo2`, title: '双维度多指标' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/candle`,
|
||||
title: 'K线图',
|
||||
children: [
|
||||
{ path: `${pre}charts/candle/demo1`, title: '一般' },
|
||||
{ path: `${pre}charts/candle/demo2`, title: 'MA VOL' },
|
||||
{ path: `${pre}charts/candle/demo3`, title: '自定义' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/gauge`,
|
||||
title: '仪表盘',
|
||||
children: [
|
||||
{ path: `${pre}charts/gauge/demo1`, title: '一般' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}charts/tree`,
|
||||
title: '树图',
|
||||
children: [
|
||||
{ path: `${pre}charts/tree/demo1`, title: '径向树图' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: `${pre}import`,
|
||||
title: '导入',
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
import layoutHeaderAside from '@/layout/header-aside'
|
||||
|
||||
// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
|
||||
const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
|
||||
|
||||
const meta = { auth: true }
|
||||
|
||||
export default {
|
||||
path: '/demo/business',
|
||||
name: 'demo-business',
|
||||
meta,
|
||||
redirect: { name: 'demo-business-index' },
|
||||
component: layoutHeaderAside,
|
||||
children: (pre => [
|
||||
{
|
||||
path: 'index',
|
||||
name: `${pre}index`,
|
||||
component: _import('demo/business/index'),
|
||||
meta: {
|
||||
...meta,
|
||||
title: '示例首页'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'table/1',
|
||||
name: `${pre}table-1`,
|
||||
component: _import('demo/business/table/1'),
|
||||
meta: {
|
||||
...meta,
|
||||
title: '表格 1'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'issues/142',
|
||||
name: `${pre}issues-142`,
|
||||
component: _import('demo/business/issues/142'),
|
||||
meta: {
|
||||
...meta,
|
||||
title: 'issue #142'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'issues/142/edit/:id',
|
||||
name: `${pre}issues-142-edit`,
|
||||
component: _import('demo/business/issues/142/edit'),
|
||||
props: true,
|
||||
meta: {
|
||||
...meta,
|
||||
title: '无缓存编辑'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'issues/142/edit-cache-db/:id',
|
||||
name: `${pre}issues-142-edit-cache-db`,
|
||||
component: _import('demo/business/issues/142/edit-cache-db'),
|
||||
props: true,
|
||||
meta: {
|
||||
...meta,
|
||||
title: '带缓存编辑 DB'
|
||||
}
|
||||
}
|
||||
])('demo-business-')
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import layoutHeaderAside from '@/layout/header-aside'
|
||||
|
||||
// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
|
||||
const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
|
||||
|
||||
const meta = { auth: true }
|
||||
|
||||
export default {
|
||||
path: '/demo/charts',
|
||||
name: 'demo-charts',
|
||||
meta,
|
||||
redirect: { name: 'demo-charts-index' },
|
||||
component: layoutHeaderAside,
|
||||
children: (pre => [
|
||||
{ path: 'index', name: `${pre}index`, component: _import('demo/charts/index'), meta: { ...meta, title: '图表首页' } },
|
||||
{ path: 'list/line/demo1', name: `${pre}list-line-demo1`, component: _import('demo/charts/list/line/demo1/index.vue'), meta: { ...meta, title: '折线图示例 1' } },
|
||||
{ path: 'list/line/demo2', name: `${pre}list-line-demo2`, component: _import('demo/charts/list/line/demo2/index.vue'), meta: { ...meta, title: '折线图示例 2' } },
|
||||
{ path: 'list/line/demo3', name: `${pre}list-line-demo3`, component: _import('demo/charts/list/line/demo3/index.vue'), meta: { ...meta, title: '折线图示例 3' } },
|
||||
{ path: 'list/line/demo4', name: `${pre}list-line-demo4`, component: _import('demo/charts/list/line/demo4/index.vue'), meta: { ...meta, title: '折线图示例 4' } },
|
||||
{ path: 'list/line/demo5', name: `${pre}list-line-demo5`, component: _import('demo/charts/list/line/demo5/index.vue'), meta: { ...meta, title: '折线图示例 5' } },
|
||||
{ path: 'list/histogram/demo1', name: `${pre}list-histogram-demo1`, component: _import('demo/charts/list/histogram/demo1/index.vue'), meta: { ...meta, title: '柱状图示例 1' } },
|
||||
{ path: 'list/histogram/demo2', name: `${pre}list-histogram-demo2`, component: _import('demo/charts/list/histogram/demo2/index.vue'), meta: { ...meta, title: '柱状图示例 2' } },
|
||||
{ path: 'list/histogram/demo3', name: `${pre}list-histogram-demo3`, component: _import('demo/charts/list/histogram/demo3/index.vue'), meta: { ...meta, title: '柱状图示例 3' } },
|
||||
{ path: 'list/histogram/demo4', name: `${pre}list-histogram-demo4`, component: _import('demo/charts/list/histogram/demo4/index.vue'), meta: { ...meta, title: '柱状图示例 4' } },
|
||||
{ path: 'list/histogram/demo5', name: `${pre}list-histogram-demo5`, component: _import('demo/charts/list/histogram/demo5/index.vue'), meta: { ...meta, title: '柱状图示例 5' } },
|
||||
{ path: 'list/histogram/demo6', name: `${pre}list-histogram-demo6`, component: _import('demo/charts/list/histogram/demo6/index.vue'), meta: { ...meta, title: '柱状图示例 6' } },
|
||||
{ path: 'list/bar/demo1', name: `${pre}list-bar-demo1`, component: _import('demo/charts/list/bar/demo1/index.vue'), meta: { ...meta, title: '条形图示例 1' } },
|
||||
{ path: 'list/bar/demo2', name: `${pre}list-bar-demo2`, component: _import('demo/charts/list/bar/demo2/index.vue'), meta: { ...meta, title: '条形图示例 2' } },
|
||||
{ path: 'list/bar/demo3', name: `${pre}list-bar-demo3`, component: _import('demo/charts/list/bar/demo3/index.vue'), meta: { ...meta, title: '条形图示例 3' } },
|
||||
{ path: 'list/bar/demo4', name: `${pre}list-bar-demo4`, component: _import('demo/charts/list/bar/demo4/index.vue'), meta: { ...meta, title: '条形图示例 4' } },
|
||||
{ path: 'list/bar/demo5', name: `${pre}list-bar-demo5`, component: _import('demo/charts/list/bar/demo5/index.vue'), meta: { ...meta, title: '条形图示例 5' } },
|
||||
{ path: 'list/pie/demo1', name: `${pre}list-pie-demo1`, component: _import('demo/charts/list/pie/demo1/index.vue'), meta: { ...meta, title: '饼图示例 1' } },
|
||||
{ path: 'list/pie/demo2', name: `${pre}list-pie-demo2`, component: _import('demo/charts/list/pie/demo2/index.vue'), meta: { ...meta, title: '饼图示例 2' } },
|
||||
{ path: 'list/pie/demo3', name: `${pre}list-pie-demo3`, component: _import('demo/charts/list/pie/demo3/index.vue'), meta: { ...meta, title: '饼图示例 3' } },
|
||||
{ path: 'list/pie/demo4', name: `${pre}list-pie-demo4`, component: _import('demo/charts/list/pie/demo4/index.vue'), meta: { ...meta, title: '饼图示例 4' } },
|
||||
{ path: 'list/pie/demo5', name: `${pre}list-pie-demo5`, component: _import('demo/charts/list/pie/demo5/index.vue'), meta: { ...meta, title: '饼图示例 5' } },
|
||||
{ path: 'list/pie/demo6', name: `${pre}list-pie-demo6`, component: _import('demo/charts/list/pie/demo6/index.vue'), meta: { ...meta, title: '饼图示例 6' } },
|
||||
{ path: 'list/ring/demo1', name: `${pre}list-ring-demo1`, component: _import('demo/charts/list/ring/demo1/index.vue'), meta: { ...meta, title: '环图示例 1' } },
|
||||
{ path: 'list/ring/demo2', name: `${pre}list-ring-demo2`, component: _import('demo/charts/list/ring/demo2/index.vue'), meta: { ...meta, title: '环图示例 2' } },
|
||||
{ path: 'list/ring/demo3', name: `${pre}list-ring-demo3`, component: _import('demo/charts/list/ring/demo3/index.vue'), meta: { ...meta, title: '环图示例 3' } },
|
||||
{ path: 'list/ring/demo4', name: `${pre}list-ring-demo4`, component: _import('demo/charts/list/ring/demo4/index.vue'), meta: { ...meta, title: '环图示例 4' } },
|
||||
{ path: 'list/ring/demo5', name: `${pre}list-ring-demo5`, component: _import('demo/charts/list/ring/demo5/index.vue'), meta: { ...meta, title: '环图示例 5' } },
|
||||
{ path: 'list/waterfall/demo1', name: `${pre}list-waterfall-demo1`, component: _import('demo/charts/list/waterfall/demo1/index.vue'), meta: { ...meta, title: '瀑布图示例 1' } },
|
||||
{ path: 'list/funnel/demo1', name: `${pre}list-funnel-demo1`, component: _import('demo/charts/list/funnel/demo1/index.vue'), meta: { ...meta, title: '漏斗图示例 1' } },
|
||||
{ path: 'list/funnel/demo2', name: `${pre}list-funnel-demo2`, component: _import('demo/charts/list/funnel/demo2/index.vue'), meta: { ...meta, title: '漏斗图示例 2' } },
|
||||
{ path: 'list/radar/demo1', name: `${pre}list-radar-demo1`, component: _import('demo/charts/list/radar/demo1/index.vue'), meta: { ...meta, title: '雷达图示例 1' } },
|
||||
{ path: 'list/map/demo1', name: `${pre}list-map-demo1`, component: _import('demo/charts/list/map/demo1/index.vue'), meta: { ...meta, title: '地图示例 1' } },
|
||||
{ path: 'list/map/demo2', name: `${pre}list-map-demo2`, component: _import('demo/charts/list/map/demo2/index.vue'), meta: { ...meta, title: '地图示例 2' } },
|
||||
{ path: 'list/map/demo3', name: `${pre}list-map-demo3`, component: _import('demo/charts/list/map/demo3/index.vue'), meta: { ...meta, title: '地图示例 3' } },
|
||||
{ path: 'list/sankey/demo1', name: `${pre}list-sankey-demo1`, component: _import('demo/charts/list/sankey/demo1/index.vue'), meta: { ...meta, title: '桑基图示例 1' } },
|
||||
{ path: 'list/heatmap/demo1', name: `${pre}list-heatmap-demo1`, component: _import('demo/charts/list/heatmap/demo1/index.vue'), meta: { ...meta, title: '热力图示例 1' } },
|
||||
{ path: 'list/heatmap/demo2', name: `${pre}list-heatmap-demo2`, component: _import('demo/charts/list/heatmap/demo2/index.vue'), meta: { ...meta, title: '热力图示例 2' } },
|
||||
{ path: 'list/scatter/demo1', name: `${pre}list-scatter-demo1`, component: _import('demo/charts/list/scatter/demo1/index.vue'), meta: { ...meta, title: '散点图示例 1' } },
|
||||
{ path: 'list/scatter/demo2', name: `${pre}list-scatter-demo2`, component: _import('demo/charts/list/scatter/demo2/index.vue'), meta: { ...meta, title: '散点图示例 2' } },
|
||||
{ path: 'list/candle/demo1', name: `${pre}list-candle-demo1`, component: _import('demo/charts/list/candle/demo1/index.vue'), meta: { ...meta, title: 'K线图示例 1' } },
|
||||
{ path: 'list/candle/demo2', name: `${pre}list-candle-demo2`, component: _import('demo/charts/list/candle/demo2/index.vue'), meta: { ...meta, title: 'K线图示例 2' } },
|
||||
{ path: 'list/candle/demo3', name: `${pre}list-candle-demo3`, component: _import('demo/charts/list/candle/demo3/index.vue'), meta: { ...meta, title: 'K线图示例 3' } },
|
||||
{ path: 'list/gauge/demo1', name: `${pre}list-gauge-demo1`, component: _import('demo/charts/list/gauge/demo1/index.vue'), meta: { ...meta, title: '仪表盘示例 1' } },
|
||||
{ path: 'list/tree/demo1', name: `${pre}list-tree-demo1`, component: _import('demo/charts/list/tree/demo1/index.vue'), meta: { ...meta, title: '树图示例 1' } }
|
||||
])('demo-charts-')
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import layoutHeaderAside from '@/layout/header-aside'
|
||||
|
||||
// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
|
||||
const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
|
||||
|
||||
const meta = { auth: true }
|
||||
|
||||
export default {
|
||||
path: '/demo/d2-crud-plus',
|
||||
name: 'demo-d2-crud-plus',
|
||||
meta,
|
||||
redirect: { name: 'demo-d2-crud-plus-index' },
|
||||
component: layoutHeaderAside,
|
||||
children: (pre => [
|
||||
{ path: 'index', name: `${pre}index`, component: _import('demo/d2-crud-plus/index'), meta: { ...meta, title: 'D2 CRUD PLUS 首页' } },
|
||||
{ path: 'demo', name: `${pre}demo`, component: _import('demo/d2-crud-plus/demo'), meta: { ...meta, title: '简单示例' } },
|
||||
{ path: 'group', name: `${pre}group`, component: _import('demo/d2-crud-plus/group'), meta: { ...meta, title: '表单分组' } },
|
||||
{ path: 'synthesize', name: `${pre}synthesize`, component: _import('demo/d2-crud-plus/synthesize'), meta: { ...meta, title: '综合示例' } }
|
||||
|
||||
])('demo-d2-crud-plus-')
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import layoutHeaderAside from '@/layout/header-aside'
|
||||
|
||||
// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载
|
||||
const _import = require('@/libs/util.import.' + process.env.NODE_ENV)
|
||||
|
||||
const meta = { auth: true }
|
||||
|
||||
export default {
|
||||
path: '/demo/frame',
|
||||
name: 'demo-frame',
|
||||
meta,
|
||||
redirect: { name: 'demo-frame-index' },
|
||||
component: layoutHeaderAside,
|
||||
children: (pre => [
|
||||
{ path: 'index', name: `${pre}index`, component: _import('demo/frame/index'), meta: { ...meta, title: 'Frame 首页' } },
|
||||
{ path: 'html', name: `${pre}html`, component: _import('demo/frame/html'), meta: { ...meta, title: '静态 HTML' } },
|
||||
{ path: 'report', name: `${pre}report`, component: _import('demo/frame/report'), meta: { ...meta, title: 'Size report' } },
|
||||
{ path: 'd2-doc', name: `${pre}d2-doc`, component: _import('demo/frame/d2-doc'), meta: { ...meta, title: 'D2Admin 中文文档' } }
|
||||
])('demo-frame-')
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@ export default {
|
|||
redirect: { name: 'demo-playground-index' },
|
||||
component: layoutHeaderAside,
|
||||
children: (pre => [
|
||||
{ path: 'index', name: `${pre}index`, component: _import('demo/playground/index'), meta: { ...meta, title: '试验台首页' } },
|
||||
{ path: 'index', name: `${pre}index`, component: _import('demo/playground/index'), meta: { ...meta, title: '功能首页' } },
|
||||
{ path: 'store/page', name: `${pre}store-page`, component: _import('demo/playground/store/page'), meta: { ...meta, cache: true, title: '多标签页控制' } },
|
||||
{ path: 'store/menu', name: `${pre}store-menu`, component: _import('demo/playground/store/menu'), meta: { ...meta, title: '菜单控制' } },
|
||||
{ path: 'store/size', name: `${pre}store-size`, component: _import('demo/playground/store/size'), meta: { ...meta, title: '全局尺寸' } },
|
||||
|
|
@ -39,6 +39,9 @@ export default {
|
|||
{ path: 'log/log', name: `${pre}log-log`, component: _import('demo/playground/log/log'), meta: { ...meta, title: '日志记录' } },
|
||||
{ path: 'add-routes/routes', name: `${pre}add-routes-routes`, component: _import('demo/playground/add-routes/routes'), meta: { ...meta, title: '添加页面' } },
|
||||
{ path: 'env', name: `${pre}env`, component: _import('demo/playground/env'), meta: { ...meta, title: '环境信息' } },
|
||||
{ path: 'locales', name: `${pre}locales`, component: _import('demo/playground/locales'), meta: { ...meta, title: '国际化' } }
|
||||
{ path: 'locales', name: `${pre}locales`, component: _import('demo/playground/locales'), meta: { ...meta, title: '国际化' } },
|
||||
{ path: 'frame/html', name: `${pre}frame-html`, component: _import('demo/playground/frame/html'), meta: { ...meta, title: '静态 HTML' } },
|
||||
{ path: 'frame/report', name: `${pre}frame-report`, component: _import('demo/playground/frame/report'), meta: { ...meta, title: 'Size report' } },
|
||||
{ path: 'frame/d2-doc', name: `${pre}frame-d2-doc`, component: _import('demo/playground/frame/d2-doc'), meta: { ...meta, title: 'D2Admin 中文文档' } }
|
||||
])('demo-playground-')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,50 @@ export default {
|
|||
{ path: 'import/csv', name: `${pre}import-csv`, component: _import('demo/plugins/import/csv.vue'), meta: { ...meta, title: '导入 csv' } },
|
||||
{ path: 'import/xlsx', name: `${pre}import-xlsx`, component: _import('demo/plugins/import/xlsx.vue'), meta: { ...meta, title: '导入 xlsx' } },
|
||||
{ path: 'index', name: `${pre}index`, component: _import('demo/plugins/index'), meta: { ...meta, title: '插件首页' } },
|
||||
{ path: 'js-cookie', name: `${pre}js-cookie`, component: _import('demo/plugins/js-cookie'), meta: { ...meta, title: 'Cookie' } }
|
||||
{ path: 'js-cookie', name: `${pre}js-cookie`, component: _import('demo/plugins/js-cookie'), meta: { ...meta, title: 'Cookie' } },
|
||||
{ path: 'charts/line/demo1', name: `${pre}charts-line-demo1`, component: _import('demo/plugins/charts/line/demo1/index.vue'), meta: { ...meta, title: '折线图示例 1' } },
|
||||
{ path: 'charts/line/demo2', name: `${pre}charts-line-demo2`, component: _import('demo/plugins/charts/line/demo2/index.vue'), meta: { ...meta, title: '折线图示例 2' } },
|
||||
{ path: 'charts/line/demo3', name: `${pre}charts-line-demo3`, component: _import('demo/plugins/charts/line/demo3/index.vue'), meta: { ...meta, title: '折线图示例 3' } },
|
||||
{ path: 'charts/line/demo4', name: `${pre}charts-line-demo4`, component: _import('demo/plugins/charts/line/demo4/index.vue'), meta: { ...meta, title: '折线图示例 4' } },
|
||||
{ path: 'charts/line/demo5', name: `${pre}charts-line-demo5`, component: _import('demo/plugins/charts/line/demo5/index.vue'), meta: { ...meta, title: '折线图示例 5' } },
|
||||
{ path: 'charts/histogram/demo1', name: `${pre}charts-histogram-demo1`, component: _import('demo/plugins/charts/histogram/demo1/index.vue'), meta: { ...meta, title: '柱状图示例 1' } },
|
||||
{ path: 'charts/histogram/demo2', name: `${pre}charts-histogram-demo2`, component: _import('demo/plugins/charts/histogram/demo2/index.vue'), meta: { ...meta, title: '柱状图示例 2' } },
|
||||
{ path: 'charts/histogram/demo3', name: `${pre}charts-histogram-demo3`, component: _import('demo/plugins/charts/histogram/demo3/index.vue'), meta: { ...meta, title: '柱状图示例 3' } },
|
||||
{ path: 'charts/histogram/demo4', name: `${pre}charts-histogram-demo4`, component: _import('demo/plugins/charts/histogram/demo4/index.vue'), meta: { ...meta, title: '柱状图示例 4' } },
|
||||
{ path: 'charts/histogram/demo5', name: `${pre}charts-histogram-demo5`, component: _import('demo/plugins/charts/histogram/demo5/index.vue'), meta: { ...meta, title: '柱状图示例 5' } },
|
||||
{ path: 'charts/histogram/demo6', name: `${pre}charts-histogram-demo6`, component: _import('demo/plugins/charts/histogram/demo6/index.vue'), meta: { ...meta, title: '柱状图示例 6' } },
|
||||
{ path: 'charts/bar/demo1', name: `${pre}charts-bar-demo1`, component: _import('demo/plugins/charts/bar/demo1/index.vue'), meta: { ...meta, title: '条形图示例 1' } },
|
||||
{ path: 'charts/bar/demo2', name: `${pre}charts-bar-demo2`, component: _import('demo/plugins/charts/bar/demo2/index.vue'), meta: { ...meta, title: '条形图示例 2' } },
|
||||
{ path: 'charts/bar/demo3', name: `${pre}charts-bar-demo3`, component: _import('demo/plugins/charts/bar/demo3/index.vue'), meta: { ...meta, title: '条形图示例 3' } },
|
||||
{ path: 'charts/bar/demo4', name: `${pre}charts-bar-demo4`, component: _import('demo/plugins/charts/bar/demo4/index.vue'), meta: { ...meta, title: '条形图示例 4' } },
|
||||
{ path: 'charts/bar/demo5', name: `${pre}charts-bar-demo5`, component: _import('demo/plugins/charts/bar/demo5/index.vue'), meta: { ...meta, title: '条形图示例 5' } },
|
||||
{ path: 'charts/pie/demo1', name: `${pre}charts-pie-demo1`, component: _import('demo/plugins/charts/pie/demo1/index.vue'), meta: { ...meta, title: '饼图示例 1' } },
|
||||
{ path: 'charts/pie/demo2', name: `${pre}charts-pie-demo2`, component: _import('demo/plugins/charts/pie/demo2/index.vue'), meta: { ...meta, title: '饼图示例 2' } },
|
||||
{ path: 'charts/pie/demo3', name: `${pre}charts-pie-demo3`, component: _import('demo/plugins/charts/pie/demo3/index.vue'), meta: { ...meta, title: '饼图示例 3' } },
|
||||
{ path: 'charts/pie/demo4', name: `${pre}charts-pie-demo4`, component: _import('demo/plugins/charts/pie/demo4/index.vue'), meta: { ...meta, title: '饼图示例 4' } },
|
||||
{ path: 'charts/pie/demo5', name: `${pre}charts-pie-demo5`, component: _import('demo/plugins/charts/pie/demo5/index.vue'), meta: { ...meta, title: '饼图示例 5' } },
|
||||
{ path: 'charts/pie/demo6', name: `${pre}charts-pie-demo6`, component: _import('demo/plugins/charts/pie/demo6/index.vue'), meta: { ...meta, title: '饼图示例 6' } },
|
||||
{ path: 'charts/ring/demo1', name: `${pre}charts-ring-demo1`, component: _import('demo/plugins/charts/ring/demo1/index.vue'), meta: { ...meta, title: '环图示例 1' } },
|
||||
{ path: 'charts/ring/demo2', name: `${pre}charts-ring-demo2`, component: _import('demo/plugins/charts/ring/demo2/index.vue'), meta: { ...meta, title: '环图示例 2' } },
|
||||
{ path: 'charts/ring/demo3', name: `${pre}charts-ring-demo3`, component: _import('demo/plugins/charts/ring/demo3/index.vue'), meta: { ...meta, title: '环图示例 3' } },
|
||||
{ path: 'charts/ring/demo4', name: `${pre}charts-ring-demo4`, component: _import('demo/plugins/charts/ring/demo4/index.vue'), meta: { ...meta, title: '环图示例 4' } },
|
||||
{ path: 'charts/ring/demo5', name: `${pre}charts-ring-demo5`, component: _import('demo/plugins/charts/ring/demo5/index.vue'), meta: { ...meta, title: '环图示例 5' } },
|
||||
{ path: 'charts/waterfall/demo1', name: `${pre}charts-waterfall-demo1`, component: _import('demo/plugins/charts/waterfall/demo1/index.vue'), meta: { ...meta, title: '瀑布图示例 1' } },
|
||||
{ path: 'charts/funnel/demo1', name: `${pre}charts-funnel-demo1`, component: _import('demo/plugins/charts/funnel/demo1/index.vue'), meta: { ...meta, title: '漏斗图示例 1' } },
|
||||
{ path: 'charts/funnel/demo2', name: `${pre}charts-funnel-demo2`, component: _import('demo/plugins/charts/funnel/demo2/index.vue'), meta: { ...meta, title: '漏斗图示例 2' } },
|
||||
{ path: 'charts/radar/demo1', name: `${pre}charts-radar-demo1`, component: _import('demo/plugins/charts/radar/demo1/index.vue'), meta: { ...meta, title: '雷达图示例 1' } },
|
||||
{ path: 'charts/map/demo1', name: `${pre}charts-map-demo1`, component: _import('demo/plugins/charts/map/demo1/index.vue'), meta: { ...meta, title: '地图示例 1' } },
|
||||
{ path: 'charts/map/demo2', name: `${pre}charts-map-demo2`, component: _import('demo/plugins/charts/map/demo2/index.vue'), meta: { ...meta, title: '地图示例 2' } },
|
||||
{ path: 'charts/map/demo3', name: `${pre}charts-map-demo3`, component: _import('demo/plugins/charts/map/demo3/index.vue'), meta: { ...meta, title: '地图示例 3' } },
|
||||
{ path: 'charts/sankey/demo1', name: `${pre}charts-sankey-demo1`, component: _import('demo/plugins/charts/sankey/demo1/index.vue'), meta: { ...meta, title: '桑基图示例 1' } },
|
||||
{ path: 'charts/heatmap/demo1', name: `${pre}charts-heatmap-demo1`, component: _import('demo/plugins/charts/heatmap/demo1/index.vue'), meta: { ...meta, title: '热力图示例 1' } },
|
||||
{ path: 'charts/heatmap/demo2', name: `${pre}charts-heatmap-demo2`, component: _import('demo/plugins/charts/heatmap/demo2/index.vue'), meta: { ...meta, title: '热力图示例 2' } },
|
||||
{ path: 'charts/scatter/demo1', name: `${pre}charts-scatter-demo1`, component: _import('demo/plugins/charts/scatter/demo1/index.vue'), meta: { ...meta, title: '散点图示例 1' } },
|
||||
{ path: 'charts/scatter/demo2', name: `${pre}charts-scatter-demo2`, component: _import('demo/plugins/charts/scatter/demo2/index.vue'), meta: { ...meta, title: '散点图示例 2' } },
|
||||
{ path: 'charts/candle/demo1', name: `${pre}charts-candle-demo1`, component: _import('demo/plugins/charts/candle/demo1/index.vue'), meta: { ...meta, title: 'K线图示例 1' } },
|
||||
{ path: 'charts/candle/demo2', name: `${pre}charts-candle-demo2`, component: _import('demo/plugins/charts/candle/demo2/index.vue'), meta: { ...meta, title: 'K线图示例 2' } },
|
||||
{ path: 'charts/candle/demo3', name: `${pre}charts-candle-demo3`, component: _import('demo/plugins/charts/candle/demo3/index.vue'), meta: { ...meta, title: 'K线图示例 3' } },
|
||||
{ path: 'charts/gauge/demo1', name: `${pre}charts-gauge-demo1`, component: _import('demo/plugins/charts/gauge/demo1/index.vue'), meta: { ...meta, title: '仪表盘示例 1' } },
|
||||
{ path: 'charts/tree/demo1', name: `${pre}charts-tree-demo1`, component: _import('demo/plugins/charts/tree/demo1/index.vue'), meta: { ...meta, title: '树图示例 1' } }
|
||||
])('demo-plugins-')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
import playground from './modules/playground'
|
||||
import frame from './modules/frame'
|
||||
import d2Crud from './modules/d2-crud'
|
||||
import d2CrudPlus from './modules/d2-crud-plus'
|
||||
import plugins from './modules/plugins'
|
||||
import charts from './modules/charts'
|
||||
import components from './modules/components'
|
||||
import business from './modules/business'
|
||||
|
||||
import layoutHeaderAside from '@/layout/header-aside'
|
||||
|
||||
|
|
@ -57,12 +55,10 @@ const frameIn = [
|
|||
]
|
||||
},
|
||||
playground,
|
||||
frame,
|
||||
d2Crud,
|
||||
d2CrudPlus,
|
||||
plugins,
|
||||
charts,
|
||||
components,
|
||||
business
|
||||
components
|
||||
]
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<d2-container type="ghost">
|
||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||
<d2-module-index-menu :menu="menu"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menu from '@/menu/modules/demo-business'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
menu,
|
||||
banner: {
|
||||
title: 'DEMOS',
|
||||
subTitle: '提供借鉴和参考的页面'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
<template>
|
||||
<d2-container
|
||||
type="card"
|
||||
class="page">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
label-width="80px"
|
||||
class="page--form">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input type="textarea" v-model="form.address"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit">修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex'
|
||||
import base from './mixins/index'
|
||||
export default {
|
||||
mixins: [
|
||||
base
|
||||
],
|
||||
// 第一次进入或从其他组件对应路由进入时触发
|
||||
beforeRouteEnter (to, from, next) {
|
||||
const id = to.params.id
|
||||
if (id) {
|
||||
next(async instance => {
|
||||
if (from.name === 'demo-business-issues-142') {
|
||||
await instance.getFormData(id)
|
||||
instance.saveDataToDb()
|
||||
} else {
|
||||
instance.loadDataFromDb(to)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 在同一组件对应的多个路由间切换时触发
|
||||
beforeRouteUpdate (to, from, next) {
|
||||
const id = to.params.id
|
||||
if (id) {
|
||||
this.loadDataFromDb(to)
|
||||
next()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 表单变化的时候更新持久化
|
||||
form: {
|
||||
handler () {
|
||||
this.saveDataToDb()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/db', [
|
||||
'pageSet',
|
||||
'pageGet'
|
||||
]),
|
||||
// 将页面数据同步到持久化存储
|
||||
saveDataToDb () {
|
||||
this.pageSet({ instance: this, user: true })
|
||||
},
|
||||
// 从持久化存储恢复数据到页面
|
||||
async loadDataFromDb (to) {
|
||||
const instance = {
|
||||
$route: {
|
||||
fullPath: to.fullPath
|
||||
},
|
||||
$data: {}
|
||||
}
|
||||
const data = await this.pageGet({
|
||||
instance,
|
||||
user: true
|
||||
})
|
||||
for (const key in data) {
|
||||
this[key] = data[key]
|
||||
}
|
||||
this.$message.success('loadDataFromDb')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
.page--form {
|
||||
max-width: 460px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
<template>
|
||||
<d2-container
|
||||
type="card"
|
||||
class="page">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
label-width="80px"
|
||||
class="page--form">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input type="textarea" v-model="form.address"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSubmit">修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import base from './mixins/index'
|
||||
export default {
|
||||
mixins: [
|
||||
base
|
||||
],
|
||||
// 第一次进入或从其他组件对应路由进入时触发
|
||||
beforeRouteEnter (to, from, next) {
|
||||
const id = to.params.id
|
||||
if (id) {
|
||||
next(instance => {
|
||||
instance.resetFormData()
|
||||
instance.getFormData(id)
|
||||
})
|
||||
} else {
|
||||
next(new Error('未指定ID'))
|
||||
}
|
||||
},
|
||||
// 在同一组件对应的多个路由间切换时触发
|
||||
beforeRouteUpdate (to, from, next) {
|
||||
const id = to.params.id
|
||||
if (id) {
|
||||
this.resetFormData()
|
||||
this.getFormData(id)
|
||||
next()
|
||||
} else {
|
||||
next(new Error('未指定ID'))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
.page--form {
|
||||
max-width: 460px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<template>
|
||||
<d2-container type="card">
|
||||
<d2-crud
|
||||
v-bind="crud"
|
||||
@edit="({ index, row }) => goToEditPage('demo-business-issues-142-edit', row.id)"
|
||||
@edit-cache-db="({ index, row }) => goToEditPage('demo-business-issues-142-edit-cache-db', row.id)"
|
||||
style="margin: -15px 0;"/>
|
||||
<d2-link-btn
|
||||
slot="footer"
|
||||
title="issue #142"
|
||||
link="https://github.com/d2-projects/d2-admin/issues/142"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
crud: {
|
||||
columns: [
|
||||
{ title: '姓名', key: 'name', width: 100 },
|
||||
{ title: '地址', key: 'address' }
|
||||
],
|
||||
data: [],
|
||||
options: {
|
||||
border: true,
|
||||
size: 'mini'
|
||||
},
|
||||
rowHandle: {
|
||||
align: 'center',
|
||||
width: 240,
|
||||
custom: [
|
||||
{
|
||||
text: '无缓存编辑',
|
||||
size: 'mini',
|
||||
emit: 'edit'
|
||||
},
|
||||
{
|
||||
text: '带缓存编辑 DB',
|
||||
size: 'mini',
|
||||
emit: 'edit-cache-db'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
// 请求表格数据
|
||||
async getTableData () {
|
||||
try {
|
||||
const res = await this.$api.DEMO_BUSINESS_ISSUE_142_LIST()
|
||||
this.crud.data = res.list
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 跳转到编辑页面
|
||||
goToEditPage (name, id) {
|
||||
this.$router.push({
|
||||
name,
|
||||
params: {
|
||||
id
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
address: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// [业务逻辑] 重置表单
|
||||
resetFormData () {
|
||||
this.form = {
|
||||
name: '',
|
||||
address: ''
|
||||
}
|
||||
},
|
||||
// [业务逻辑] 根据 id 获取数据
|
||||
async getFormData (id) {
|
||||
// 重置表单
|
||||
this.resetFormData()
|
||||
// 请求数据
|
||||
try {
|
||||
const res = await this.$api.DEMO_BUSINESS_ISSUE_142_DETAIL(id)
|
||||
const { name, address } = res
|
||||
this.form = { name, address }
|
||||
this.$message.success('getFormData')
|
||||
} catch (error) {
|
||||
console.log('error', error)
|
||||
}
|
||||
},
|
||||
// [业务逻辑] 提交
|
||||
handleSubmit () {
|
||||
this.$notify({
|
||||
title: 'Submit',
|
||||
message: '提交了表单',
|
||||
type: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
<template>
|
||||
<el-popover
|
||||
:placement="popoverPlacement"
|
||||
:title="popoverTitle"
|
||||
:width="popoverWidth"
|
||||
trigger="hover">
|
||||
<el-switch
|
||||
v-model="currentValue"
|
||||
:active-color="activeColor"
|
||||
:inactive-color="inactiveColor"
|
||||
:active-text="activeText"
|
||||
:inactive-text="inactiveText"
|
||||
:disabled="disabled"
|
||||
@change="handleChange">
|
||||
</el-switch>
|
||||
<span slot="reference">
|
||||
<slot v-if="value" name="active"/>
|
||||
<slot v-else name="inactive"/>
|
||||
</span>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
default: false
|
||||
},
|
||||
popoverPlacement: {
|
||||
default: 'left'
|
||||
},
|
||||
popoverTitle: {
|
||||
default: '修改'
|
||||
},
|
||||
popoverWidth: {
|
||||
default: '150'
|
||||
},
|
||||
activeColor: {
|
||||
default: '#67C23A'
|
||||
},
|
||||
inactiveColor: {
|
||||
default: '#F56C6C'
|
||||
},
|
||||
activeText: {
|
||||
default: '正常'
|
||||
},
|
||||
inactiveText: {
|
||||
default: '禁用'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentValue: false,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler (val) {
|
||||
this.currentValue = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (val) {
|
||||
this.disabled = true
|
||||
this.$message({
|
||||
message: '正在发送请求',
|
||||
type: 'info'
|
||||
})
|
||||
// 请将 setTimeout 修改为您的异步请求
|
||||
setTimeout(() => {
|
||||
this.disabled = false
|
||||
this.$message({
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('change', val)
|
||||
// 如果修改失败的话需要在这里手动将 currentValue 复原
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<template>
|
||||
<span slot="reference">
|
||||
<d2-icon
|
||||
v-if="disabled"
|
||||
name="hourglass-start"
|
||||
style="font-size: 14px; line-height: 32px; color: #909399;"/>
|
||||
<span @click="handleClick">
|
||||
<slot
|
||||
v-if="!disabled && value"
|
||||
name="active"/>
|
||||
<slot
|
||||
v-if="!disabled && !value"
|
||||
name="inactive"/>
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentValue: false,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler (val) {
|
||||
this.currentValue = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
// 这里先赋值是为了和 TypeControl 使用一样的 handleChange
|
||||
this.currentValue = !this.currentValue
|
||||
this.handleChange(this.currentValue)
|
||||
},
|
||||
handleChange (val) {
|
||||
this.disabled = true
|
||||
this.$message({
|
||||
message: '正在发送请求',
|
||||
type: 'info'
|
||||
})
|
||||
// 请将 setTimeout 修改为您的异步请求
|
||||
setTimeout(() => {
|
||||
this.disabled = false
|
||||
this.$message({
|
||||
message: '修改成功',
|
||||
type: 'success'
|
||||
})
|
||||
this.$emit('change', val)
|
||||
// 如果修改失败的话需要在这里手动将 currentValue 复原
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<el-pagination
|
||||
:current-page="current"
|
||||
:page-size="size"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
style="margin: -10px;"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange">
|
||||
</el-pagination>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
current: {
|
||||
default: 0
|
||||
},
|
||||
size: {
|
||||
default: 0
|
||||
},
|
||||
total: {
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange (val) {
|
||||
this.$emit('change', {
|
||||
current: this.current,
|
||||
size: val,
|
||||
total: this.total
|
||||
})
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
this.$emit('change', {
|
||||
current: val,
|
||||
size: this.size,
|
||||
total: this.total
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
<template>
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="form"
|
||||
size="mini"
|
||||
style="margin-bottom: -18px;">
|
||||
|
||||
<el-form-item label="状态" prop="type">
|
||||
<el-select
|
||||
v-model="form.type"
|
||||
placeholder="状态选择"
|
||||
style="width: 100px;">
|
||||
<el-option label="状态 1" value="1"/>
|
||||
<el-option label="状态 2" value="2"/>
|
||||
<el-option label="状态 3" value="3"/>
|
||||
<el-option label="状态 4" value="4"/>
|
||||
<el-option label="状态 5" value="5"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="用户" prop="user">
|
||||
<el-input
|
||||
v-model="form.user"
|
||||
placeholder="用户"
|
||||
style="width: 100px;"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="卡密" prop="key">
|
||||
<el-input
|
||||
v-model="form.key"
|
||||
placeholder="卡密"
|
||||
style="width: 120px;"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="备注" prop="note">
|
||||
<el-input
|
||||
v-model="form.note"
|
||||
placeholder="备注"
|
||||
style="width: 120px;"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleFormSubmit">
|
||||
<d2-icon name="search"/>
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="handleFormReset">
|
||||
<d2-icon name="refresh"/>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
type: '1',
|
||||
user: 'FairyEver',
|
||||
key: '',
|
||||
note: ''
|
||||
},
|
||||
rules: {
|
||||
type: [{ required: true, message: '请选择一个状态', trigger: 'change' }],
|
||||
user: [{ required: true, message: '请输入用户', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFormSubmit () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$emit('submit', this.form)
|
||||
} else {
|
||||
this.$notify.error({
|
||||
title: '错误',
|
||||
message: '表单校验失败'
|
||||
})
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleFormReset () {
|
||||
this.$refs.form.resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,230 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form
|
||||
:inline="true"
|
||||
size="mini">
|
||||
<el-form-item :label="`已选数据下载 [ ${currentTableData.length} ]`">
|
||||
<el-button-group>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
:disabled="currentTableData.length === 0"
|
||||
@click="handleDownloadXlsx(currentTableData)">
|
||||
xlsx
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
:disabled="currentTableData.length === 0"
|
||||
@click="handleDownloadCsv(currentTableData)">
|
||||
csv
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="`已选数据下载 [ ${multipleSelection.length} ]`">
|
||||
<el-button-group>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
:disabled="multipleSelection.length === 0"
|
||||
@click="handleDownloadXlsx(multipleSelection)">
|
||||
xlsx
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
:disabled="multipleSelection.length === 0"
|
||||
@click="handleDownloadCsv(multipleSelection)">
|
||||
csv
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table
|
||||
:data="currentTableData"
|
||||
v-loading="loading"
|
||||
size="mini"
|
||||
stripe
|
||||
style="width: 100%;"
|
||||
@selection-change="handleSelectionChange">
|
||||
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="卡密" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.key}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="面值" width="60" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
size="mini"
|
||||
type="success">
|
||||
{{scope.row.value}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" width="50" align="center">
|
||||
<template slot-scope="scope">
|
||||
<boolean-control
|
||||
:value="scope.row.type"
|
||||
@change="(val) => {
|
||||
handleSwitchChange(val, scope.$index)
|
||||
}">
|
||||
<d2-icon
|
||||
name="check-circle"
|
||||
style="font-size: 20px; line-height: 32px; color: #67C23A;"
|
||||
slot="active"/>
|
||||
<d2-icon
|
||||
name="times-circle"
|
||||
style="font-size: 20px; line-height: 32px; color: #F56C6C;"
|
||||
slot="inactive"/>
|
||||
</boolean-control>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" width="50" align="center">
|
||||
<template slot-scope="scope">
|
||||
<boolean-control-mini
|
||||
:value="scope.row.type"
|
||||
@change="(val) => {
|
||||
handleSwitchChange(val, scope.$index)
|
||||
}">
|
||||
<d2-icon
|
||||
name="check-circle"
|
||||
style="font-size: 20px; line-height: 32px; color: #67C23A;"
|
||||
slot="active"/>
|
||||
<d2-icon
|
||||
name="times-circle"
|
||||
style="font-size: 20px; line-height: 32px; color: #F56C6C;"
|
||||
slot="inactive"/>
|
||||
</boolean-control-mini>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="管理员" width="60">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.admin}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="管理员备注" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.adminNote}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" width="150" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.dateTimeCreat}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="使用状态" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
size="mini"
|
||||
:type="scope.row.used ? 'info' : ''">
|
||||
{{scope.row.used ? '已使用' : '未使用'}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="使用时间" width="150" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.dateTimeUse}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BooleanControl from '../BooleanControl'
|
||||
import BooleanControlMini from '../BooleanControlMini'
|
||||
export default {
|
||||
components: {
|
||||
BooleanControl,
|
||||
BooleanControlMini
|
||||
},
|
||||
props: {
|
||||
tableData: {
|
||||
default: () => []
|
||||
},
|
||||
loading: {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentTableData: [],
|
||||
multipleSelection: [],
|
||||
downloadColumns: [
|
||||
{ label: '卡密', prop: 'key' },
|
||||
{ label: '面值', prop: 'value' },
|
||||
{ label: '状态', prop: 'type' },
|
||||
{ label: '管理员', prop: 'admin' },
|
||||
{ label: '管理员备注', prop: 'adminNote' },
|
||||
{ label: '创建时间', prop: 'dateTimeCreat' },
|
||||
{ label: '使用状态', prop: 'used' },
|
||||
{ label: '使用时间', prop: 'dateTimeUse' }
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tableData: {
|
||||
handler (val) {
|
||||
this.currentTableData = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSwitchChange (val, index) {
|
||||
const oldValue = this.currentTableData[index]
|
||||
this.$set(this.currentTableData, index, {
|
||||
...oldValue,
|
||||
type: val
|
||||
})
|
||||
// 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
|
||||
},
|
||||
handleSelectionChange (val) {
|
||||
this.multipleSelection = val
|
||||
},
|
||||
downloadDataTranslate (data) {
|
||||
return data.map(row => ({
|
||||
...row,
|
||||
type: row.type ? '禁用' : '正常',
|
||||
used: row.used ? '已使用' : '未使用'
|
||||
}))
|
||||
},
|
||||
handleDownloadXlsx (data) {
|
||||
this.$export.excel({
|
||||
title: 'D2Admin 表格示例',
|
||||
columns: this.downloadColumns,
|
||||
data: this.downloadDataTranslate(data)
|
||||
})
|
||||
.then(() => {
|
||||
this.$message('导出表格成功')
|
||||
})
|
||||
},
|
||||
handleDownloadCsv (data) {
|
||||
this.$export.csv({
|
||||
title: 'D2Admin 表格示例',
|
||||
columns: this.downloadColumns,
|
||||
data: this.downloadDataTranslate(data)
|
||||
})
|
||||
.then(() => {
|
||||
this.$message('导出CSV成功')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<template>
|
||||
<d2-container>
|
||||
<demo-page-header
|
||||
slot="header"
|
||||
@submit="handleSubmit"
|
||||
ref="header"/>
|
||||
<demo-page-main
|
||||
:table-data="table"
|
||||
:loading="loading"/>
|
||||
<demo-page-footer
|
||||
slot="footer"
|
||||
:current="page.pageCurrent"
|
||||
:size="page.pageSize"
|
||||
:total="page.pageTotal"
|
||||
@change="handlePaginationChange"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// name 值和本页的 $route.name 一致才可以缓存页面
|
||||
name: 'demo-business-table-1',
|
||||
components: {
|
||||
DemoPageHeader: () => import('./componnets/PageHeader'),
|
||||
DemoPageMain: () => import('./componnets/PageMain'),
|
||||
DemoPageFooter: () => import('./componnets/PageFooter')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
table: [],
|
||||
loading: false,
|
||||
page: {
|
||||
pageCurrent: 1,
|
||||
pageSize: 10,
|
||||
pageTotal: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handlePaginationChange (val) {
|
||||
this.$notify({
|
||||
title: '分页变化',
|
||||
message: `当前第${val.current}页 共${val.total}条 每页${val.size}条`
|
||||
})
|
||||
this.page = {
|
||||
pageCurrent: val.current,
|
||||
pageSize: val.size,
|
||||
pageTotal: val.total
|
||||
}
|
||||
// nextTick 只是为了优化示例中 notify 的显示
|
||||
await this.$nextTick()
|
||||
this.$refs.header.handleFormSubmit()
|
||||
},
|
||||
handleSubmit (form) {
|
||||
this.loading = true
|
||||
this.$notify({
|
||||
title: '开始请求模拟表格数据'
|
||||
})
|
||||
this.$api.DEMO_BUSINESS_TABLE_1_LIST({
|
||||
...form,
|
||||
...this.page
|
||||
})
|
||||
.then(res => {
|
||||
this.loading = false
|
||||
this.$notify({
|
||||
title: '模拟表格数据请求完毕'
|
||||
})
|
||||
this.table = res.list
|
||||
this.page.pageTotal = res.page.total
|
||||
})
|
||||
.catch(err => {
|
||||
this.loading = false
|
||||
this.$notify({
|
||||
title: '模拟表格数据请求异常'
|
||||
})
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<d2-container type="ghost">
|
||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||
<d2-module-index-menu :menu="menu"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menu from '@/menu/modules/demo-charts'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
menu,
|
||||
banner: {
|
||||
title: 'CHARTS',
|
||||
subTitle: '图表示例'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
// 请求真实后端
|
||||
// import { request } from '@/api/service'
|
||||
|
||||
// 请求模拟数据
|
||||
import { requestForMock } from '@/api/service'
|
||||
|
||||
export function GetList (query) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/test/page',
|
||||
method: 'get',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
export function AddObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/test/add',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function UpdateObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/test/update',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
export function DelObj (id) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/test/delete',
|
||||
method: 'post',
|
||||
data: { id }
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
export const crudOptions = (vm) => {
|
||||
return {
|
||||
viewOptions: {
|
||||
componentType: 'row' // 查看对话框字段使用行组件
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
width: 90,
|
||||
form: {
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date',
|
||||
type: 'date'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
sortable: true,
|
||||
search: { disabled: false },
|
||||
type: 'select',
|
||||
dict: {
|
||||
url: '/d2crudplus/dicts/OpenStatusEnum'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '地区',
|
||||
key: 'address',
|
||||
sortable: true,
|
||||
width: 180,
|
||||
search: { disabled: false },
|
||||
type: 'select',
|
||||
form: {
|
||||
component: {
|
||||
props: {
|
||||
multiple: true // 多选
|
||||
}
|
||||
}
|
||||
},
|
||||
dict: {
|
||||
data: [{ value: 'sz', label: '深圳' }, { value: 'gz', label: '广州' }, { value: 'wh', label: '武汉' }, { value: 'sh', label: '上海' }]
|
||||
},
|
||||
component: { props: { color: 'auto' } } // 自动染色
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<d2-container :class="{'page-compact':crud.pageOptions.compact}">
|
||||
<template slot="header">简单示例
|
||||
<d2-link-btn style='float:right' title="更多示例" link="http://qiniu.veryreader.com/D2CrudPlusExample/"/>
|
||||
</template>
|
||||
<d2-crud-x
|
||||
ref="d2Crud"
|
||||
v-bind="_crudProps"
|
||||
v-on="_crudListeners"
|
||||
>
|
||||
<div slot="header">
|
||||
<crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" />
|
||||
<el-button-group>
|
||||
<el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
|
||||
</el-button-group>
|
||||
<crud-toolbar :search.sync="crud.searchOptions.show"
|
||||
:compact.sync="crud.pageOptions.compact"
|
||||
:columns="crud.columns"
|
||||
@refresh="doRefresh()"
|
||||
@columns-filter-changed="handleColumnsFilterChanged"/>
|
||||
|
||||
</div>
|
||||
</d2-crud-x>
|
||||
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from './api'
|
||||
import { crudOptions } from './crud'
|
||||
import { d2CrudPlus } from 'd2-crud-plus'
|
||||
export default {
|
||||
name: 'formSelect',
|
||||
mixins: [d2CrudPlus.crud],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCrudOptions () {
|
||||
return crudOptions(this)
|
||||
},
|
||||
pageRequest (query) {
|
||||
return api.GetList(query)
|
||||
},
|
||||
addRequest (row) {
|
||||
return api.AddObj(row)
|
||||
},
|
||||
updateRequest (row) {
|
||||
return api.UpdateObj(row)
|
||||
},
|
||||
delRequest (row) {
|
||||
return api.DelObj(row.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import mockUtil from '../mock/base'
|
||||
const options = {
|
||||
name: 'd2crudplus/test',
|
||||
idGenerator: 0
|
||||
}
|
||||
const list = [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
status: '0',
|
||||
address: 'sz'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
status: '1',
|
||||
address: 'sh,sz'
|
||||
},
|
||||
{
|
||||
date: 2232433534511,
|
||||
status: '1',
|
||||
address: 'gz'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
status: '2',
|
||||
address: 'wh,gz'
|
||||
}
|
||||
]
|
||||
const openStatus = [
|
||||
{ value: '1', label: '打开', color: 'success' },
|
||||
{ value: '2', label: '停止', color: 'info' },
|
||||
{ value: '0', label: '关闭', color: 'danger' }
|
||||
]
|
||||
|
||||
options.list = list
|
||||
const mock = mockUtil.buildMock(options)
|
||||
mock.push(
|
||||
{
|
||||
path: '/d2crudplus/dicts/OpenStatusEnum',
|
||||
method: 'get',
|
||||
handle ({ body }) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: openStatus
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
export default mock
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
// 请求真实后端
|
||||
// import { request } from '@/api/service'
|
||||
|
||||
// 请求模拟数据
|
||||
import { requestForMock } from '@/api/service'
|
||||
|
||||
export function GetList (query) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/group/page',
|
||||
method: 'get',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
export function AddObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/group/add',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function UpdateObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/group/update',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
export function DelObj (id) {
|
||||
return requestForMock({
|
||||
url: '/d2crudplus/group/delete',
|
||||
method: 'post',
|
||||
data: { id }
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
export const crudOptions = {
|
||||
options: {
|
||||
height: '100%' // 表格高度100%, 使用toolbar必须设置
|
||||
},
|
||||
viewOptions: {
|
||||
disabled: false
|
||||
},
|
||||
rowHandle: {
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
width: 90,
|
||||
form: {
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '商品标题',
|
||||
key: 'title',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '商品代码',
|
||||
key: 'code',
|
||||
search: { disabled: false },
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '图片',
|
||||
key: 'images',
|
||||
sortable: true,
|
||||
type: 'image-uploader',
|
||||
form: {
|
||||
component: {
|
||||
span: 24
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '价格',
|
||||
key: 'price',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: '库存',
|
||||
key: 'store',
|
||||
sortable: true,
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
title: '简介',
|
||||
key: 'intro',
|
||||
sortable: true,
|
||||
type: 'text-area'
|
||||
},
|
||||
{
|
||||
title: '详情',
|
||||
key: 'content',
|
||||
sortable: true,
|
||||
type: 'editor-quill',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: '自定义',
|
||||
key: 'custom',
|
||||
sortable: true,
|
||||
form: {
|
||||
component: {
|
||||
span: 24
|
||||
},
|
||||
slot: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '自定义2',
|
||||
key: 'custom2',
|
||||
sortable: true,
|
||||
form: {
|
||||
component: {
|
||||
span: 24
|
||||
},
|
||||
slot: true
|
||||
}
|
||||
}
|
||||
],
|
||||
formGroup: {
|
||||
type: 'collapse', // tab
|
||||
accordion: false,
|
||||
groups: {
|
||||
base: {
|
||||
title: '商品基础',
|
||||
icon: 'el-icon-goods',
|
||||
columns: ['title', 'code', 'images']
|
||||
},
|
||||
price: {
|
||||
title: '库存价格',
|
||||
icon: 'el-icon-price-tag',
|
||||
columns: ['store', 'price']
|
||||
},
|
||||
info: {
|
||||
title: '详情',
|
||||
collapsed: false,
|
||||
icon: 'el-icon-warning-outline',
|
||||
columns: ['intro', 'content']
|
||||
},
|
||||
custom: {
|
||||
title: '自定义',
|
||||
collapsed: true,
|
||||
show (context) {
|
||||
console.log('custom context', context)
|
||||
return context.mode === 'view'
|
||||
},
|
||||
disabled: false,
|
||||
icon: 'el-icon-warning-outline',
|
||||
columns: ['custom', 'custom2']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<d2-container :class="{'page-compact':crud.pageOptions.compact}">
|
||||
<template slot="header">表单分组
|
||||
<d2-link-btn style='float:right' title="更多示例" link="http://qiniu.veryreader.com/D2CrudPlusExample/"/>
|
||||
</template>
|
||||
<d2-crud-x
|
||||
ref="d2Crud"
|
||||
v-bind="_crudProps"
|
||||
v-on="_crudListeners"
|
||||
>
|
||||
<div slot="header">
|
||||
<crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" />
|
||||
<el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
|
||||
<crud-toolbar :search.sync="crud.searchOptions.show"
|
||||
:compact.sync="crud.pageOptions.compact"
|
||||
:columns="crud.columns"
|
||||
@refresh="doRefresh()"
|
||||
@columns-filter-changed="handleColumnsFilterChanged"/>
|
||||
</div>
|
||||
<div slot="priceGroupTitleSlot" slot-scope="scope">
|
||||
<h3 style="display: inline;" class="group-title"> <i class="header-icon" :class="scope.group.icon"/> {{scope.group.title}}</h3>
|
||||
<span style="margin-left:10px">（我是自定义标题）</span>
|
||||
</div>
|
||||
|
||||
<div slot="customFormSlot" >
|
||||
<span >自定义选项</span>
|
||||
</div>
|
||||
|
||||
</d2-crud-x>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { crudOptions } from './crud'
|
||||
import { d2CrudPlus } from 'd2-crud-plus'
|
||||
import { GetList, AddObj, UpdateObj, DelObj } from './api'
|
||||
export default {
|
||||
name: 'formGroup',
|
||||
mixins: [d2CrudPlus.crud],
|
||||
methods: {
|
||||
getCrudOptions () {
|
||||
return crudOptions
|
||||
},
|
||||
pageRequest (query) {
|
||||
return GetList(query)
|
||||
},
|
||||
addRequest (row) {
|
||||
return AddObj(row)
|
||||
},
|
||||
updateRequest (row) {
|
||||
return UpdateObj(row)
|
||||
},
|
||||
delRequest (row) {
|
||||
return DelObj(row.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.d2-crud .group-title{color:#67c23a}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import mockUtil from '../mock/base'
|
||||
|
||||
const options = {
|
||||
name: 'd2crudplus/group',
|
||||
idGenerator: 0
|
||||
}
|
||||
const list = [
|
||||
{
|
||||
title: '无线充电宝',
|
||||
code: '100001',
|
||||
images: 'https://img0.bdstatic.com/static/searchdetail/img/logo-2X_0c4ef02.png',
|
||||
price: 100,
|
||||
stock: 99,
|
||||
intro: '30000毫安超大容量移动电源充电宝官方原装正品专用便携',
|
||||
content: ''
|
||||
}
|
||||
]
|
||||
options.list = list
|
||||
const mock = mockUtil.buildMock(options)
|
||||
export default mock
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
export default `columns: [
|
||||
{
|
||||
title: '日期', //字段名称
|
||||
key: 'date', //字段key
|
||||
type: 'date', //字段类型，添加、修改、查询将自动生成相应表单组件
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
type: 'select', //选择框，默认单选
|
||||
dict: { url: '/dicts/OpenStatusEnum' }//远程数据字典
|
||||
},
|
||||
{
|
||||
title: '地区',
|
||||
key: 'address',
|
||||
type: 'select', //选择框
|
||||
form: { //表单组件自定义配置
|
||||
component: { //支持任何v-model组件
|
||||
props: { multiple: true } // 此处配置选择框为多选
|
||||
}
|
||||
},
|
||||
dict: {
|
||||
data: [ //本地数据字典
|
||||
{ value: 'sz', label: '深圳' },
|
||||
{ value: 'gz', label: '广州' },
|
||||
{ value: 'wh', label: '武汉' },
|
||||
{ value: 'sh', label: '上海' }
|
||||
]
|
||||
}
|
||||
}
|
||||
]`
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 712 KiB |
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<d2-container type="ghost">
|
||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||
<el-tabs v-model="tab">
|
||||
<el-tab-pane label="效果" name="result">
|
||||
<img src="./image/gif.webp" style="width: 600px; border: 1px solid #E4E7ED; border-radius: 4px;">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="代码" name="code">
|
||||
<d2-highlight :code="code" lang="javascript"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import code from './code'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
code,
|
||||
tab: 'result',
|
||||
banner: {
|
||||
title: 'D2 CRUD PLUS',
|
||||
subTitle: 'D2 Crud Plus 是一个面向配置的Crud开发框架，辅助d2-crud和d2-crud-x，让开发crud更简单',
|
||||
link: 'https://github.com/greper/d2-crud-plus'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
import Vue from 'vue'
|
||||
import d2CrudX from 'd2-crud-x'
|
||||
import { d2CrudPlus } from 'd2-crud-plus'
|
||||
import { D2pAreaSelector, D2pFileUploader, D2pIconSelector, D2pTreeSelector, D2pFullEditor, D2pUploader, D2pDemoExtend } from 'd2p-extends' // 源码方式引入，上传组件支持懒加载
|
||||
// http请求
|
||||
import { requestForMock } from '@/api/service'
|
||||
import './mock' // 模拟数据
|
||||
|
||||
// 按如下重命名引入可与官方版共存，index.vue中标签用<d2-crud-x />使用加强版
|
||||
// 不传name，则d2CrudX的标签仍为<d2-crud>,不可与官方版共存
|
||||
Vue.use(d2CrudX, { name: 'd2-crud-x' })
|
||||
|
||||
// 引入d2CrudPlus
|
||||
Vue.use(d2CrudPlus, {
|
||||
starTip: false,
|
||||
getRemoteDictFunc (url, dict) {
|
||||
// 此处配置你的字典http请求方法
|
||||
// 实际使用请改成request
|
||||
return requestForMock({
|
||||
url: url,
|
||||
data: dict.body,
|
||||
method: 'get'
|
||||
})
|
||||
},
|
||||
commonOption () { // 公共配置
|
||||
return {
|
||||
format: {
|
||||
response (res) {
|
||||
return res
|
||||
},
|
||||
page: { // page接口返回的数据结构配置，
|
||||
request: {
|
||||
current: 'current',
|
||||
size: 'size'
|
||||
},
|
||||
response: {
|
||||
current: 'current', // 当前页码 ret.data.current
|
||||
size: 'size', // 当前页码 ret.data.current
|
||||
// size: (data) => { return data.size }, // 每页条数，ret.data.size, 你也可以配置一个方法，自定义返回
|
||||
total: 'total', // 总记录数 ret.data.total
|
||||
records: 'records' // 列表数组 ret.data.records
|
||||
}
|
||||
}
|
||||
},
|
||||
pageOptions: {
|
||||
compact: true // 紧凑型页面模式
|
||||
},
|
||||
options: {
|
||||
size: 'small',
|
||||
height: '100%' // 表格高度100%
|
||||
},
|
||||
formOptions: {
|
||||
nullToBlankStr: true, // 提交修改表单时，将undefinded的数据修改为空字符串''，可以解决无法清空字段的问题
|
||||
defaultSpan: 12 // 默认的表单 span
|
||||
},
|
||||
viewOptions: {
|
||||
disabled: false,
|
||||
componentType: 'form' // 【form,row】 表单组件 或 行组件展示
|
||||
},
|
||||
rowHandle: {
|
||||
width: 260,
|
||||
edit: {
|
||||
type: 'primary'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 安装扩展插件
|
||||
Vue.use(D2pTreeSelector)
|
||||
Vue.use(D2pAreaSelector)
|
||||
Vue.use(D2pIconSelector)
|
||||
Vue.use(D2pFullEditor, {
|
||||
ueditor: {
|
||||
serverUrl: '/api/ueditor/'
|
||||
}
|
||||
})
|
||||
Vue.use(D2pDemoExtend)
|
||||
Vue.use(D2pFileUploader)
|
||||
Vue.use(D2pUploader, {
|
||||
defaultType: 'form',
|
||||
form: {
|
||||
action: 'http://d2p.veryreader.com:7070/api/upload/form/upload',
|
||||
name: 'file',
|
||||
successHandle (res) { // 上传成功后，后台返回结果处理
|
||||
return { url: 'http://d2p.veryreader.com:7070' + res.data } // data是该文件的url
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
function copyList (originList, newList, options, parentId) {
|
||||
for (const item of originList) {
|
||||
const newItem = { ...item, parentId }
|
||||
newItem.id = ++options.idGenerator
|
||||
newList.push(newItem)
|
||||
if (item.children != null) {
|
||||
newItem.children = []
|
||||
copyList(item.children, newItem.children, options, newItem.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function delById (req, list) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const item = list[i]
|
||||
if ((item.id) === parseInt(req.params.id)) {
|
||||
console.log('remove i')
|
||||
list.splice(i, 1)
|
||||
break
|
||||
}
|
||||
if (item.children != null && item.children.length > 0) {
|
||||
delById(req, item.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
findById (id, list) {
|
||||
for (const item of list) {
|
||||
if (item.id === id) {
|
||||
return item
|
||||
}
|
||||
if (item.children != null && item.children.length > 0) {
|
||||
const sub = this.findById(id, item.children)
|
||||
if (sub != null) {
|
||||
return sub
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
buildMock (options) {
|
||||
const name = options.name
|
||||
if (options.copyTimes == null) {
|
||||
options.copyTimes = 29
|
||||
}
|
||||
const list = []
|
||||
for (let i = 0; i < options.copyTimes; i++) {
|
||||
copyList(options.list, list, options)
|
||||
}
|
||||
options.list = list
|
||||
return [
|
||||
{
|
||||
path: '/' + name + '/page',
|
||||
method: 'get',
|
||||
handle (req) {
|
||||
let data = list
|
||||
let size = 20
|
||||
let current = 1
|
||||
for (const item of list) {
|
||||
if (item.children != null && item.children.length === 0) {
|
||||
item.hasChildren = false
|
||||
item.lazy = false
|
||||
}
|
||||
}
|
||||
if (req != null && req.body != null) {
|
||||
if (req.body.size != null) {
|
||||
size = parseInt(req.body.size)
|
||||
}
|
||||
if (req.body.current != null) {
|
||||
current = parseInt(req.body.current)
|
||||
}
|
||||
const query = { ...req.body }
|
||||
delete query.current
|
||||
delete query.size
|
||||
if (Object.keys(query).length > 0) {
|
||||
data = list.filter(item => {
|
||||
let allFound = true // 是否所有条件都符合
|
||||
for (const key in query) {
|
||||
// 判定某一个条件
|
||||
const value = query[key]
|
||||
if (value == null || value === '') {
|
||||
continue
|
||||
}
|
||||
if (value instanceof Array) {
|
||||
// 如果条件中的value是数组的话，只要查到一个就行
|
||||
if (value.length === 0) {
|
||||
continue
|
||||
}
|
||||
let found = false
|
||||
for (const i of value) {
|
||||
if (item[key] instanceof Array) {
|
||||
for (const j of item[key]) {
|
||||
if (i === j) {
|
||||
found = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (found) {
|
||||
break
|
||||
}
|
||||
} else if (item[key] === i || ((typeof item[key]) === 'string' && item[key].indexOf(i + '') >= 0)) {
|
||||
found = true
|
||||
break
|
||||
}
|
||||
if (found) {
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
allFound = false
|
||||
}
|
||||
} else if (value instanceof Object) {
|
||||
for (const key2 in value) {
|
||||
const v = value[key2]
|
||||
if (v && v !== item[key][key2]) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
} else if (item[key] !== value) {
|
||||
allFound = false
|
||||
}
|
||||
}
|
||||
return allFound
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const start = size * (current - 1)
|
||||
let end = size * current
|
||||
if (data.length < end) {
|
||||
end = data.length
|
||||
}
|
||||
const records = data.slice(start, end)
|
||||
const maxPage = data.length % size === 0 ? data.length / size : Math.floor(data.length / size) + 1
|
||||
if (current > maxPage) {
|
||||
current = maxPage
|
||||
}
|
||||
if (current < 1) {
|
||||
current = 1
|
||||
}
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: {
|
||||
records: records,
|
||||
total: data.length,
|
||||
size: size,
|
||||
current: current
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/' + name + '/get',
|
||||
method: 'get',
|
||||
handle (req) {
|
||||
let id = req.params.id
|
||||
id = parseInt(id)
|
||||
let current = null
|
||||
for (const item of list) {
|
||||
if (item.id === id) {
|
||||
current = item
|
||||
break
|
||||
}
|
||||
}
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: current
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/' + name + '/add',
|
||||
method: 'post',
|
||||
handle (req) {
|
||||
req.body.id = ++options.idGenerator
|
||||
list.unshift(req.body)
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: null
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/' + name + '/update',
|
||||
method: 'post',
|
||||
handle (req) {
|
||||
for (const item of list) {
|
||||
if (item.id === req.body.id) {
|
||||
Object.assign(item, req.body)
|
||||
break
|
||||
}
|
||||
}
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: null
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/' + name + '/delete',
|
||||
method: 'post',
|
||||
handle (req) {
|
||||
delById(req, list)
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: null
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/' + name + '/batchDelete',
|
||||
method: 'post',
|
||||
handle (req) {
|
||||
const ids = req.body.ids
|
||||
for (let i = list.length - 1; i >= 0; i--) {
|
||||
const item = list[i]
|
||||
if (ids.indexOf(item.id) >= 0) {
|
||||
list.splice(i, 1)
|
||||
}
|
||||
}
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: null
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { mock } from '@/api/service'
|
||||
import * as tools from '@/api/tools'
|
||||
|
||||
const req = context => context.keys().map(context)
|
||||
|
||||
// 模拟数据
|
||||
const apiList = req(require.context('../', true, /mock\.js$/))
|
||||
.filter(e => e.default)
|
||||
.map(e => e.default)
|
||||
|
||||
apiList.forEach(apiFile => {
|
||||
for (const item of apiFile) {
|
||||
mock
|
||||
.onAny(new RegExp('^/api' + item.path))
|
||||
.reply(config => {
|
||||
console.log('------------fake request start -------------')
|
||||
console.log('request:', config)
|
||||
const data = config.data ? JSON.parse(config.data) : {}
|
||||
const query = config.url.indexOf('?') >= 0 ? config.url.substring(config.url.indexOf('?') + 1) : undefined
|
||||
let params = {}
|
||||
if (query) {
|
||||
const arr = query.split('&')
|
||||
for (const item of arr) {
|
||||
const kv = item.split('=')
|
||||
params[kv[0]] = kv[1]
|
||||
}
|
||||
} else {
|
||||
params = data
|
||||
}
|
||||
const req = {
|
||||
body: data,
|
||||
params: params
|
||||
}
|
||||
const ret = item.handle(req)
|
||||
console.log('response:', ret)
|
||||
console.log('------------fake request end-------------')
|
||||
if (ret.code === 0) {
|
||||
return tools.responseSuccess(ret.data, ret.msg)
|
||||
} else {
|
||||
return tools.responseError(ret.data, ret.msg, ret.code)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
// 请求模拟数据
|
||||
import { requestForMock } from '@/api/service'
|
||||
|
||||
export function GetList (query) {
|
||||
return requestForMock({
|
||||
url: '/d2-crud-plus/synthesize/page',
|
||||
method: 'get',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
export function AddObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2-crud-plus/synthesize/add',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function UpdateObj (obj) {
|
||||
return requestForMock({
|
||||
url: '/d2-crud-plus/synthesize/update',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
export function DelObj (id) {
|
||||
return requestForMock({
|
||||
url: '/d2-crud-plus/synthesize/delete',
|
||||
method: 'post',
|
||||
data: { id }
|
||||
})
|
||||
}
|
||||
export function BatchDel (ids) {
|
||||
return requestForMock({
|
||||
url: '/d2-crud-plus/synthesize/batchDelete',
|
||||
method: 'post',
|
||||
data: { ids }
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
// 请求模拟数据
|
||||
import { requestForMock } from '@/api/service'
|
||||
|
||||
export const crudOptions = {
|
||||
rowHandle: {
|
||||
// columnHeader: '操作',
|
||||
width: 370,
|
||||
custom: [
|
||||
{
|
||||
text: ' 自定义',
|
||||
type: 'warning',
|
||||
size: 'small',
|
||||
emit: 'customHandleBtn',
|
||||
icon: 'el-icon-s-flag'
|
||||
}
|
||||
],
|
||||
fixed: 'right'
|
||||
},
|
||||
pageOptions: {
|
||||
compact: true // 是否紧凑型页面
|
||||
},
|
||||
options: {
|
||||
height: '100%', // 表格高度100%, 使用toolbar必须设置
|
||||
highlightCurrentRow: true,
|
||||
rowKey: 'id',
|
||||
lazy: true,
|
||||
load: (tree, treeNode, resolve) => {
|
||||
requestForMock({
|
||||
url: '/d2crudplus/synthesize/children',
|
||||
method: 'get',
|
||||
data: { id: tree.id }
|
||||
}).then(ret => {
|
||||
console.log('懒加载数据', ret)
|
||||
resolve(ret)
|
||||
})
|
||||
},
|
||||
showSummary: true,
|
||||
summaryMethod (param) {
|
||||
const { columns, data } = param
|
||||
const sums = []
|
||||
columns.forEach((column, index) => {
|
||||
if (index === 0) {
|
||||
sums[index] = '总价'
|
||||
return
|
||||
}
|
||||
console.log('111', column)
|
||||
if (column.label !== '金额(元)') {
|
||||
return
|
||||
}
|
||||
const values = data.map(item => Number(item[column.property]))
|
||||
if (!values.every(value => isNaN(value))) {
|
||||
sums[index] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr)
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr
|
||||
} else {
|
||||
return prev
|
||||
}
|
||||
}, 0)
|
||||
sums[index] += ' 元'
|
||||
} else {
|
||||
sums[index] = ''
|
||||
}
|
||||
})
|
||||
|
||||
return sums
|
||||
}
|
||||
},
|
||||
indexRow: { // 或者直接传true,不显示title，不居中
|
||||
title: '序号',
|
||||
align: 'center'
|
||||
},
|
||||
selectionRow: {
|
||||
align: 'center',
|
||||
width: 100
|
||||
},
|
||||
expandRow: { // 或者直接传true,不显示title，不居中
|
||||
title: '展开',
|
||||
align: 'center'
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '数据列',
|
||||
key: 'data',
|
||||
sortable: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
width: 90,
|
||||
form: {
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
key: 'time',
|
||||
type: 'datetime',
|
||||
sortable: true,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
title: '地区',
|
||||
key: 'province',
|
||||
sortable: true,
|
||||
search: { key: 'province', disabled: false },
|
||||
type: 'select',
|
||||
form: {
|
||||
component: { props: { filterable: true, multiple: true, clearable: true } }
|
||||
},
|
||||
dict: {
|
||||
data: [
|
||||
{ value: 'sz', label: '深圳' },
|
||||
{ value: 'gz', label: '广州' },
|
||||
{ value: 'wh', label: '武汉' },
|
||||
{ value: 'sh', label: '上海' }
|
||||
]
|
||||
},
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
title: '金额(元)',
|
||||
key: 'amount',
|
||||
sortable: true,
|
||||
type: 'number'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
export default {
|
||||
init: `
|
||||
`,
|
||||
crud: `
|
||||
`,
|
||||
template: `
|
||||
`
|
||||
}
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<d2-container :class="{'page-compact':crud.pageOptions.compact}">
|
||||
<template slot="header">综合示例
|
||||
<d2-link-btn style='float:right' title="更多示例" link="http://qiniu.veryreader.com/D2CrudPlusExample/"/>
|
||||
</template>
|
||||
<d2-crud-x
|
||||
ref="d2Crud"
|
||||
v-bind="_crudProps"
|
||||
v-on="_crudListeners"
|
||||
@customHandleBtn="customHandleBtnHandle"
|
||||
>
|
||||
|
||||
<div slot="header">
|
||||
<crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" />
|
||||
|
||||
<el-button-group >
|
||||
<el-button size="small" type="primary" @click="addRow"><i class="el-icon-plus"></i> 新增</el-button>
|
||||
</el-button-group>
|
||||
|
||||
<crud-toolbar :search.sync="crud.searchOptions.show"
|
||||
:compact.sync="crud.pageOptions.compact"
|
||||
:columns="crud.columns"
|
||||
@refresh="doRefresh()"
|
||||
@columns-filter-changed="handleColumnsFilterChanged"/>
|
||||
</div>
|
||||
|
||||
<template slot="expandSlot" slot-scope="scope">
|
||||
这里显示行展开数据:{{scope.row.data}}
|
||||
</template>
|
||||
|
||||
<span slot="PaginationPrefixSlot" class="prefix" >
|
||||
<el-button class="square" size="mini" title="批量删除" @click="batchDelete" icon="el-icon-delete" :disabled="!multipleSelection || multipleSelection.length==0" />
|
||||
</span>
|
||||
|
||||
</d2-crud-x>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AddObj, GetList, UpdateObj, DelObj, BatchDel } from './api'
|
||||
import { crudOptions } from './crud'
|
||||
import { d2CrudPlus } from 'd2-crud-plus'
|
||||
import helper from './helper'
|
||||
export default {
|
||||
name: 'formColumn',
|
||||
components: {},
|
||||
mixins: [d2CrudPlus.crud],
|
||||
data () {
|
||||
return {
|
||||
helper: helper,
|
||||
multipleSelection: undefined
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
mounted () {
|
||||
// 修复首次加载表尾合计行无法显示的bug
|
||||
setTimeout(() => {
|
||||
this.getD2CrudTable().store.scheduleLayout()
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
getCrudOptions () {
|
||||
return crudOptions
|
||||
},
|
||||
pageRequest (query) {
|
||||
return GetList(query)
|
||||
},
|
||||
addRequest (row) {
|
||||
return AddObj(row)
|
||||
},
|
||||
updateRequest (row) {
|
||||
return UpdateObj(row)
|
||||
},
|
||||
delRequest (row) {
|
||||
return DelObj(row.id).then(ret => {
|
||||
// 手动更新加载项
|
||||
const data = this.getD2Crud().$refs.elTable.store.states.treeData
|
||||
if (data != null) {
|
||||
const item = data[row.parentId]
|
||||
if (item != null) {
|
||||
item.loaded = false
|
||||
item.expanded = false
|
||||
}
|
||||
}
|
||||
return ret
|
||||
})
|
||||
},
|
||||
batchDelRequest (ids) {
|
||||
return BatchDel(ids)
|
||||
},
|
||||
handleCurrentChange (currentRow, oldCurrentRow) {
|
||||
this.$message('单选' + currentRow.data)
|
||||
},
|
||||
customHandleBtnHandle ({ index, row }) {
|
||||
this.$message('自定义操作按钮：' + row.data)
|
||||
},
|
||||
checkSecond () {
|
||||
this.getD2CrudTable().toggleRowSelection(this.getD2CrudTableData()[0]) // 跟下面等效
|
||||
this.getD2Crud().$refs.elTable.toggleRowSelection(this.getD2Crud().d2CrudData[1])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import mockUtil from '../mock/base'
|
||||
|
||||
const options = {
|
||||
name: 'd2-crud-plus/synthesize',
|
||||
idGenerator: 0
|
||||
}
|
||||
const list = [
|
||||
{
|
||||
data: '我会懒加载',
|
||||
time: '2020-01-01 11:11:11',
|
||||
province: 'wh',
|
||||
amount: 100,
|
||||
hasChildren: true,
|
||||
loaded: false,
|
||||
children: [
|
||||
{
|
||||
data: '懒加载的子数据',
|
||||
province: ['sh', 'gz'],
|
||||
time: '2020-01-01 11:11:11',
|
||||
amount: 100
|
||||
},
|
||||
{
|
||||
data: '懒加载的子数据2',
|
||||
province: ['sh', 'sz'],
|
||||
time: '2020-01-01 11:11:11',
|
||||
amount: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
data: 'data2',
|
||||
province: 'sh',
|
||||
time: '2020-01-01 11:11:11',
|
||||
amount: 100,
|
||||
children: [
|
||||
{
|
||||
id: 999,
|
||||
data: 'data1_1',
|
||||
time: '2020-01-01 11:11:11',
|
||||
province: ['gz', 'sz'], // 可以逗号分隔的字符串 'gz,sz'
|
||||
amount: 100,
|
||||
children: [
|
||||
{
|
||||
id: 1000,
|
||||
data: 'data1_1_1',
|
||||
time: '2020-01-01 11:11:11',
|
||||
province: ['sz', 'gz'], // 可以逗号分隔的字符串 'gz,sz'
|
||||
amount: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 888,
|
||||
data: 'data1_2',
|
||||
time: '2020-01-01 11:11:11',
|
||||
province: 'sh',
|
||||
amount: 100,
|
||||
children: [
|
||||
{
|
||||
id: 889,
|
||||
data: 'data1_2_1',
|
||||
time: '2020-01-01 11:11:11',
|
||||
province: 'gz',
|
||||
amount: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
data: 'data3',
|
||||
province: ['sh', 'gz'],
|
||||
time: '2020-01-01 11:11:11',
|
||||
amount: 100
|
||||
},
|
||||
{
|
||||
data: 'data4',
|
||||
province: ['sh', 'sz'],
|
||||
time: '2020-01-01 11:11:11',
|
||||
amount: 100
|
||||
}
|
||||
]
|
||||
options.list = list
|
||||
const mock = mockUtil.buildMock(options)
|
||||
|
||||
mock.push({
|
||||
path: '/d2crudplus/synthesize/children',
|
||||
method: 'get',
|
||||
handle (req) {
|
||||
console.log('req', req)
|
||||
const id = parseInt(req.params.id)
|
||||
const item = mockUtil.findById(id, options.list)
|
||||
console.log('children:', item.children)
|
||||
return {
|
||||
code: 0,
|
||||
msg: 'success',
|
||||
data: item.children
|
||||
}
|
||||
}
|
||||
})
|
||||
export default mock
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<d2-container type="ghost">
|
||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
banner: {
|
||||
title: 'ElementUI',
|
||||
subTitle: 'D2Admin 集成由饿了么出品的 ElementUI',
|
||||
link: 'http://element.eleme.io'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<d2-container type="ghost">
|
||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||
<d2-module-index-menu :menu="menu"/>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menu from '@/menu/modules/demo-frame'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
menu,
|
||||
banner: {
|
||||
title: 'FRAME',
|
||||
subTitle: '在 D2Admin 中嵌入其它页面'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,8 +12,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/charts/list/_data/china'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/plugins/charts/_data/china'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,8 +12,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/charts/list/_data/beijing'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/plugins/charts/_data/beijing'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,8 +12,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/charts/list/_data/china'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
import mapOrigin from '@/views/demo/plugins/charts/_data/china'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import list from '@/views/demo/charts/list/_mixin/list.js'
|
||||
import list from '@/views/demo/plugins/charts/_mixin/list.js'
|
||||
export default {
|
||||
mixins: [
|
||||
list
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue