xpn-antd
Version:
橡皮泥内扩展 ant 组件
316 lines (264 loc) • 7.69 kB
Markdown
橡皮泥内扩展 ant 组件
```
$ npm i xpn-antd
```
* JdInputAddress - 省市区联级选择
* JdInputBankAccount - 银行账户输入框
* JdInputBlic - 经营执照输入框
* JdInputBlicAdvanced - 经营执照输入框 OCR
* JdInputBMap - 百度地图坐标输入框
* JdInputIdCard - 公民身份证输入框
* JdInputIdCardAdvanced - 公民身份证输入框 OCR
* JdLazyForm - 封装表单（不推荐使用）
* JdLazyList - 封装列表（不推荐使用）
* JdMultipleCascader - 联级选择（多选）
* JdUploadIdCard - 身份证正背面上传
> 因为 antd 本身并不支持联级多选，此组件封装了京东内部的 fand 联级。
``` html
<a-jd-multiple-cascader
:loadOptions="handleLoadOptions"
checkStrictly
clearable
placeholder="请输入适用行业"
v-decorator="['industry',{rules:[{required:true,message:'请选择适用行业'}]}]"
/>
```
``` javascript
import { JdMultipleCascader } from "xpn-antd";
export default {
/**
* 组件列表
*/
components: {
"a-jd-multiple-cascader": JdMultipleCascader
}, // end components
/**
* 方法列表
*/
methods: {
/**
* 获取行业类型
*/
async handleLoadOptions(node) {
return await svc.getIndustryOptions({
parentId: node.root ? null : node.value // [{ value:0, label:"京东商城", isLeaf:true }]
});
},
} // end methods
}; // end export
```
``` html
<a-jd-input-blic
:disabled="disabled"
:loadCityOptions="handleLoadCityOptions"
:loadProvinceOptions="handleLoadProvinceOptions"
:upload="handleUpload"
v-decorator="['blic',{rules:[{required:true,message:'营业执照填写不完整'}]}]" />
```
```javascript
import { svc } from "service";
import { JdInputBlicAdvanced } from "xpn-antd";
export default {
/**
* 组件列表
*/
components: {
"a-jd-input-blic": JdInputBlicAdvanced
}, // end components
/**
* 数据列表
*/
data() {
return {
// 禁止修改信息，全部或局部
disabled: false || {
name: false,
number: false,
expire: false,
address: false,
city: false,
scope: false,
photo: false
} // end disabled
};
}, // end data
/**
* 方法列表
*/
methods: {
/**
* 载入省份列表
*/
handleLoadProvinceOptions() { // promise<array<{label:string|number, value:string}>>
return svc.getProvinceOptions(); // [{value:223000, label:"江苏省"}]
},
/**
* 载入城市列表
*/
handleLoadCityOptions(evnt) { // promise<array<{label:string|number, value:string}>>
return svc.getCityOptions({ provinceId: evnt.value }); // [{value:223800, label:"宿迁市"}]
},
/**
* 上传文件
*/
async handleUpload(task) {
// 调用接口上传文件
const ret = await svc.uploadFile({ file: task.file });
// 光学字符识别
const ocr = await svc.ocrBlic({ fid: ret.fid });
// 标记成功状态，回填图像识别内容
return { uid: ret.fid, url: ret.url, ...ocr };
}
} // end methods
}; // end export
```
``` html
<a-jd-input-id-card
:disabled="disabled"
:uploadBackPhoto="(e)=>handleUpload(e,'back')"
:uploadFrontPhoto="(e)=>handleUpload(e,'front')"
v-decorator="['idCard',{rules:[{required:true,message:'身份证件填写不完整'}]}]"
/>
```
```javascript
import { svc } from "service";
import { JdInputIdCardAdvanced } from "xpn-antd";
export default {
/**
* 组件列表
*/
components: {
"a-jd-input-id-card": JdInputIdCardAdvanced
}, // end components
/**
* 数据列表
*/
data() {
return {
// 禁止修改信息，全部或局部
disabled: false || {
name: false,
number: false,
expire: false,
frontPhoto: false,
backPhoto: false
} // end disabled
};
}, // end data
/**
* 方法列表
*/
methods: {
/**
* 上传文件
*/
async handleUpload(task, type) {
// 调用接口上传文件
const ret = await svc.uploadFile({ file: task.file });
// 光学字符识别
const ocr = await svc.ocrIdCard({ fid: ret.fid, type });
// 标记成功状态，回填图像识别内容
return { uid: ret.fid, url: ret.url, ...ocr };
},
} // end methods
}; // end export
```
```html
<a-jd-input-bank-account
:disabled="disabled"
:loadBankOptions="handleLoadBankOptions"
:loadCityOptions="handleLoadCityOptions"
:loadProvinceOptions="handleLoadProvinceOptions"
:loadSubBankOptions="handleLoadSubBankOptions"
:type="type"
v-decorator="['bankAccount',{rules:[{required:true,message:'银行账户填写不完整'}]}]" />
```
```javascript
import { svc } from "service";
import { JdInputBankAccount } from "xpn-antd";
export default {
/**
* 组件列表
*/
components: {
"a-jd-input-bank-account": JdInputBankAccount
}, // end components
/**
* 数据列表
*/
data() {
return {
// 账户类型
type: "enterprise" || "personal",
// 禁止修改信息，全部或局部
disabled: false || {
bank: false,
subBank: false,
account: false
} // end disabled
};
}, // end data
/**
* 方法列表
*/
methods: {
/**
* 载入省份列表
*/
handleLoadProvinceOptions() { // promise<array<{label:string|number, value:string}>>
return svc.getProvinceOptions(); // [{value:223000, label:"江苏省"}]
},
/**
* 载入城市列表
*/
handleLoadCityOptions(evnt) { // promise<array<{label:string|number, value:string}>>
return svc.getCityOptions({ provinceId: evnt.value }); // [{value:223800, label:"宿迁市"}]
},
/**
* 载入银行列表
*/
handleLoadBankOptions() { // promise<array<{label:string|number, value:string}>>
return svc.getBankOptions(); // [{value:"icbc", label:"工商银行"}]
},
/**
* 载入支行列表
*/
handleLoadSubBankOptions(evnt) { // promise<array<{label:string|number, value:string}>>
return svc.getSubBankOptions({ bank: evnt.bank, city: evnt.city }); // [{value:"2020", label:"北京东经路支行"}]
},
} // end methods
}; // end export
```
``` html
<a-jd-input-bmap v-decorator="['bmap',{rules:[{required:true, message:'地图信息不能为空'}]}]" ref="bmap" />
```
```javascript
import { JdInputBMap } from "xpn-antd";
export default {
/**
* 组件列表
*/
components: {
"a-jd-input-bmap": JdInputBMap
},// end components
/**
* 实例被挂载后调用
*/
mounted() {
setTimeout(()=> $refs.bmap.search("京东总部"), 2500);
}
} // end export
```