/
index.vue
100 lines (97 loc) · 3.09 KB
/
index.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<template>
<d2-container>
<template slot="header">文件上传
<example-helper title="文件上传组件crud配置" >
<h4>目前支持腾讯云cos、七牛、阿里云oss等三种对象存储的web端直传</h4>
<h4>1、准备</h4>
<div>
<ul>
<li>创建相应的bucket</li>
<li>生产环境还需配置获取相应的授权:腾讯云、阿里云的sts,七牛要获取token</li>
<li>后端实现请参考:https://github.com/greper/d2-crud-plus-server.git</li>
<li>更多文档:https://github.com/greper/d2-crud-plus/tree/master/packages/d2-crud-plus-extends</li>
</ul>
</div>
<h4>2、引入</h4>
<d2-highlight :code="helper.init" lang="javascript"/>
<h4>3、使用:crud配置</h4>
<div>
<ul>
<li>给column配置type即可,可选值:[avatar-uploader,image-uploader,file-uploader]</li>
</ul>
</div>
<d2-highlight :code="helper.crud" lang="javascript"/>
</example-helper>
</template>
<crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch" class="d2-mb-10" ></crud-search>
<d2-crud
ref="d2Crud"
:columns="crud.columns"
:data="crud.list"
:rowHandle="crud.rowHandle"
edit-title="修改"
:add-template="crud.addTemplate"
:add-rules="crud.addRules"
:edit-template="crud.editTemplate"
:edit-rules="crud.editRules"
:form-options="crud.formOptions"
:options="crud.options"
:loading="crud.loading"
@dialog-open="handleDialogOpen"
@row-edit="handleRowEdit"
@row-add="handleRowAdd"
@row-remove="handleRowRemove"
@dialog-cancel="handleDialogCancel"
@form-data-change="handleFormDataChange"
>
<el-button slot="header" style="margin-bottom: 5px" size="small" type="primary" @click="addRow">新增</el-button>
</d2-crud>
<crud-footer ref="footer"
:current="crud.page.current"
:size="crud.page.size"
:total="crud.page.total"
@change="handlePaginationChange"
>
</crud-footer>
</d2-container>
</template>
<script>
import { AddObj, GetList, UpdateObj, DelObj } from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import helper from './helper'
export default {
name: 'uploaderPage',
components: {},
mixins: [d2CrudPlus.crud],
data () {
return {
helper: helper
}
},
computed: {
helperHeight () {
let height = document.documentElement.clientHeight - 100
console.log('height:', height)
return height + 'px'
}
},
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>