提交 | 用户 | age
|
7b684b
|
1 |
// import {FormSchema} from '@/components/Table'; |
S |
2 |
import {treeOptionsListApi} from "@/api/demo/tree"; |
|
3 |
import {areaRecord} from "@/api/demo/cascader"; |
|
4 |
import dayjs from "dayjs"; |
|
5 |
import {optionsListApi} from "@/api/demo/select"; |
|
6 |
import {Input, FormItem, FormItemRest} from "ant-design-vue"; |
|
7 |
import { ApiSelect, FormSchema } from '@/components/Form'; |
|
8 |
|
|
9 |
import companyType from './drawer-form/companyType'; |
|
10 |
import annualPurchaseAmount from './drawer-form/annualPurchaseAmount'; |
|
11 |
import timeZone from './drawer-form/timeZone'; |
7450a2
|
12 |
import {uploadApi} from "@/api/sys/upload"; |
7b684b
|
13 |
|
b5c161
|
14 |
// import {useFormBaseData} from '@/store/modules/formBaseData'; |
S |
15 |
// let baseData = useFormBaseData.getFormBaseData; |
|
16 |
// Logger.log('....getFormBaseData.!!!.', baseData); |
|
17 |
|
|
18 |
// const userBaseDataStore= useFormBaseData(); |
|
19 |
// let baseData = {}; |
|
20 |
// userBaseDataStore.getSelectInfoAction().then((res) => { |
|
21 |
// baseData = userBaseDataStore.getFormBaseData; |
|
22 |
// Logger.log('!!!getFormBaseData..', baseData); |
|
23 |
// }); |
|
24 |
|
|
25 |
|
7b684b
|
26 |
// const custom_typeKey2typeValueRules = (model) => { |
S |
27 |
// return [ |
|
28 |
// { |
|
29 |
// // required: true, |
|
30 |
// // trigger: 'blur', |
|
31 |
// validator: async () => { |
|
32 |
// Logger.log('custom_typeKey2typeValueRules', model); |
|
33 |
// if (!model.typeKey) return Promise.reject('请选择类型'); |
|
34 |
// if (!model.typeValue) return Promise.reject('请输入数据'); |
|
35 |
// Promise.resolve(); |
|
36 |
// }, |
|
37 |
// }, |
|
38 |
// ]; |
|
39 |
// }; |
|
40 |
|
|
41 |
export const schemas: FormSchema[] = [ |
|
42 |
{ |
|
43 |
field: 'field0', |
|
44 |
component: 'Input', |
|
45 |
label: '公司网址', |
|
46 |
colProps: { |
|
47 |
span: 24, |
|
48 |
}, |
|
49 |
}, |
|
50 |
{ |
|
51 |
field: 'cluesName', |
|
52 |
component: 'Input', |
|
53 |
label: '线索名称', |
|
54 |
colProps: { |
|
55 |
span: 24, |
|
56 |
}, |
|
57 |
rules: [{required: true, trigger: 'blur'}], |
|
58 |
}, |
|
59 |
{ |
|
60 |
field: 'cluesFrom', |
|
61 |
component: 'ApiTreeSelect', |
|
62 |
label: '线索来源', |
|
63 |
componentProps: { |
|
64 |
api: treeOptionsListApi, |
|
65 |
treeCheckable: true, |
|
66 |
treeCheckStrictly: true, // 父子节点是否不再关联 |
|
67 |
resultField: 'list', |
|
68 |
onChange: (e, v) => { |
|
69 |
console.log('ApiTreeSelect====>:', e, v); |
|
70 |
}, |
|
71 |
}, |
|
72 |
colProps: { |
|
73 |
span: 24, |
|
74 |
}, |
|
75 |
}, |
|
76 |
{ |
|
77 |
field: 'abbreviation', |
|
78 |
component: 'Input', |
|
79 |
label: '简称', |
|
80 |
colProps: { |
|
81 |
span: 24, |
|
82 |
}, |
|
83 |
}, |
|
84 |
{ |
|
85 |
field: 'field8', |
|
86 |
component: 'ApiCascader', |
|
87 |
label: '国家地区', |
|
88 |
colProps: { |
|
89 |
span: 16, |
|
90 |
}, |
|
91 |
componentProps: { |
|
92 |
api: areaRecord, |
|
93 |
apiParamKey: 'parentCode', |
|
94 |
// dataField: 'data', |
|
95 |
labelField: 'name', |
|
96 |
valueField: 'code', |
|
97 |
initFetchParams: { |
|
98 |
parentCode: '', |
|
99 |
}, |
|
100 |
isLeaf: (record) => { |
|
101 |
return !(record.levelType < 3); |
|
102 |
}, |
|
103 |
onChange: (e, ...v) => { |
|
104 |
console.log('ApiCascader====>:', e, v); |
|
105 |
}, |
|
106 |
}, |
|
107 |
}, |
|
108 |
// { |
|
109 |
// field: 'field9', |
|
110 |
// component: 'ApiCascader', |
|
111 |
// label: '联动ApiCascader', |
|
112 |
// required: true, |
|
113 |
// colProps: { |
|
114 |
// span: 8, |
|
115 |
// }, |
|
116 |
// componentProps: { |
|
117 |
// api: areaRecord, |
|
118 |
// apiParamKey: 'parentCode', |
|
119 |
// // dataField: 'data', |
|
120 |
// labelField: 'name', |
|
121 |
// valueField: 'code', |
|
122 |
// initFetchParams: { |
|
123 |
// parentCode: '', |
|
124 |
// }, |
|
125 |
// isLeaf: (record) => { |
|
126 |
// return !(record.levelType < 3); |
|
127 |
// }, |
|
128 |
// onChange: (e, ...v) => { |
|
129 |
// console.log('ApiCascader====>:', e, v); |
|
130 |
// }, |
|
131 |
// }, |
|
132 |
// }, |
|
133 |
{ |
|
134 |
field: 'field30', |
|
135 |
component: 'ApiSelect', |
|
136 |
label: '线索标签', |
|
137 |
// required: true, |
|
138 |
componentProps: { |
|
139 |
// more details see /src/components/Form/src/components/ApiSelect.vue |
|
140 |
api: optionsListApi, |
|
141 |
params: { |
|
142 |
id: 1, |
|
143 |
}, |
|
144 |
mode: 'multiple', |
|
145 |
resultField: 'list', |
|
146 |
// use name as label |
|
147 |
labelField: 'name', |
|
148 |
// use id as value |
|
149 |
valueField: 'id', |
|
150 |
// not request untill to select |
|
151 |
immediate: true, |
|
152 |
onChange: (e, v) => { |
|
153 |
console.log('ApiSelect====>:', e, v); |
|
154 |
}, |
|
155 |
// atfer request callback |
|
156 |
onOptionsChange: (options) => { |
7450a2
|
157 |
// console.log('get options', options.length, options); |
7b684b
|
158 |
}, |
S |
159 |
}, |
|
160 |
colProps: { |
|
161 |
span: 16, |
|
162 |
}, |
|
163 |
// defaultValue: '0', |
|
164 |
}, |
|
165 |
{ |
|
166 |
field: 'companyName', |
|
167 |
component: 'Input', |
|
168 |
label: '公司名称', |
|
169 |
colProps: { |
|
170 |
span: 16, |
|
171 |
}, |
|
172 |
}, |
|
173 |
{ |
|
174 |
field: 'typeKey', |
|
175 |
defaultValue: '公司名称', |
|
176 |
fields: ['typeValue'], |
|
177 |
defaultValueObj: {typeValue: ''}, |
|
178 |
component: 'Input', |
|
179 |
// label: 'renderColContent渲染', |
|
180 |
/**!!!renderColContent 没有FormItem 包裹, 若想要 Form 提交需要带上数据须 <FormItem name={}></FormItem> 包裹: 示例如下*/ |
|
181 |
renderColContent({model, field}, {disabled}) { |
|
182 |
return ( |
|
183 |
<FormItem |
|
184 |
name="typeKey" |
|
185 |
label="座机" |
|
186 |
// rules={[{ trigger: 'blur',required: true, }]} |
|
187 |
// rules={custom_typeKey2typeValueRules(model)} |
|
188 |
> |
|
189 |
<Input.Group compact> |
|
190 |
{/*<Select*/} |
|
191 |
{/* allowClear*/} |
|
192 |
{/* disabled={disabled}*/} |
|
193 |
{/* style="width: 120px"*/} |
|
194 |
{/* v-model:value={model[field]}*/} |
|
195 |
{/*>*/} |
|
196 |
{/* <Select.Option value="公司名称">公司名称</Select.Option>*/} |
|
197 |
{/* <Select.Option value="产品名称">产品名称</Select.Option>*/} |
|
198 |
{/*</Select>*/} |
|
199 |
<ApiSelect |
|
200 |
style="width: 120px" |
|
201 |
v-model:api={optionsListApi} |
|
202 |
showSearch |
|
203 |
v-model:value={model['field']} |
|
204 |
optionFilterProp="label" |
|
205 |
resultField="list" |
|
206 |
labelField="name" |
|
207 |
valueField="id" |
|
208 |
/> |
|
209 |
<FormItemRest> |
|
210 |
<Input |
|
211 |
style="width: calc(100% - 120px); margin-left: -1px;" |
|
212 |
placeholder="电话号码" |
|
213 |
v-model:value={model['typeValue']} |
|
214 |
disabled={disabled} |
|
215 |
// rules={[{ type: 'number',trigger: 'blur',required: true, }]} |
|
216 |
// rules={custom_typeKey2typeValueRules(model)} |
|
217 |
/> |
|
218 |
</FormItemRest> |
|
219 |
</Input.Group> |
|
220 |
</FormItem> |
|
221 |
); |
|
222 |
}, |
|
223 |
colProps: { |
|
224 |
span: 16, |
|
225 |
}, |
|
226 |
dynamicDisabled: ({values}) => { |
|
227 |
return !!values.field_disabled; |
|
228 |
}, |
|
229 |
}, |
|
230 |
{ |
|
231 |
field: 'customerCode', |
|
232 |
component: 'Input', |
|
233 |
label: '客户代码(与生产单的客户代码一致)', |
|
234 |
colProps: { |
|
235 |
span: 24, |
|
236 |
}, |
|
237 |
}, |
|
238 |
{ |
|
239 |
field: '', |
|
240 |
defaultValue: '', |
|
241 |
component: 'Input', |
|
242 |
// label: 'renderColContent渲染', |
|
243 |
/**!!!renderColContent 没有FormItem 包裹, 若想要 Form 提交需要带上数据须 <FormItem name={}></FormItem> 包裹: 示例如下*/ |
|
244 |
renderColContent({model, field}, {disabled}) { |
|
245 |
return ( |
|
246 |
<div class="font-size-16px mb-10px">其他</div> |
|
247 |
); |
|
248 |
}, |
|
249 |
colProps: { |
|
250 |
span: 24, |
|
251 |
}, |
|
252 |
}, |
|
253 |
{ |
|
254 |
component: 'Select', |
|
255 |
label: '公司类型', |
|
256 |
field: 'companyType', |
|
257 |
colProps: {span: 16}, |
|
258 |
componentProps: { |
|
259 |
options: companyType, |
|
260 |
}, |
|
261 |
defaultValue: '1' |
|
262 |
}, |
|
263 |
{ |
|
264 |
component: 'Select', |
|
265 |
label: '采购意向', |
|
266 |
field: 'purchasingIntention', |
|
267 |
colProps: {span: 16}, |
|
268 |
componentProps: { |
|
269 |
options: [ |
|
270 |
{ |
|
271 |
label: '未知', |
|
272 |
value: '1', |
|
273 |
}, |
|
274 |
{ |
|
275 |
label: '低', |
|
276 |
value: '2', |
|
277 |
}, |
|
278 |
{ |
|
279 |
label: '中', |
|
280 |
value: '3', |
|
281 |
}, |
|
282 |
{ |
|
283 |
label: '高', |
|
284 |
value: '4', |
|
285 |
}, |
|
286 |
], |
|
287 |
}, |
|
288 |
}, |
|
289 |
{ |
|
290 |
component: 'Select', |
|
291 |
label: '年采购额', |
|
292 |
field: 'annualPurchaseAmount', |
|
293 |
colProps: {span: 16}, |
|
294 |
componentProps: { |
b5c161
|
295 |
// options: annualPurchaseAmount, |
S |
296 |
// options: baseData?.annualProcurement, |
7b684b
|
297 |
}, |
S |
298 |
}, |
|
299 |
{ |
|
300 |
component: 'Select', |
|
301 |
label: '时区', |
|
302 |
field: 'timeZone', |
|
303 |
colProps: {span: 16}, |
|
304 |
componentProps: { |
|
305 |
options: timeZone, |
|
306 |
}, |
|
307 |
}, |
|
308 |
{ |
|
309 |
field: 'searchKeywords', |
|
310 |
component: 'Input', |
|
311 |
label: '搜索关键词', |
|
312 |
colProps: { |
|
313 |
span: 16, |
|
314 |
}, |
|
315 |
}, |
|
316 |
{ |
|
317 |
field: 'detailedAddress', |
|
318 |
component: 'Input', |
|
319 |
label: '详细地址', |
|
320 |
colProps: { |
|
321 |
span: 24, |
|
322 |
}, |
|
323 |
}, |
|
324 |
{ |
7450a2
|
325 |
field: 'image', |
S |
326 |
component: 'ImageUpload', |
|
327 |
label: '上传图片', |
|
328 |
subLabel: '(单张图片最大3M,最多上传5张图片)', |
|
329 |
// required: true, |
|
330 |
defaultValue: [ |
|
331 |
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', |
|
332 |
], |
|
333 |
componentProps: { |
|
334 |
api: uploadApi, |
|
335 |
accept: ['png', 'jpeg', 'jpg'], |
|
336 |
helpText: '单张图片最大3M,最多上传5张图片', |
|
337 |
maxSize: 3, //单个文件最大体积,单位 M |
|
338 |
maxNumber: 5, |
7b684b
|
339 |
}, |
7450a2
|
340 |
// rules: [ |
S |
341 |
// { |
|
342 |
// required: true, |
|
343 |
// trigger: 'change', |
|
344 |
// validator(_, value) { |
|
345 |
// if (isArray(value) && value.length > 0) { |
|
346 |
// return Promise.resolve(); |
|
347 |
// } else { |
|
348 |
// return Promise.reject('请选择上传图片'); |
|
349 |
// } |
|
350 |
// }, |
|
351 |
// }, |
|
352 |
// ], |
7b684b
|
353 |
}, |
S |
354 |
{ |
|
355 |
field: 'cluesNotes', |
|
356 |
component: 'InputTextArea', |
|
357 |
label: '线索备注', |
|
358 |
colProps: { |
|
359 |
span: 24, |
|
360 |
}, |
|
361 |
}, |
|
362 |
{ |
|
363 |
component: 'Select', |
|
364 |
label: '规模', |
|
365 |
field: 'numberOfPeople', |
|
366 |
colProps: {span: 16}, |
|
367 |
componentProps: { |
|
368 |
options: [ |
|
369 |
{ |
|
370 |
label: '少于59人', |
|
371 |
value: '1', |
|
372 |
}, |
|
373 |
{ |
|
374 |
label: '60-149人', |
|
375 |
value: '2', |
|
376 |
}, |
|
377 |
{ |
|
378 |
label: '150-499人', |
|
379 |
value: '3', |
|
380 |
}, |
|
381 |
{ |
|
382 |
label: '500-999人', |
|
383 |
value: '4', |
|
384 |
}, |
|
385 |
{ |
|
386 |
label: '1000-4999人', |
|
387 |
value: '5', |
|
388 |
}, |
|
389 |
{ |
|
390 |
label: '5000人以上', |
|
391 |
value: '6', |
|
392 |
}, |
|
393 |
], |
|
394 |
}, |
7450a2
|
395 |
}, |
S |
396 |
{ |
|
397 |
field: 'salesman', |
|
398 |
component: 'Input', |
|
399 |
label: '业务员', |
|
400 |
colProps: { |
|
401 |
span: 16, |
|
402 |
}, |
|
403 |
}, |
|
404 |
{ |
|
405 |
component: 'Select', |
|
406 |
label: '访问来源', |
|
407 |
field: 'visitSource', |
|
408 |
colProps: {span: 24}, |
|
409 |
componentProps: { |
|
410 |
options: [ |
|
411 |
{ |
|
412 |
label: '广告投放', |
|
413 |
value: '1', |
|
414 |
}, |
|
415 |
{ |
|
416 |
label: '自然流量', |
|
417 |
value: '2', |
|
418 |
}, |
|
419 |
{ |
|
420 |
label: '社交网站', |
|
421 |
value: '3', |
|
422 |
}, |
|
423 |
{ |
|
424 |
label: '直接访问', |
|
425 |
value: '4', |
|
426 |
}, |
|
427 |
{ |
|
428 |
label: '邮件', |
|
429 |
value: '5', |
|
430 |
}, |
|
431 |
{ |
|
432 |
label: '其他', |
|
433 |
value: '6', |
|
434 |
}, |
|
435 |
], |
|
436 |
}, |
|
437 |
}, |
|
438 |
{ |
|
439 |
field: 'field12', |
|
440 |
component: 'ApiCascader', |
|
441 |
label: '主营产品', |
|
442 |
colProps: { span: 24 }, |
|
443 |
componentProps: { |
|
444 |
api: areaRecord, |
|
445 |
apiParamKey: 'parentCode', |
|
446 |
showCheckedStrategy: 'SHOW_CHILD', |
|
447 |
labelField: 'name', |
|
448 |
valueField: 'code', |
|
449 |
multiple: true, |
|
450 |
initFetchParams: { |
|
451 |
parentCode: '', |
|
452 |
}, |
|
453 |
isLeaf: (record) => { |
|
454 |
return !(record.levelType < 3); |
|
455 |
}, |
|
456 |
onChange: (e, ...v) => { |
|
457 |
Logger.log('ApiCascader====> e:', e); |
|
458 |
Logger.log('ApiCascader====> v:', v); |
|
459 |
}, |
|
460 |
}, |
|
461 |
}, |
|
462 |
{ |
|
463 |
field: 'ipAddress', |
|
464 |
component: 'ApiSelect', |
|
465 |
label: '访客IP所在地', |
|
466 |
// required: true, |
|
467 |
componentProps: { |
|
468 |
// more details see /src/components/Form/src/components/ApiSelect.vue |
|
469 |
api: optionsListApi, |
|
470 |
params: { |
|
471 |
id: 1, |
|
472 |
}, |
|
473 |
resultField: 'list', |
|
474 |
// use name as label |
|
475 |
labelField: 'name', |
|
476 |
// use id as value |
|
477 |
valueField: 'id', |
|
478 |
// not request untill to select |
|
479 |
immediate: true, |
|
480 |
onChange: (e, v) => { |
|
481 |
console.log('ApiSelect====>:', e, v); |
|
482 |
}, |
|
483 |
// atfer request callback |
|
484 |
onOptionsChange: (options) => { |
|
485 |
// console.log('get options', options.length, options); |
|
486 |
}, |
|
487 |
}, |
|
488 |
colProps: { |
|
489 |
span: 20, |
|
490 |
}, |
|
491 |
// defaultValue: '0', |
7b684b
|
492 |
}, |
S |
493 |
]; |