BizCreditCodeInput 信用代码输入

统一社会信用代码录入（GB 32100-2015）：18 位字符集过滤（数字 + 22 个大写字母，不含 I/O/S/V/Z）、模 31 加权校验位校验；校验通过后解析登记管理部门、登记管理机关区划码、主体标识码。企业工商信息登记、合同主体录入、企业开户。

基础用法

工商区划 330100主体码 MA27XW8LX

18 位 GB 32100-2015：非法字符（I/O/S/V/Z）自动过滤，校验位不匹配给出红色原因； 校验通过后下方解析登记管理部门 / 区划码 / 主体标识码。

实时校验 + 结构解析标签（部门 / 区划 / 主体码）。

<script setup lang="ts">
/** 场景：合同甲方信息录入——统一社会信用代码实时校验 + 结构解析标签 */
import { ref } from 'vue'
import { BizCreditCodeInput } from 'vue3-ep-biz-lib'

const creditCode = ref('91330100MA27XW8LXH')
</script>

<template>
  <div style="max-width: 460px">
    <BizCreditCodeInput v-model="creditCode" />
    <p style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      18 位 GB 32100-2015：非法字符（I/O/S/V/Z）自动过滤，校验位不匹配给出红色原因；
      校验通过后下方解析登记管理部门 / 区划码 / 主体标识码。
    </p>
  </div>
</template>

显示代码

change 事件（联动工商查询）

change 携带 BizCreditCodeInfo，便于触发工商信息联动查询。

<script setup lang="ts">
/** 场景：企业客户建档——change 事件携带解析结果，便于联动工商信息查询 */
import { ref } from 'vue'
import { BizCreditCodeInput } from 'vue3-ep-biz-lib'
import type { BizCreditCodeInfo } from 'vue3-ep-biz-lib'

const creditCode = ref('91110000633674095N')
const lastInfo = ref<BizCreditCodeInfo | null>(null)

const onChange = (_value: string, info: BizCreditCodeInfo): void => {
  lastInfo.value = info
}
</script>

<template>
  <div style="max-width: 460px">
    <BizCreditCodeInput v-model="creditCode" :show-info="false" @change="onChange" />
    <div
      v-if="lastInfo"
      style="margin-top: 10px; font-size: 13px; color: var(--el-text-color-secondary); line-height: 22px"
    >
      change 事件 → 部门：{{ lastInfo.dept || '—' }} ｜ 区划：{{ lastInfo.regionCode || '—' }} ｜
      主体码：{{ lastInfo.orgCode || '—' }} ｜ 校验：{{ lastInfo.valid ? '通过' : lastInfo.message }}
    </div>
  </div>
</template>

显示代码

存量主体容错

工商区划 330100主体码 MA27XW8LX

末位校验码故意填错仍通过：字符集与长度校验保留，模 31 校验位跳过

skip-checksum 跳过模 31 校验位（字符集与长度校验保留）。

<script setup lang="ts">
/** 场景：存量主体容错——旧库中校验位登记错误的主体，跳过校验位仅做字符集校验 */
import { ref } from 'vue'
import { ElAlert } from 'element-plus'
import { BizCreditCodeInput } from 'vue3-ep-biz-lib'

const creditCode = ref('91330100MA27XW8LX9')
</script>

<template>
  <div style="max-width: 460px">
    <BizCreditCodeInput v-model="creditCode" skip-checksum placeholder="存量主体代码" />
    <ElAlert
      style="margin-top: 12px"
      type="info"
      :closable="false"
      show-icon
      title="末位校验码故意填错仍通过：字符集与长度校验保留，模 31 校验位跳过"
    />
  </div>
</template>

显示代码

只读回显

disabled 用于合同详情回显。

<script setup lang="ts">
/** 场景：合同详情只读回显 */
import { ref } from 'vue'
import { BizCreditCodeInput } from 'vue3-ep-biz-lib'

const creditCode = ref('91330100MA27XW8LXH')
</script>

<template>
  <div style="max-width: 460px">
    <BizCreditCodeInput v-model="creditCode" disabled :show-info="false" :show-error="false" />
  </div>
</template>

显示代码

企业开户三件套

企业名称

统一信用代码

法人身份证

对公账户卡号

与 BizIdCardInput、BizBankCardInput 组成证件 / 金融录入族。

<script setup lang="ts">
/** 场景：企业开户三件套——信用代码 + 法人身份证 + 对公账户卡组合录入 */
import { ref } from 'vue'
import { ElButton, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus'
import { BizBankCardInput, BizCreditCodeInput, BizIdCardInput } from 'vue3-ep-biz-lib'

const form = ref({
  companyName: '',
  creditCode: '',
  legalId: '',
  accountCard: '',
})

const submit = (): void => {
  if (!form.value.companyName) {
    ElMessage.warning('请填写企业名称')
    return
  }
  if (form.value.creditCode.length !== 18) {
    ElMessage.warning('统一社会信用代码须 18 位')
    return
  }
  ElMessage.success('开户信息已提交待审核')
}
</script>

<template>
  <div style="max-width: 520px">
    <ElForm label-width="110px">
      <ElFormItem label="企业名称">
        <ElInput v-model="form.companyName" placeholder="营业执照全称" />
      </ElFormItem>
      <ElFormItem label="统一信用代码">
        <BizCreditCodeInput v-model="form.creditCode" :show-info="false" />
      </ElFormItem>
      <ElFormItem label="法人身份证">
        <BizIdCardInput v-model="form.legalId" :show-info="false" />
      </ElFormItem>
      <ElFormItem label="对公账户卡号">
        <BizBankCardInput v-model="form.accountCard" :show-info="false" />
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" @click="submit">提交开户申请</ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

显示代码

代码结构说明

工商区划 330100主体码 MA27XW8LX

结构：第 1 位登记管理部门 · 第 2 位机构类别 · 第 3~8 位登记管理机关区划 · 第 9~17 位主体标识码 · 第 18 位校验位

结合 show-info 解析结果讲解信用代码五段结构。

<script setup lang="ts">
/** 场景：代码结构教学——show-info 解析三段结构，输入框联动讲解信用代码构成 */
import { ref } from 'vue'
import { ElAlert } from 'element-plus'
import { BizCreditCodeInput } from 'vue3-ep-biz-lib'

const creditCode = ref('91330100MA27XW8LXH')
</script>

<template>
  <div style="max-width: 460px">
    <BizCreditCodeInput v-model="creditCode" />
    <ElAlert
      style="margin-top: 12px"
      type="info"
      :closable="false"
      show-icon
      title="结构：第 1 位登记管理部门 · 第 2 位机构类别 · 第 3~8 位登记管理机关区划 · 第 9~17 位主体标识码 · 第 18 位校验位"
    />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
model-value / v-model	string	''	代码原文（自动大写、过滤字符集外字符）
placeholder	string	'请输入 18 位统一社会信用代码'	占位文案
disabled	boolean	false	只读
clearable	boolean	true	可清空
show-error	boolean	true	校验失败时展示原因
show-info	boolean	true	校验通过时展示结构信息标签
skip-checksum	boolean	false	跳过模 31 校验位验证

Events

事件名	参数	说明
update:model-value	(value: string)	规范化后的代码更新
change	(value: string, info: BizCreditCodeInfo)	值变化携带解析结果
blur	(event: FocusEvent)	失焦

Expose

名称	类型	说明
validate	() => BizCreditCodeInfo	主动校验，返回 { value, valid, message, dept, regionCode, orgCode }