feat: 增加d2-crud-plus示例
This commit is contained in:
xiaojunnuo@126.com
36
src/views/demo/d2-crud-plus/demo/api.js
Normal file
36
src/views/demo/d2-crud-plus/demo/api.js
Normal file
@@ -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 }
|
||||
})
|
||||
}
|
||||
51
src/views/demo/d2-crud-plus/demo/crud.js
Normal file
51
src/views/demo/d2-crud-plus/demo/crud.js
Normal file
@@ -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' } } // 自动染色
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
57
src/views/demo/d2-crud-plus/demo/index.vue
Normal file
57
src/views/demo/d2-crud-plus/demo/index.vue
Normal file
@@ -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>
|
||||
49
src/views/demo/d2-crud-plus/demo/mock.js
Normal file
49
src/views/demo/d2-crud-plus/demo/mock.js
Normal file
@@ -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
|
||||
36
src/views/demo/d2-crud-plus/group/api.js
Normal file
36
src/views/demo/d2-crud-plus/group/api.js
Normal file
@@ -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 }
|
||||
})
|
||||
}
|
||||
125
src/views/demo/d2-crud-plus/group/crud.js
Normal file
125
src/views/demo/d2-crud-plus/group/crud.js
Normal file
@@ -0,0 +1,125 @@
|
||||
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: {
|
||||
// props: {
|
||||
// uploader: {
|
||||
// type: 'form'
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
{
|
||||
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-ueditor',
|
||||
// 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']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
61
src/views/demo/d2-crud-plus/group/index.vue
Normal file
61
src/views/demo/d2-crud-plus/group/index.vue
Normal file
@@ -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>
|
||||
20
src/views/demo/d2-crud-plus/group/mock.js
Normal file
20
src/views/demo/d2-crud-plus/group/mock.js
Normal file
@@ -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
|
||||
34
src/views/demo/d2-crud-plus/index/helper.js
Normal file
34
src/views/demo/d2-crud-plus/index/helper.js
Normal file
@@ -0,0 +1,34 @@
|
||||
export default {
|
||||
crud: ` 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: '上海' }
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
`
|
||||
}
|
||||
BIN
src/views/demo/d2-crud-plus/index/image/gif.webp
Normal file
BIN
src/views/demo/d2-crud-plus/index/image/gif.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 712 KiB |
69
src/views/demo/d2-crud-plus/index/index.vue
Normal file
69
src/views/demo/d2-crud-plus/index/index.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<d2-container type="ghost">
|
||||
<d2-module-index-banner slot="header" v-bind="banner"/>
|
||||
<!-- <d2-module-index-menu :menu="menu"/>-->
|
||||
|
||||
<div class="exampleBox d2-mt-20 ">
|
||||
<div class="left">
|
||||
<d2-highlight :code="helper.crud" lang="javascript"/>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="el-icon-right"></i>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="./image/gif.webp">
|
||||
</div>
|
||||
</div>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import helper from './helper'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
helper,
|
||||
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>
|
||||
|
||||
<style lang="scss">
|
||||
.exampleBox{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
height:420px;
|
||||
width:90%;
|
||||
padding:5px;
|
||||
margin:auto;
|
||||
justify-content: center;
|
||||
.left{
|
||||
height:100%;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
.icon{
|
||||
width:120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items:center;
|
||||
i{font-size: 50px;}
|
||||
}
|
||||
.right{
|
||||
height:100%;
|
||||
img{
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
.d2-highlight{
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
87
src/views/demo/d2-crud-plus/install.js
Normal file
87
src/views/demo/d2-crud-plus/install.js
Normal file
@@ -0,0 +1,87 @@
|
||||
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://qiniu.veryreader.com/D2CrudPlusExample/upload/form/upload',
|
||||
name: 'file'
|
||||
}
|
||||
})
|
||||
234
src/views/demo/d2-crud-plus/mock/base.js
Normal file
234
src/views/demo/d2-crud-plus/mock/base.js
Normal file
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
44
src/views/demo/d2-crud-plus/mock/index.js
Normal file
44
src/views/demo/d2-crud-plus/mock/index.js
Normal file
@@ -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('^' + 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)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
40
src/views/demo/d2-crud-plus/synthesize/api.js
Normal file
40
src/views/demo/d2-crud-plus/synthesize/api.js
Normal file
@@ -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 }
|
||||
})
|
||||
}
|
||||
129
src/views/demo/d2-crud-plus/synthesize/crud.js
Normal file
129
src/views/demo/d2-crud-plus/synthesize/crud.js
Normal file
@@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
8
src/views/demo/d2-crud-plus/synthesize/helper.js
Normal file
8
src/views/demo/d2-crud-plus/synthesize/helper.js
Normal file
@@ -0,0 +1,8 @@
|
||||
export default {
|
||||
init: `
|
||||
`,
|
||||
crud: `
|
||||
`,
|
||||
template: `
|
||||
`
|
||||
}
|
||||
104
src/views/demo/d2-crud-plus/synthesize/index.vue
Normal file
104
src/views/demo/d2-crud-plus/synthesize/index.vue
Normal file
@@ -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>
|
||||
101
src/views/demo/d2-crud-plus/synthesize/mock.js
Normal file
101
src/views/demo/d2-crud-plus/synthesize/mock.js
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user