xpn-antd

橡皮泥内扩展 ant 组件

Usage no npm install needed!

<script type="module">
  import xpnAntd from 'https://cdn.skypack.dev/xpn-antd';
</script>

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