491 lines
19 KiB
HTML
491 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>开票信息 · 快速识别 Demo</title>
|
||
<style>
|
||
:root {
|
||
--primary: #10b981;
|
||
--primary-dark: #059669;
|
||
--primary-bg: #ecfdf5;
|
||
--text: #1e293b;
|
||
--muted: #64748b;
|
||
--border: #e2e8f0;
|
||
--panel: #f8fafc;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
||
color: var(--text);
|
||
background: linear-gradient(160deg, #ecfdf5 0%, #f8fafc 40%, #eef2ff 100%);
|
||
min-height: 100vh;
|
||
padding: 32px 20px 48px;
|
||
}
|
||
.page { max-width: 1100px; margin: 0 auto; }
|
||
h1 { font-size: 22px; margin: 0 0 6px; }
|
||
.lead { color: var(--muted); margin: 0 0 24px; font-size: 14px; line-height: 1.6; }
|
||
.tabs {
|
||
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
|
||
}
|
||
.tab {
|
||
border: 1px solid var(--border);
|
||
background: #fff;
|
||
border-radius: 999px;
|
||
padding: 8px 14px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
color: var(--text);
|
||
}
|
||
.tab.active {
|
||
background: var(--primary);
|
||
border-color: var(--primary);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
.stage {
|
||
background: #fff;
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
|
||
overflow: hidden;
|
||
}
|
||
.stage-head {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--panel);
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
.stage-body { padding: 20px; background: var(--panel); }
|
||
.dialog {
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--border);
|
||
box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
|
||
overflow: hidden;
|
||
}
|
||
.dialog-hd {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 14px 18px; border-bottom: 1px solid var(--border);
|
||
font-weight: 600; font-size: 15px;
|
||
}
|
||
.dialog-bd { padding: 16px 18px; }
|
||
.dialog-ft {
|
||
display: flex; justify-content: flex-end; gap: 8px;
|
||
padding: 12px 18px; border-top: 1px solid var(--border);
|
||
}
|
||
.paste {
|
||
border: 1px dashed #6ee7b7;
|
||
background: var(--primary-bg);
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
margin-bottom: 14px;
|
||
}
|
||
.paste-hd {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
.paste-title { font-weight: 600; color: var(--primary-dark); }
|
||
.paste-tip { font-size: 11px; color: var(--muted); }
|
||
textarea {
|
||
width: 100%;
|
||
min-height: 120px;
|
||
border: 1px solid #a7f3d0;
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
resize: vertical;
|
||
color: var(--text);
|
||
background: #fff;
|
||
}
|
||
.row-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
|
||
.btn {
|
||
height: 32px; padding: 0 14px; border-radius: 8px;
|
||
border: 1px solid #cbd5e1; background: #fff; color: #475569;
|
||
font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
|
||
}
|
||
.btn-primary {
|
||
background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
|
||
}
|
||
.btn-primary:hover { background: var(--primary-dark); }
|
||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
.span2 { grid-column: 1 / -1; }
|
||
label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
|
||
input, .fake-input {
|
||
width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 8px;
|
||
padding: 0 10px; font-size: 13px; background: #fff; color: var(--text);
|
||
}
|
||
input.filled { border-color: var(--primary); background: #f0fdf4; }
|
||
.msg {
|
||
margin: 10px 0 0; font-size: 12px; color: var(--primary-dark);
|
||
min-height: 18px;
|
||
}
|
||
.msg.warn { color: #d97706; }
|
||
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
|
||
.panel-title {
|
||
font-weight: 600; margin-bottom: 12px; padding-left: 8px;
|
||
border-left: 3px solid var(--primary);
|
||
}
|
||
.table {
|
||
background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
|
||
}
|
||
.thead, .trow {
|
||
display: grid; grid-template-columns: 48px 1.4fr 1.2fr 1.6fr 72px;
|
||
gap: 8px; padding: 10px 12px; font-size: 12px;
|
||
}
|
||
.thead { background: #f1f5f9; color: var(--muted); font-weight: 600; }
|
||
.empty { padding: 28px; text-align: center; color: #94a3b8; font-size: 13px; }
|
||
.note {
|
||
margin-top: 16px; padding: 12px 14px; border-radius: 8px;
|
||
background: #fff; border: 1px solid var(--border); font-size: 13px; color: var(--muted); line-height: 1.6;
|
||
}
|
||
.hidden { display: none !important; }
|
||
@media (max-width: 720px) {
|
||
.grid { grid-template-columns: 1fr; }
|
||
.thead, .trow { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<h1>客户管理 · 开票信息「快速识别」交互 Demo</h1>
|
||
<p class="lead">
|
||
粘贴客户发来的开票资料文本，一键解析并填入表单字段。
|
||
下方可切换三种入口方案；方案 A 可直接点「识别并填入」试效果。
|
||
</p>
|
||
|
||
<div class="tabs">
|
||
<button class="tab active" data-tab="a">A · 表单顶部折叠区（推荐）</button>
|
||
<button class="tab" data-tab="b">B · 工具栏「快速识别新增」</button>
|
||
<button class="tab" data-tab="c">C · 二级小弹窗</button>
|
||
</div>
|
||
|
||
<!-- A -->
|
||
<div class="stage" id="pane-a">
|
||
<div class="stage-head">方案 A：新增/编辑弹窗内顶部粘贴区 → 识别后回填下方输入框</div>
|
||
<div class="stage-body">
|
||
<div class="dialog">
|
||
<div class="dialog-hd">
|
||
<span>添加开票信息</span>
|
||
<span style="color:#94a3b8;font-weight:400;">✕</span>
|
||
</div>
|
||
<div class="dialog-bd">
|
||
<div class="paste">
|
||
<div class="paste-hd">
|
||
<span class="paste-title">⚡ 粘贴识别</span>
|
||
<span class="paste-tip">支持常见「开票资料」文本格式</span>
|
||
</div>
|
||
<textarea id="pasteA" placeholder="在此粘贴开票资料…"></textarea>
|
||
<div class="row-actions">
|
||
<button class="btn" type="button" id="clearA">清空</button>
|
||
<button class="btn" type="button" id="sampleA">填入样例</button>
|
||
<button class="btn btn-primary" type="button" id="recognizeA">识别并填入</button>
|
||
</div>
|
||
<p class="msg" id="msgA"></p>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="span2">
|
||
<label>单位名称（章）</label>
|
||
<input id="f-companyName" placeholder="请输入单位名称" />
|
||
</div>
|
||
<div class="span2">
|
||
<label>税号</label>
|
||
<input id="f-taxNo" placeholder="请输入税号" />
|
||
</div>
|
||
<div class="span2">
|
||
<label>单位地址</label>
|
||
<input id="f-companyAddress" placeholder="请输入单位地址" />
|
||
</div>
|
||
<div>
|
||
<label>电话/传真</label>
|
||
<input id="f-phoneFax" placeholder="请输入电话/传真" />
|
||
</div>
|
||
<div>
|
||
<label>开户银行</label>
|
||
<input id="f-bankName" placeholder="请输入开户银行" />
|
||
</div>
|
||
<div class="span2">
|
||
<label>账号</label>
|
||
<input id="f-bankAccount" placeholder="请输入账号" />
|
||
</div>
|
||
<div class="span2">
|
||
<label>备注（未映射字段可写入）</label>
|
||
<input id="f-remark" placeholder="银行行号 / 邮编 / 邮寄信息等" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-ft">
|
||
<button class="btn" type="button">取消</button>
|
||
<button class="btn btn-primary" type="button">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- B -->
|
||
<div class="stage hidden" id="pane-b">
|
||
<div class="stage-head">方案 B：开票信息列表工具栏增加「快速识别新增」</div>
|
||
<div class="stage-body">
|
||
<div class="panel-title">开票信息</div>
|
||
<div class="toolbar">
|
||
<button class="btn btn-primary" type="button">＋ 添加开票信息</button>
|
||
<button class="btn" type="button" id="openB">📋 快速识别新增</button>
|
||
</div>
|
||
<div class="table">
|
||
<div class="thead"><span>#</span><span>单位名称</span><span>税号</span><span>开户银行</span><span>默认</span></div>
|
||
<div class="empty">暂无开票信息，请点击「添加开票信息」或「快速识别新增」</div>
|
||
</div>
|
||
|
||
<div class="dialog hidden" id="dialogB" style="margin-top:16px;">
|
||
<div class="dialog-hd"><span>快速识别新增</span><span style="color:#94a3b8;font-weight:400;">✕</span></div>
|
||
<div class="dialog-bd">
|
||
<textarea id="pasteB" style="min-height:140px;" placeholder="粘贴开票资料后点识别…"></textarea>
|
||
<div class="row-actions">
|
||
<button class="btn" type="button" id="sampleB">填入样例</button>
|
||
<button class="btn btn-primary" type="button" id="recognizeB">识别并打开表单</button>
|
||
</div>
|
||
<p class="msg" id="msgB"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- C -->
|
||
<div class="stage hidden" id="pane-c">
|
||
<div class="stage-head">方案 C：新增弹窗标题旁「粘贴识别」→ 二级小窗</div>
|
||
<div class="stage-body">
|
||
<div class="dialog" style="position:relative;">
|
||
<div class="dialog-hd">
|
||
<span>添加开票信息</span>
|
||
<button class="btn" type="button" id="openC" style="height:28px;font-size:12px;color:var(--primary-dark);border-color:#a7f3d0;background:var(--primary-bg);">⚡ 粘贴识别</button>
|
||
</div>
|
||
<div class="dialog-bd" style="opacity:.55;">
|
||
<div class="grid">
|
||
<div class="span2"><label>单位名称（章）</label><input placeholder="请输入单位名称" disabled /></div>
|
||
<div class="span2"><label>税号</label><input placeholder="请输入税号" disabled /></div>
|
||
</div>
|
||
</div>
|
||
<div class="dialog hidden" id="dialogC" style="position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);width:86%;z-index:3;box-shadow:0 16px 48px rgba(15,23,42,.2);">
|
||
<div class="dialog-hd"><span>粘贴开票资料</span></div>
|
||
<div class="dialog-bd">
|
||
<textarea id="pasteC" style="min-height:100px;"></textarea>
|
||
<div class="row-actions">
|
||
<button class="btn" type="button" id="sampleC">填入样例</button>
|
||
<button class="btn btn-primary" type="button" id="recognizeC">识别</button>
|
||
</div>
|
||
<p class="msg" id="msgC"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="note">
|
||
<strong style="color:var(--text);">字段映射（与现表单一致）：</strong>
|
||
公司名称/单位名 → 单位名称；纳税人识别号/税号 → 税号；地址 → 单位地址；
|
||
电话/传真 → 电话/传真；开户行/银行开户行 → 开户银行；帐号/账号 → 账号（自动去空格）。
|
||
「地址及电话」合并行会拆分。银行行号、邮编、发票邮寄地址无独立字段时写入备注。
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const SAMPLE_1 = `开票资料：
|
||
公司名称:安庆市山峡化工有限公司
|
||
纳税人识别号:9134080006084212XH
|
||
开户行:中国建设银行安庆分行城中支行
|
||
帐号:34050168860800000121
|
||
银行行号：105368000056
|
||
地址:安徽省安庆市高新区霞虹路5号
|
||
电话/传真:0556-5348918
|
||
邮编:246000
|
||
发票邮寄地址：
|
||
姓名：汪璇
|
||
电话：18895395317
|
||
地址：安徽省安庆市高新区霞虹路5号`
|
||
|
||
const SAMPLE_2 = `单位名：安徽江峰生物科技有限公司
|
||
税 号：91340200MA8PYJNB8X
|
||
地址及电话：安徽省芜湖市皖江江北新兴产业集中区沈巷片区起步区皖跃路与和睦路交叉口西南角福州路4号
|
||
银行开户行：中国建设银行芜湖经开区支行
|
||
账 号：3405 0167 8808 0000 2481
|
||
银行行号：1053 6205 0066
|
||
电话：0553-5201019`
|
||
|
||
function normalizeSpaces(s) {
|
||
return (s || '').replace(/\s+/g, ' ').trim()
|
||
}
|
||
|
||
function pick(text, patterns) {
|
||
for (const re of patterns) {
|
||
const m = text.match(re)
|
||
if (m && m[1]) return normalizeSpaces(m[1])
|
||
}
|
||
return ''
|
||
}
|
||
|
||
function parseInvoicePaste(raw) {
|
||
const text = (raw || '').replace(/\r\n/g, '\n')
|
||
const warnings = []
|
||
const result = {
|
||
companyName: '',
|
||
taxNo: '',
|
||
companyAddress: '',
|
||
phoneFax: '',
|
||
bankName: '',
|
||
bankAccount: '',
|
||
remarkExtra: []
|
||
}
|
||
|
||
result.companyName = pick(text, [
|
||
/(?:公司名称|单位名称|单位名|名称)\s*[:：]\s*(.+)/,
|
||
])
|
||
result.taxNo = pick(text, [
|
||
/(?:纳税人识别号|纳税识别号|统一社会信用代码|税\s*号|税号)\s*[:：]\s*([0-9A-Za-z]+)/,
|
||
])
|
||
result.bankName = pick(text, [
|
||
/(?:银行开户行|开户银行|开户行)\s*[:：]\s*(.+)/,
|
||
])
|
||
let account = pick(text, [
|
||
/(?:银行账号|账\s*号|帐\s*号|账号|帐号)\s*[:：]\s*([0-9\s]+)/,
|
||
])
|
||
if (account) result.bankAccount = account.replace(/\s+/g, '')
|
||
|
||
const addrPhone = pick(text, [/(?:地址及电话)\s*[:：]\s*(.+)/])
|
||
if (addrPhone) {
|
||
const phoneInAddr = addrPhone.match(/(0\d{2,3}-?\d{7,8}|1\d{10})$/)
|
||
if (phoneInAddr) {
|
||
result.phoneFax = phoneInAddr[1]
|
||
result.companyAddress = normalizeSpaces(addrPhone.slice(0, phoneInAddr.index))
|
||
} else {
|
||
result.companyAddress = addrPhone
|
||
}
|
||
} else {
|
||
// 优先取「开票资料」段的地址，避开「发票邮寄地址」块内的地址
|
||
const beforeMail = text.split(/发票邮寄地址/)[0] || text
|
||
result.companyAddress = pick(beforeMail, [/(?:单位地址|地\s*址|地址)\s*[:：]\s*(.+)/])
|
||
}
|
||
|
||
result.phoneFax = result.phoneFax || pick(text, [
|
||
/(?:电话\/传真|电话\/传貞|电话传真|传真)\s*[:：]\s*(.+)/,
|
||
/(?:^|\n)\s*电\s*话\s*[:：]\s*(.+)/,
|
||
])
|
||
|
||
const bankCode = pick(text, [/(?:银行行号|联行号|行号)\s*[:：]\s*([0-9\s]+)/])
|
||
if (bankCode) result.remarkExtra.push('银行行号：' + bankCode.replace(/\s+/g, ''))
|
||
const zip = pick(text, [/(?:邮\s*编|邮编)\s*[:：]\s*(\d{6})/])
|
||
if (zip) result.remarkExtra.push('邮编：' + zip)
|
||
|
||
const mailBlock = text.split(/发票邮寄地址\s*[:：]?/)[1]
|
||
if (mailBlock) {
|
||
const name = pick(mailBlock, [/(?:姓\s*名|姓名)\s*[:：]\s*(.+)/])
|
||
const phone = pick(mailBlock, [/(?:电\s*话|电话|手机)\s*[:：]\s*(.+)/])
|
||
const addr = pick(mailBlock, [/(?:地\s*址|地址)\s*[:：]\s*(.+)/])
|
||
const parts = []
|
||
if (name) parts.push('收件人 ' + name)
|
||
if (phone) parts.push(phone)
|
||
if (addr) parts.push(addr)
|
||
if (parts.length) result.remarkExtra.push('邮寄：' + parts.join(' / '))
|
||
}
|
||
|
||
if (!result.companyName) warnings.push('未识别到单位名称')
|
||
if (!result.taxNo) warnings.push('未识别到税号')
|
||
return { result, warnings }
|
||
}
|
||
|
||
function applyToForm(parsed) {
|
||
const map = {
|
||
companyName: 'f-companyName',
|
||
taxNo: 'f-taxNo',
|
||
companyAddress: 'f-companyAddress',
|
||
phoneFax: 'f-phoneFax',
|
||
bankName: 'f-bankName',
|
||
bankAccount: 'f-bankAccount',
|
||
}
|
||
Object.keys(map).forEach((k) => {
|
||
const el = document.getElementById(map[k])
|
||
const v = parsed.result[k] || ''
|
||
el.value = v
|
||
el.classList.toggle('filled', !!v)
|
||
})
|
||
const remark = document.getElementById('f-remark')
|
||
remark.value = parsed.result.remarkExtra.join('；')
|
||
remark.classList.toggle('filled', !!remark.value)
|
||
}
|
||
|
||
function runRecognize(textareaId, msgId, apply) {
|
||
const raw = document.getElementById(textareaId).value
|
||
const parsed = parseInvoicePaste(raw)
|
||
if (apply) applyToForm(parsed)
|
||
const msg = document.getElementById(msgId)
|
||
if (!raw.trim()) {
|
||
msg.className = 'msg warn'
|
||
msg.textContent = '请先粘贴开票资料文本'
|
||
return
|
||
}
|
||
const filled = ['companyName','taxNo','companyAddress','phoneFax','bankName','bankAccount']
|
||
.filter((k) => parsed.result[k]).length
|
||
msg.className = 'msg' + (parsed.warnings.length ? ' warn' : '')
|
||
msg.textContent = `已识别 ${filled} 个字段` +
|
||
(parsed.result.remarkExtra.length ? `，另有 ${parsed.result.remarkExtra.length} 项写入备注` : '') +
|
||
(parsed.warnings.length ? '；' + parsed.warnings.join('；') : '')
|
||
}
|
||
|
||
document.querySelectorAll('.tab').forEach((tab) => {
|
||
tab.addEventListener('click', () => {
|
||
document.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'))
|
||
tab.classList.add('active')
|
||
;['a','b','c'].forEach((k) => {
|
||
document.getElementById('pane-' + k).classList.toggle('hidden', k !== tab.dataset.tab)
|
||
})
|
||
})
|
||
})
|
||
|
||
document.getElementById('pasteA').value = SAMPLE_1
|
||
document.getElementById('sampleA').onclick = () => {
|
||
document.getElementById('pasteA').value =
|
||
document.getElementById('pasteA').value.includes('安庆市山峡') ? SAMPLE_2 : SAMPLE_1
|
||
}
|
||
document.getElementById('clearA').onclick = () => {
|
||
document.getElementById('pasteA').value = ''
|
||
document.getElementById('msgA').textContent = ''
|
||
}
|
||
document.getElementById('recognizeA').onclick = () => runRecognize('pasteA', 'msgA', true)
|
||
|
||
document.getElementById('openB').onclick = () => {
|
||
document.getElementById('dialogB').classList.remove('hidden')
|
||
document.getElementById('pasteB').value = SAMPLE_2
|
||
}
|
||
document.getElementById('sampleB').onclick = () => {
|
||
document.getElementById('pasteB').value = SAMPLE_1
|
||
}
|
||
document.getElementById('recognizeB').onclick = () => {
|
||
runRecognize('pasteB', 'msgB', true)
|
||
document.querySelector('[data-tab="a"]').click()
|
||
document.getElementById('pasteA').value = document.getElementById('pasteB').value
|
||
}
|
||
|
||
document.getElementById('openC').onclick = () => {
|
||
document.getElementById('dialogC').classList.toggle('hidden')
|
||
if (!document.getElementById('pasteC').value) document.getElementById('pasteC').value = SAMPLE_1
|
||
}
|
||
document.getElementById('sampleC').onclick = () => {
|
||
document.getElementById('pasteC').value = SAMPLE_2
|
||
}
|
||
document.getElementById('recognizeC').onclick = () => {
|
||
runRecognize('pasteC', 'msgC', true)
|
||
document.getElementById('dialogC').classList.add('hidden')
|
||
document.querySelector('[data-tab="a"]').click()
|
||
document.getElementById('pasteA').value = document.getElementById('pasteC').value
|
||
}
|
||
|
||
// 首次自动演示一次
|
||
runRecognize('pasteA', 'msgA', true)
|
||
</script>
|
||
</body>
|
||
</html>
|