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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
| <template>
| <div class="upload-container">
| <div>
| <h4 style=" text-align: center;margin-bottom: 20px;">表单与文件上传下载(可自定义上传、图片预览与点击下载文件)</h4>
| <VolForm
| ref="myform"
| :label-width="180"
| :load-key="true"
| :form-fields="formFields"
| :form-rules="formRules"
| ></VolForm>
| </div>
| </div>
| </template>
| <script>
| import VolForm from "@/components/basic/VolForm.vue";
| import VolUpload from "@/components/basic/VolUpload.vue";
| import VolHeader from "@/components/basic/VolHeader.vue";
| export default {
| components: {
| VolUpload,
| VolForm,
| VolHeader
| },
| data() {
| //表单验证时根据remove判断是否有图片
| return {
| formFields: {
| OrderNo: "BJ2019000001",
| OrderDate: new Date(),
| City: "北京市",
| Price: 277.6,
| ProductCode: "2019FX001",
| ProductName: "无线充电宝",
| file1: "",
| file2: "",
| file3: [
| //对已有文件显示，并可重新上传
| {
| name: "x1.jpg",
| path:
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x1.jpg"
| },
| {
| name: "x2.jpg",
| path:
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg"
| },
| {
| name: "x3.jpg",
| path:
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg"
| },
| {
| name: "xx.jpg",
| path:
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/xx.jpg"
| },
| {
| name: "tj01.jpg",
| path:
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/tj01.jpg"
| }
| ],
| file4: "",
| file5: [
| {
| name: "测试现有文件可下载1.xlsx",
| path:
| "https://files-1256993465.cos.ap-chengdu.myqcloud.com/测试现有文件可下载1.xlsx"
| },
| {
| name: "测试现有文件可下载2.xlsx",
| path:
| "https://files-1256993465.cos.ap-chengdu.myqcloud.com/测试现有文件可下载2.xlsx"
| }
| ],
| //只读图片
| //也可以直接用逗号拼接 "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg,https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg",
| file6: [
| {
| name: "x2.jpg",
| path:
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x2.jpg"
| },
| {
| name: "x3.jpg",
| path:
| "https://imgs-1256993465.cos.ap-chengdu.myqcloud.com/h5pic/x3.jpg"
| }
| ], //只读可下载的文件，格式与上面只读图片相同
| file7: [
| {
| name: "(api后台文件)基础表单+编辑只读 (4).xlsx",
| path:
| "Upload/Tables/App_Appointment/201911241454458938/基础表单+编辑只读 (4).xlsx"
| },
| {
| name: "(第三方服务器文件).xlsx",
| path:
| "https://files-1256993465.cos.ap-chengdu.myqcloud.com/测试现有文件可下载1.xlsx"
| }
| ],
| file8: ""
| },
| formRules: [
| //两列的表单，formRules数据格式为:[[{},{}]]
| [
| {
| title: "商品编号",
| required: true, //设置为必选项
| field: "ProductCode",
| type: "text"
| },
| {
| title: "商品名称",
| placeholder: "此处数据源为手动绑定",
| required: false,
| field: "ProductName",
| type: "text"
| },
| {
| type: "decimal",
| title: "商品价格",
| required: true,
| placeholder: "你可以自己定义placeholder显示的文字",
| field: "Price"
| }],
| [{
| dataKey: "city",
| title: "收货城市",
| required: true,
| field: "City",
| data: [],
| type: "select"
| }
| ,
| {
| title: "发货单号",
| field: "OrderNo",
| type: "text"
| },
| {
| title: "发货日期",
| field: "OrderDate",
| type: "datetime"
| }
| ],
| [
| {
| title: "自动上传",
| field: "file1",
| required: true,
| maxSize: 1, //最大1M文件
| url: "/api/App_Appointment/Upload",
| type: "file"
| },
| {
| title: "上传excel",
| field: "file2",
| maxSize: 0.5, //最大0.5M文件
| multiple: true, //启用多文件
| maxFile: 2, //最多两个文件
| url: "/api/App_Appointment/Upload",
| type: "excel"
| },
| {
| title: "文件只读",
| readonly: true,
| field: "file7",
| downLoad: true,
| maxSize: 0.5, //最大0.5M文件
| multiple: true, //启用多文件
| maxFile: 2, //最多两个文件
| type: "excel"
| }
| ],
| [
| {
| title: "上传下载",
| autoUpload: false,
| field: "file5",
| maxSize: 1, //最大1M文件
| multiple: true, //启用多文件
| maxFile: 3, //最多3个文件
| downLoad: true,
| url: "/api/App_Appointment/Upload",
| type: "file",
| fileClick(index, file, files) {
| this.$Message.error(file.name);
| return true;
| }
| },
| {
| title: "图片只读",
| field: "file6",
| readonly: true,
| type: "img"
| },
| {
| title: "手动上传",
| field: "file4",
| maxSize: 1, //最大1M文件
| multiple: true, //启用多文件
| maxFile: 3, //最多两个文件
| url: "/api/App_Appointment/Upload",
| type: "img"
| }
| ],
| [
| {
| title: "上传图片",
| autoUpload: false,
| field: "file3",
| maxSize: 1, //最大1M文件
| colSize: 12,
| url: "/api/App_Appointment/Upload",
| type: "img"
| }
| ]
| ]
| };
| }
| };
| </script>
| <style scoped>
| .upload-container {
| padding: 10px 15px;
| }
| .upload-container >>> .img-item,
| .upload-container >>> .img-item img{
| width: 70px !important;
| height: 70px !important;
| }
| </style>
|
|
