xpn-antd
v0.0.19
Published
橡皮泥内扩展 ant 组件
Downloads
34
Readme
xpn-antd
橡皮泥内扩展 ant 组件
安装
$ npm i xpn-antd
组件列表
- JdInputAddress - 省市区联级选择
- JdInputBankAccount - 银行账户输入框
- JdInputBlic - 经营执照输入框
- JdInputBlicAdvanced - 经营执照输入框 OCR
- JdInputBMap - 百度地图坐标输入框
- JdInputIdCard - 公民身份证输入框
- JdInputIdCardAdvanced - 公民身份证输入框 OCR
- JdLazyForm - 封装表单(不推荐使用)
- JdLazyList - 封装列表(不推荐使用)
- JdMultipleCascader - 联级选择(多选)
- JdUploadIdCard - 身份证正背面上传
联级选择(多选)
因为 antd 本身并不支持联级多选,此组件封装了京东内部的 fand 联级。
<a-jd-multiple-cascader
:loadOptions="handleLoadOptions"
checkStrictly
clearable
placeholder="请输入适用行业"
v-decorator="['industry',{rules:[{required:true,message:'请选择适用行业'}]}]"
/>
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
输入营业执照 OCR
<a-jd-input-blic
:disabled="disabled"
:loadCityOptions="handleLoadCityOptions"
:loadProvinceOptions="handleLoadProvinceOptions"
:upload="handleUpload"
v-decorator="['blic',{rules:[{required:true,message:'营业执照填写不完整'}]}]" />
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
输入居民身份证 OCR
<a-jd-input-id-card
:disabled="disabled"
:uploadBackPhoto="(e)=>handleUpload(e,'back')"
:uploadFrontPhoto="(e)=>handleUpload(e,'front')"
v-decorator="['idCard',{rules:[{required:true,message:'身份证件填写不完整'}]}]"
/>
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
输入银行账户
<a-jd-input-bank-account
:disabled="disabled"
:loadBankOptions="handleLoadBankOptions"
:loadCityOptions="handleLoadCityOptions"
:loadProvinceOptions="handleLoadProvinceOptions"
:loadSubBankOptions="handleLoadSubBankOptions"
:type="type"
v-decorator="['bankAccount',{rules:[{required:true,message:'银行账户填写不完整'}]}]" />
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
输入地图坐标
<a-jd-input-bmap v-decorator="['bmap',{rules:[{required:true, message:'地图信息不能为空'}]}]" ref="bmap" />
import { JdInputBMap } from "xpn-antd";
export default {
/**
* 组件列表
*/
components: {
"a-jd-input-bmap": JdInputBMap
},// end components
/**
* 实例被挂载后调用
*/
mounted() {
setTimeout(()=> $refs.bmap.search("京东总部"), 2500);
}
} // end export