实现Agent对话，合格自动提交，不合格补充材料的能力
This commit is contained in:
wandering
@@ -9,119 +9,49 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header text-center mb-4">
|
||||
<h3>财务报销自动化</h3>
|
||||
<p class="mb-0 opacity-75">上传发票 PDF 和支付截图，自动提取、LLM 识别并填报</p>
|
||||
</div>
|
||||
|
||||
<div class="container" style="max-width:960px">
|
||||
|
||||
<!-- 上传区域 -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="section-title">📄 发票 PDF <span class="text-muted fw-normal" style="font-size:12px">（多选）</span></div>
|
||||
<div class="upload-zone" id="pdf-zone" onclick="document.getElementById('pdf-input').click()">
|
||||
<div class="icon">📁</div>
|
||||
<div class="text-muted" style="font-size:13px">点击或拖拽上传 PDF 文件</div>
|
||||
<div id="pdf-list" class="mt-2"></div>
|
||||
<div class="main-container" style="max-width:960px">
|
||||
<!-- 聊天窗口 -->
|
||||
<div class="chat-container" id="chat-box">
|
||||
<div class="chat-messages" id="chat-messages">
|
||||
<div class="chat-welcome">
|
||||
<div class="ai-avatar"><img src="/static/icon/agent.svg" alt=""></div>
|
||||
<div class="chat-bubble system">你好！我是财务报销助手。请先上传 <b>config.json</b> 配置文件，然后上传发票 PDF 或支付截图，我将自动为您处理。</div>
|
||||
</div>
|
||||
<input type="file" id="pdf-input" accept=".pdf" multiple hidden onchange="handleFiles(this, 'pdf')">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="section-title">🖼️ 支付截图 <span class="text-muted fw-normal" style="font-size:12px">（多选）</span></div>
|
||||
<div class="upload-zone" id="img-zone" onclick="document.getElementById('img-input').click()">
|
||||
<div class="icon">🖼️</div>
|
||||
<div class="text-muted" style="font-size:13px">点击或拖拽上传图片文件</div>
|
||||
<div id="img-list" class="mt-2"></div>
|
||||
</div>
|
||||
<input type="file" id="img-input" accept="image/*" multiple hidden onchange="handleFiles(this, 'img')">
|
||||
</div>
|
||||
<div class="col-md-4 text-center">
|
||||
<div class="section-title">📱 手机扫码上传</div>
|
||||
<div id="qrcode" style="display:inline-block"></div>
|
||||
<p class="text-muted mt-2 mb-0" style="font-size:12px">扫码即可拍照上传</p>
|
||||
<div class="chat-input-area">
|
||||
<input type="text" id="chat-input" placeholder="输入消息..." onkeydown="handleChatKey(event)" />
|
||||
<button class="btn btn-primary" onclick="sendUserMessage()">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配置表单 -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="section-title">⚙️ 配置
|
||||
<span style="font-size:12px;font-weight:normal;cursor:pointer;color:#667eea;margin-left:8px" onclick="document.getElementById('config-upload').click()">
|
||||
📤 上传 config.json
|
||||
</span>
|
||||
<input type="file" id="config-upload" accept=".json" hidden onchange="handleConfigUpload(this)">
|
||||
</div>
|
||||
<div class="row g-2">
|
||||
<div class="col-sm-4">
|
||||
<label class="form-label" style="font-size:12px;margin-bottom:2px">账号 (工号)</label>
|
||||
<input type="text" class="form-control form-control-sm" id="cfg-username" placeholder="202xxxx">
|
||||
<!-- 上传区域（可折叠） -->
|
||||
<div class="upload-panel">
|
||||
<div class="upload-panel-header" onclick="toggleUploadPanel()">
|
||||
<span><img src="/static/icon/file.svg" alt="" style="width:14px;height:14px;vertical-align:middle;margin-right:4px">文件上传</span>
|
||||
<span class="upload-panel-toggle" id="upload-toggle-icon">▼</span>
|
||||
</div>
|
||||
<div class="upload-panel-body" id="upload-panel-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-8">
|
||||
<div class="upload-zone" id="file-zone" onclick="event.stopPropagation(); document.getElementById('file-input').click()">
|
||||
<div class="icon"><img src="/static/icon/folder.svg" alt=""></div>
|
||||
<div class="text-muted" style="font-size:13px">点击或拖拽上传文件（支持 PDF、图片）</div>
|
||||
</div>
|
||||
<input type="file" id="file-input" accept=".pdf,image/*,.json" multiple hidden onchange="handleFiles(this)">
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<label class="form-label" style="font-size:12px;margin-bottom:2px">密码</label>
|
||||
<input type="password" class="form-control form-control-sm" id="cfg-password" placeholder="登录密码">
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<label class="form-label" style="font-size:12px;margin-bottom:2px">默认姓名</label>
|
||||
<input type="text" class="form-control form-control-sm" id="cfg-name" placeholder="张三">
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label class="form-label" style="font-size:12px;margin-bottom:2px">公务卡号</label>
|
||||
<input type="text" class="form-control form-control-sm" id="cfg-card" placeholder="628288...">
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label class="form-label" style="font-size:12px;margin-bottom:2px">人员编号</label>
|
||||
<input type="text" class="form-control form-control-sm" id="cfg-person-id" placeholder="202xxxxx">
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label" style="font-size:12px;margin-bottom:2px">存放地点（出库单）</label>
|
||||
<input type="text" class="form-control form-control-sm" id="cfg-storage" placeholder="新工科楼">
|
||||
<div class="col-md-4 text-center">
|
||||
<div class="section-title"><img src="/static/icon/phone.svg" alt="" style="width:16px;height:16px;vertical-align:middle;margin-right:4px">手机扫码上传</div>
|
||||
<div id="qrcode" style="display:inline-block"></div>
|
||||
<p class="text-muted mt-2 mb-0" style="font-size:12px">扫码即可拍照上传</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="text-center mb-4">
|
||||
<button class="btn btn-primary btn-process" id="btn-start" onclick="startProcess()">开始处理</button>
|
||||
<span id="status" class="ms-3"></span>
|
||||
</div>
|
||||
|
||||
<!-- 下载区 -->
|
||||
<div class="card mb-4" id="download-section" style="display:none">
|
||||
<div class="card-body py-3">
|
||||
<div class="section-title mb-2">📥 下载文件</div>
|
||||
<div id="download-links" class="d-flex flex-wrap gap-2"></div>
|
||||
<div id="doc-fill-warning" class="text-warning mt-2" style="font-size:13px;display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 发票数据编辑区 -->
|
||||
<div class="card mb-4" id="edit-section" style="display:none">
|
||||
<div class="card-body">
|
||||
<div class="section-title d-flex justify-content-between align-items-center">
|
||||
<span>📝 付款记录（可编辑）</span>
|
||||
<div class="d-flex justify-content-end align-items-center">
|
||||
<button class="btn btn-primary" id="btn-submit" onclick="submitFinancial()">🚀 提交到财务系统</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="edit-note">直接点击单元格即可编辑，提交时自动保存当前修改。</p>
|
||||
<div class="table-wrapper">
|
||||
<table class="table table-sm table-bordered table-editable mb-0" id="invoice-table">
|
||||
<thead id="invoice-thead"></thead>
|
||||
<tbody id="invoice-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日志 -->
|
||||
<div class="section-title">📋 处理日志</div>
|
||||
<div class="log-container mb-4" id="log-box"><div class="empty">等待开始...</div></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
|
||||
<script src="/static/js/index.js"></script>
|
||||
<script type="module" src="/static/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user