提交 | 用户 | age
|
7450a2
|
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, Select} 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'; |
|
12 |
import {uploadApi} from "@/api/sys/upload"; |
|
13 |
|
|
14 |
const custom_typeKey2typeValueRules = (model) => { |
|
15 |
return [ |
|
16 |
{ |
|
17 |
// required: true, |
|
18 |
// trigger: 'blur', |
|
19 |
validator: async () => { |
|
20 |
Logger.log('custom_typeKey2typeValueRules', model); |
|
21 |
if (!model.telephoneAreaCode) return Promise.reject('请选择电话区号'); |
|
22 |
if (!model.telephoneNumber) return Promise.reject('请输入电话号码'); |
|
23 |
Promise.resolve(); |
|
24 |
}, |
|
25 |
}, |
|
26 |
]; |
|
27 |
}; |
|
28 |
|
|
29 |
const add = (model) => { |
|
30 |
console.log('add-',model); |
|
31 |
Logger.log('add=', model); |
|
32 |
}; |
|
33 |
|
|
34 |
export const schemas: FormSchema[] = [ |
|
35 |
{ |
|
36 |
field: 'contactName', |
|
37 |
component: 'Input', |
|
38 |
label: '联系人名称', |
|
39 |
colProps: { |
|
40 |
span: 24, |
|
41 |
}, |
|
42 |
rules: [{required: true, trigger: 'blur'}], |
|
43 |
}, |
|
44 |
{ |
|
45 |
field: 'email', |
|
46 |
component: 'Input', |
|
47 |
label: '邮箱', |
|
48 |
colProps: { |
|
49 |
span: 24, |
|
50 |
}, |
|
51 |
}, |
|
52 |
{ |
|
53 |
field: 'socialPlatform', |
|
54 |
fields: ['socialAccount','socialCount'], |
|
55 |
component: 'Input', |
|
56 |
// label: 'renderColContent渲染', |
|
57 |
/**!!!renderColContent 没有FormItem 包裹, 若想要 Form 提交需要带上数据须 <FormItem name={}></FormItem> 包裹: 示例如下*/ |
|
58 |
renderColContent({model, field}, {disabled}) { |
|
59 |
return ( |
|
60 |
<FormItem |
|
61 |
name="social" |
|
62 |
label="社交平台" |
|
63 |
// rules={[{ trigger: 'blur',required: true, }]} |
|
64 |
// rules={custom_typeKey2typeValueRules(model)} |
|
65 |
> |
|
66 |
<Input.Group compact> |
|
67 |
{/*<Select*/} |
|
68 |
{/* allowClear*/} |
|
69 |
{/* disabled={disabled}*/} |
|
70 |
{/* style="width: 120px"*/} |
|
71 |
{/* v-model:value={model[field]}*/} |
|
72 |
{/*>*/} |
|
73 |
{/* <Select.Option value="公司名称">公司名称</Select.Option>*/} |
|
74 |
{/* <Select.Option value="产品名称">产品名称</Select.Option>*/} |
|
75 |
{/*</Select>*/} |
|
76 |
<ApiSelect |
|
77 |
style="width: 120px" |
|
78 |
v-model:api={optionsListApi} |
|
79 |
placeholder="社交平台" |
|
80 |
showSearch |
|
81 |
v-model:value={model['socialPlatform']} |
|
82 |
optionFilterProp="label" |
|
83 |
resultField="list" |
|
84 |
labelField="name" |
|
85 |
valueField="id" |
|
86 |
/> |
|
87 |
<FormItemRest> |
|
88 |
<Input |
|
89 |
style="width: calc(100% - 120px); margin-left: -1px;" |
|
90 |
placeholder="社交账号" |
|
91 |
v-model:value={model['socialAccount']} |
|
92 |
disabled={disabled} |
|
93 |
// rules={[{ type: 'number',trigger: 'blur',required: true, }]} |
|
94 |
// rules={custom_typeKey2typeValueRules(model)} |
|
95 |
/> |
|
96 |
</FormItemRest> |
|
97 |
{/*<div>*/} |
|
98 |
{/* <a-button shape="circle" onClick={add(model)}>+</a-button>*/} |
|
99 |
{/* /!*<a-button shape="circle" v-if={Number(model['socialCount']) > 0}>-</a-button>*!/*/} |
|
100 |
{/* /!*<a-button shape="circle" v-if={Number(model['socialCount']) === 0} onClick={add}>+</a-button>*!/*/} |
|
101 |
{/* /!*<a-button shape="circle" v-if={Number(model['socialCount']) > 0} onClick={() => del(field)}>-</a-button>*!/*/} |
|
102 |
{/*</div>*/} |
|
103 |
</Input.Group> |
|
104 |
|
|
105 |
</FormItem> |
|
106 |
); |
|
107 |
}, |
|
108 |
colProps: { |
|
109 |
span: 18, |
|
110 |
}, |
|
111 |
dynamicDisabled: ({values}) => { |
|
112 |
return !!values.field_disabled; |
|
113 |
}, |
|
114 |
}, |
|
115 |
{ |
|
116 |
field: '0', |
|
117 |
label: ' ', |
|
118 |
component: 'Input', |
|
119 |
render({model, field}, {disabled}) { |
|
120 |
return ( |
|
121 |
<div> |
|
122 |
<a-button shape="circle" onClick={add(model)}>+</a-button> |
|
123 |
{/*<a-button shape="circle" v-if={Number(model['socialCount']) > 0}>-</a-button>*/} |
|
124 |
{/*<a-button shape="circle" v-if={Number(model['socialCount']) === 0} onClick={add}>+</a-button>*/} |
|
125 |
{/*<a-button shape="circle" v-if={Number(model['socialCount']) > 0} onClick={() => del(field)}>-</a-button>*/} |
|
126 |
</div> |
|
127 |
); |
|
128 |
}, |
|
129 |
colProps: { |
|
130 |
span: 6, |
|
131 |
}, |
|
132 |
}, |
|
133 |
{ |
|
134 |
field: 'telephoneAreaCode', |
|
135 |
fields: ['telephoneNumber'], |
|
136 |
component: 'Input', |
|
137 |
// label: 'renderColContent渲染', |
|
138 |
/**!!!renderColContent 没有FormItem 包裹, 若想要 Form 提交需要带上数据须 <FormItem name={}></FormItem> 包裹: 示例如下*/ |
|
139 |
renderColContent({model, field}, {disabled}) { |
|
140 |
return ( |
|
141 |
<FormItem |
|
142 |
name="telephone" |
|
143 |
label="联系电话" |
|
144 |
// rules={[{ trigger: 'blur',required: true, }]} |
|
145 |
// rules={custom_typeKey2typeValueRules(model)} |
|
146 |
> |
|
147 |
<Input.Group compact> |
|
148 |
|
|
149 |
<ApiSelect |
|
150 |
style="width: 120px" |
|
151 |
v-model:api={optionsListApi} |
|
152 |
placeholder="电话区号" |
|
153 |
showSearch |
|
154 |
v-model:value={model['telephoneAreaCode']} |
|
155 |
optionFilterProp="label" |
|
156 |
resultField="list" |
|
157 |
labelField="name" |
|
158 |
valueField="id" |
|
159 |
// rules={[{ trigger: 'blur',required: true, }]} |
|
160 |
/> |
|
161 |
<FormItemRest> |
|
162 |
<Input |
|
163 |
style="width: calc(100% - 120px); margin-left: -1px;" |
|
164 |
placeholder="电话号码" |
|
165 |
v-model:value={model['telephoneNumber']} |
|
166 |
disabled={disabled} |
|
167 |
// rules={[{ trigger: 'blur',required: true, }]} |
|
168 |
// rules={custom_typeKey2typeValueRules(model)} |
|
169 |
/> |
|
170 |
</FormItemRest> |
|
171 |
</Input.Group> |
|
172 |
</FormItem> |
|
173 |
); |
|
174 |
}, |
|
175 |
colProps: { |
|
176 |
span: 16, |
|
177 |
}, |
|
178 |
dynamicDisabled: ({values}) => { |
|
179 |
return !!values.field_disabled; |
|
180 |
}, |
|
181 |
}, |
|
182 |
// { |
|
183 |
// field: 'typeKey2', |
|
184 |
// fields: ['typeValue2'], |
|
185 |
// component: 'Input', |
|
186 |
// label: '复合', |
|
187 |
// /**!!!renderColContent 没有FormItem 包裹, 若想要 Form 提交需要带上数据须 <FormItem name={}></FormItem> 包裹: 示例如下*/ |
|
188 |
// render({ model, field }, { disabled }) { |
|
189 |
// return ( |
|
190 |
// <Input.Group> |
|
191 |
// <Select |
|
192 |
// disabled={disabled} |
|
193 |
// style="width: 120px" |
|
194 |
// allowClear |
|
195 |
// v-model:value={model[field]} |
|
196 |
// > |
|
197 |
// <Select.Option value="测试类型">测试类型</Select.Option> |
|
198 |
// <Select.Option value="测试名称">测试名称</Select.Option> |
|
199 |
// </Select> |
|
200 |
// <FormItem name="typeValue2" rules={[{ required: true }]}> |
|
201 |
// <FormItemRest> |
|
202 |
// <Input |
|
203 |
// placeholder="请输入" |
|
204 |
// v-model:value={model['typeValue2']} |
|
205 |
// disabled={disabled} |
|
206 |
// /> |
|
207 |
// </FormItemRest> |
|
208 |
// </FormItem> |
|
209 |
// </Input.Group> |
|
210 |
// ); |
|
211 |
// }, |
|
212 |
// colProps: { |
|
213 |
// span: 12, |
|
214 |
// }, |
|
215 |
// dynamicDisabled: ({values}) => { |
|
216 |
// return !!values.field_disabled; |
|
217 |
// }, |
|
218 |
// }, |
|
219 |
{ |
b5c161
|
220 |
field: 'position', |
7450a2
|
221 |
component: 'Input', |
b5c161
|
222 |
label: '职位', |
7450a2
|
223 |
colProps: { |
S |
224 |
span: 16, |
|
225 |
}, |
|
226 |
}, |
|
227 |
{ |
b5c161
|
228 |
field: 'remark', |
S |
229 |
component: 'InputTextArea', |
|
230 |
label: '备注', |
7450a2
|
231 |
colProps: { |
S |
232 |
span: 24, |
|
233 |
}, |
|
234 |
}, |
|
235 |
{ |
b5c161
|
236 |
field: 'gender', |
S |
237 |
component: 'RadioGroup', |
|
238 |
defaultValue: '0', |
|
239 |
label: '性别', |
7450a2
|
240 |
componentProps: { |
S |
241 |
options: [ |
b5c161
|
242 |
{label: '不设置', value: '0'}, |
S |
243 |
{label: '男', value: '1'}, |
|
244 |
{label: '女', value: '1'}, |
7450a2
|
245 |
], |
S |
246 |
}, |
|
247 |
colProps: { |
|
248 |
span: 24, |
|
249 |
}, |
|
250 |
}, |
|
251 |
{ |
|
252 |
field: 'image', |
|
253 |
component: 'ImageUpload', |
b5c161
|
254 |
label: '图片', |
7450a2
|
255 |
subLabel: '(单张图片最大3M,最多上传5张图片)', |
S |
256 |
// required: true, |
|
257 |
defaultValue: [ |
|
258 |
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', |
|
259 |
], |
|
260 |
componentProps: { |
|
261 |
api: uploadApi, |
|
262 |
accept: ['png', 'jpeg', 'jpg'], |
|
263 |
helpText: '单张图片最大3M,最多上传5张图片', |
|
264 |
maxSize: 3, //单个文件最大体积,单位 M |
|
265 |
maxNumber: 5, |
|
266 |
}, |
|
267 |
// rules: [ |
|
268 |
// { |
|
269 |
// required: true, |
|
270 |
// trigger: 'change', |
|
271 |
// validator(_, value) { |
|
272 |
// if (isArray(value) && value.length > 0) { |
|
273 |
// return Promise.resolve(); |
|
274 |
// } else { |
|
275 |
// return Promise.reject('请选择上传图片'); |
|
276 |
// } |
|
277 |
// }, |
|
278 |
// }, |
|
279 |
// ], |
|
280 |
}, |
|
281 |
{ |
b5c161
|
282 |
field: 'birthday', |
S |
283 |
label: '生日', |
|
284 |
component: 'DatePicker', |
7450a2
|
285 |
componentProps: { |
b5c161
|
286 |
style: 'width: 100%;', |
7450a2
|
287 |
format: 'YYYY-MM-DD', |
S |
288 |
}, |
b5c161
|
289 |
colProps: {span: 16}, |
S |
290 |
}, |
|
291 |
{ |
|
292 |
component: 'Select', |
|
293 |
label: '职级', |
|
294 |
field: 'rank', |
7450a2
|
295 |
colProps: {span: 24}, |
S |
296 |
componentProps: { |
b5c161
|
297 |
options: [ |
7450a2
|
298 |
{ |
b5c161
|
299 |
label: '普通职员', |
S |
300 |
value: '1', |
7450a2
|
301 |
}, |
b5c161
|
302 |
{ |
S |
303 |
label: '中层管理者', |
|
304 |
value: '2', |
|
305 |
}, |
|
306 |
{ |
|
307 |
label: '高层管理者', |
|
308 |
value: '3', |
|
309 |
}, |
|
310 |
], |
7450a2
|
311 |
}, |
S |
312 |
}, |
b5c161
|
313 |
// { |
S |
314 |
// field: 'remindTime2', |
|
315 |
// component: 'DatePicker', |
|
316 |
// label: '', |
|
317 |
// colProps: { |
|
318 |
// span: 6, |
|
319 |
// offset: 2, |
|
320 |
// }, |
|
321 |
// componentProps: { |
|
322 |
// // disabledDate:(currentDate)=>{ |
|
323 |
// // // Logger.log('currentDate',currentDate) |
|
324 |
// // // 禁用今天之前的天数 |
|
325 |
// // return currentDate && currentDate < dayjs().subtract(1, 'day'); |
|
326 |
// // } |
|
327 |
// }, |
|
328 |
// dynamicRules: ({values}) => { |
|
329 |
// return [ |
|
330 |
// { |
|
331 |
// // required: true, |
|
332 |
// validator: (_, value) => { |
|
333 |
// if (values.remindTime === '6') { |
|
334 |
// if (!value) { |
|
335 |
// return Promise.reject('不能为空'); |
|
336 |
// } |
|
337 |
// } |
|
338 |
// |
|
339 |
// return Promise.resolve(); |
|
340 |
// }, |
|
341 |
// }, |
|
342 |
// ]; |
|
343 |
// }, |
|
344 |
// show: ({values}) => { |
|
345 |
// // Logger.log('vvv',values) |
|
346 |
// return values.remindTime === '6'; |
|
347 |
// }, |
|
348 |
// }, |
7450a2
|
349 |
]; |