refactor: split project into web and server directories
- Move frontend to web/ directory - Add server/ directory for backend - Restructure project for前后端分离架构 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
284
web/src/views/scripts/ApprovalCenterView.js
Normal file
284
web/src/views/scripts/ApprovalCenterView.js
Normal file
@@ -0,0 +1,284 @@
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'ApprovalCenterView' ,
|
||||
setup(props, { emit }) {
|
||||
const activeTab = ref('全部待审')
|
||||
const selectedRow = ref(null)
|
||||
const expandedExpenseId = ref(null)
|
||||
const tabs = ['全部待审', '高风险', '即将超时', '已处理']
|
||||
const filters = ['法人主体', '费用类型', '风险等级', '金额区间', '所属部门']
|
||||
|
||||
const rows = [
|
||||
{ id: 'RE240712001', applicant: '李文静', avatar: '李', department: '市场部', type: '差旅报销', amount: '￥3,680', time: '07-12 09:20', risk: '中风险', riskTone: 'medium', sla: '4.2h', slaTone: 'safe', node: '财务审批', status: '待审批', statusTone: 'pending' },
|
||||
{ id: 'RE240712002', applicant: '王志强', avatar: '王', department: '销售部', type: '招待费', amount: '￥1,280', time: '07-12 08:15', risk: '低风险', riskTone: 'low', sla: '8.5h', slaTone: 'safe', node: '部门负责人', status: '待审批', statusTone: 'pending' },
|
||||
{ id: 'RE240711098', applicant: '刘思雨', avatar: '刘', department: '市场部', type: '差旅报销', amount: '￥6,920', time: '07-11 18:46', risk: '高风险', riskTone: 'high', sla: '0.8h', slaTone: 'danger', node: '财务审批', status: '即将超时', statusTone: 'urgent', spotlight: true },
|
||||
{ id: 'RE240711087', applicant: '陈晓琳', avatar: '陈', department: '行政部', type: '办公采购', amount: '￥860', time: '07-11 17:32', risk: '低风险', riskTone: 'low', sla: '6.1h', slaTone: 'safe', node: '预算校验', status: '待审批', statusTone: 'pending' },
|
||||
{ id: 'RE240711076', applicant: '赵明', avatar: '赵', department: '研发中心', type: '其他费用', amount: '￥4,250', time: '07-11 15:10', risk: '中风险', riskTone: 'medium', sla: '2.4h', slaTone: 'warning', node: '部门负责人', status: '待审批', statusTone: 'pending' },
|
||||
{ id: 'RE240711065', applicant: '孙楠', avatar: '孙', department: '财务部', type: '招待费', amount: '￥560', time: '07-11 13:42', risk: '低风险', riskTone: 'low', sla: '5.7h', slaTone: 'safe', node: '财务审批', status: '待审批', statusTone: 'pending' },
|
||||
{ id: 'RE240711054', applicant: '周晓彤', avatar: '周', department: '市场部', type: '办公采购', amount: '￥2,150', time: '07-11 11:28', risk: '中风险', riskTone: 'medium', sla: '1.9h', slaTone: 'warning', node: '预算校验', status: '即将超时', statusTone: 'urgent' },
|
||||
{ id: 'RE240711043', applicant: '吴磊', avatar: '吴', department: '销售部', type: '其他费用', amount: '￥980', time: '07-11 09:05', risk: '低风险', riskTone: 'low', sla: '7.3h', slaTone: 'safe', node: '部门负责人', status: '待审批', statusTone: 'pending' }
|
||||
]
|
||||
|
||||
const visibleRows = computed(() => {
|
||||
if (activeTab.value === '全部待审') return rows
|
||||
if (activeTab.value === '高风险') return rows.filter((row) => row.risk === '高风险')
|
||||
if (activeTab.value === '即将超时') return rows.filter((row) => row.status === '即将超时')
|
||||
return rows.slice(0, 3).map((row) => ({ ...row, status: '已处理', statusTone: 'done' }))
|
||||
})
|
||||
|
||||
const approvalSteps = [
|
||||
{ index: 1, label: '提交申请', time: '07-11 08:46', done: true, active: true },
|
||||
{ index: 2, label: '票据识别', time: '07-11 08:48', done: true, active: true },
|
||||
{ index: 3, label: '费用归类', time: '07-11 08:49', done: true, active: true },
|
||||
{ index: 4, label: '部门负责人审批', time: '07-11 11:28', done: true, active: true },
|
||||
{ index: 5, label: '财务审批', time: '进行中', active: true, current: true },
|
||||
{ index: 6, label: '归档入账', time: '待处理' }
|
||||
]
|
||||
|
||||
const summaryItems = [
|
||||
{ label: '行程', value: '北京 → 上海', icon: 'mdi mdi-map-marker-path' },
|
||||
{ label: '出差区间', value: '07-10 至 07-11', icon: 'mdi mdi-clock-outline' },
|
||||
{ label: '票据关联', value: '8 条明细 / 7 份材料', icon: 'mdi mdi-file-document-multiple-outline' },
|
||||
{ label: '成本归属', value: '市场部 · CC-MKT-01', icon: 'mdi mdi-account-group-outline' },
|
||||
{ label: '支付方式', value: '企业垫付', icon: 'mdi mdi-credit-card-outline' }
|
||||
]
|
||||
|
||||
const heroSummaryItems = computed(() => [
|
||||
{ label: '单号', value: selectedRow.value?.id ?? '-', icon: 'mdi mdi-pound-box-outline' },
|
||||
{ label: '报销类型', value: selectedRow.value?.type ?? '-', icon: 'mdi mdi-briefcase-outline' },
|
||||
...summaryItems
|
||||
])
|
||||
|
||||
const currentProgressRingMotion = {
|
||||
initial: {
|
||||
scale: 1,
|
||||
opacity: 0.34,
|
||||
},
|
||||
enter: {
|
||||
scale: [1, 1.42, 1.78],
|
||||
opacity: [0.34, 0.16, 0],
|
||||
transition: {
|
||||
duration: 3.2,
|
||||
repeat: Infinity,
|
||||
repeatType: 'loop',
|
||||
repeatDelay: 0.85,
|
||||
ease: 'easeOut',
|
||||
times: [0, 0.5, 1],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const expenseItems = [
|
||||
{
|
||||
id: 'flight-1',
|
||||
time: '07-10 07:25',
|
||||
dayLabel: '周三',
|
||||
name: '机票',
|
||||
category: '交通',
|
||||
desc: '北京首都 → 上海虹桥',
|
||||
detail: 'MU5103 往返经济舱，含行程单',
|
||||
amount: '￥2,180',
|
||||
status: '未超标',
|
||||
tone: 'ok',
|
||||
attachmentStatus: '已上传',
|
||||
attachmentTone: 'ok',
|
||||
attachmentHint: '电子行程单与机票发票齐全',
|
||||
attachments: ['电子行程单.pdf', '机票发票.pdf'],
|
||||
riskLabel: '低风险',
|
||||
riskTone: 'low',
|
||||
riskText: '票面信息与行程匹配。'
|
||||
},
|
||||
{
|
||||
id: 'taxi-1',
|
||||
time: '07-10 10:35',
|
||||
dayLabel: '周三',
|
||||
name: '出租车',
|
||||
category: '市内交通',
|
||||
desc: '虹桥机场 → 静安酒店',
|
||||
detail: '落地后前往酒店，含过路费',
|
||||
amount: '￥86',
|
||||
status: '未超标',
|
||||
tone: 'ok',
|
||||
attachmentStatus: '已上传',
|
||||
attachmentTone: 'ok',
|
||||
attachmentHint: '已上传 1 张发票',
|
||||
attachments: ['出租车发票-0710-01.jpg'],
|
||||
riskLabel: '中风险',
|
||||
riskTone: 'medium',
|
||||
riskText: '高峰加价较高，建议顺带核对上车点。'
|
||||
},
|
||||
{
|
||||
id: 'metro-1',
|
||||
time: '07-10 18:20',
|
||||
dayLabel: '周三',
|
||||
name: '地铁',
|
||||
category: '市内交通',
|
||||
desc: '静安酒店 → 客户园区',
|
||||
detail: '2 号线换乘，通勤交通',
|
||||
amount: '￥12',
|
||||
status: '未超标',
|
||||
tone: 'ok',
|
||||
attachmentStatus: '已上传',
|
||||
attachmentTone: 'ok',
|
||||
attachmentHint: '已上传电子票据',
|
||||
attachments: ['地铁电子票据-0710.png'],
|
||||
riskLabel: '低风险',
|
||||
riskTone: 'low',
|
||||
riskText: '路线与拜访行程一致。'
|
||||
},
|
||||
{
|
||||
id: 'taxi-2',
|
||||
time: '07-11 08:40',
|
||||
dayLabel: '周四',
|
||||
name: '出租车',
|
||||
category: '市内交通',
|
||||
desc: '静安酒店 → 客户园区',
|
||||
detail: '次日早会前往客户现场',
|
||||
amount: '￥42',
|
||||
status: '未超标',
|
||||
tone: 'ok',
|
||||
attachmentStatus: '未上传',
|
||||
attachmentTone: 'missing',
|
||||
attachmentHint: '缺少对应发票',
|
||||
attachments: [],
|
||||
riskLabel: '高风险',
|
||||
riskTone: 'high',
|
||||
riskText: '票据缺失，当前无法完成交通费核验。'
|
||||
},
|
||||
{
|
||||
id: 'taxi-3',
|
||||
time: '07-11 20:55',
|
||||
dayLabel: '周四',
|
||||
name: '出租车',
|
||||
category: '返程交通',
|
||||
desc: '客户园区 → 虹桥机场',
|
||||
detail: '夜间返程，触发超标校验',
|
||||
amount: '￥136',
|
||||
status: '超标 ￥28',
|
||||
tone: 'bad',
|
||||
attachmentStatus: '已上传',
|
||||
attachmentTone: 'ok',
|
||||
attachmentHint: '已上传 1 张发票',
|
||||
attachments: ['出租车发票-0711-02.jpg'],
|
||||
riskLabel: '中风险',
|
||||
riskTone: 'medium',
|
||||
riskText: '金额超差旅标准 ￥28，需补充业务说明。'
|
||||
},
|
||||
{
|
||||
id: 'hotel-1',
|
||||
time: '07-10 至 07-11',
|
||||
dayLabel: '2 晚',
|
||||
name: '酒店',
|
||||
category: '住宿',
|
||||
desc: '上海静安商务酒店',
|
||||
detail: '标准大床房 2 晚，含早餐',
|
||||
amount: '￥2,480',
|
||||
status: '未超标',
|
||||
tone: 'ok',
|
||||
attachmentStatus: '部分上传',
|
||||
attachmentTone: 'partial',
|
||||
attachmentHint: '发票已上传，入住清单缺失',
|
||||
attachments: ['酒店发票.jpg'],
|
||||
riskLabel: '高风险',
|
||||
riskTone: 'high',
|
||||
riskText: '缺少入住清单，住宿真实性待补证。'
|
||||
},
|
||||
{
|
||||
id: 'meal-1',
|
||||
time: '07-10 至 07-11',
|
||||
dayLabel: '2 天',
|
||||
name: '餐补',
|
||||
category: '补贴',
|
||||
desc: '差旅餐补',
|
||||
detail: '按差旅制度自动计算',
|
||||
amount: '￥372',
|
||||
status: '未超标',
|
||||
tone: 'ok',
|
||||
attachmentStatus: '免上传',
|
||||
attachmentTone: 'neutral',
|
||||
attachmentHint: '制度型补贴无需票据',
|
||||
attachments: [],
|
||||
riskLabel: '低风险',
|
||||
riskTone: 'low',
|
||||
riskText: '系统自动核算，无额外异常。'
|
||||
},
|
||||
{
|
||||
id: 'other-1',
|
||||
time: '07-11 09:10',
|
||||
dayLabel: '周四',
|
||||
name: '其他',
|
||||
category: '杂费',
|
||||
desc: '行李寄存 / 打印费',
|
||||
detail: '客户提案资料打印与寄存服务',
|
||||
amount: '￥1,612',
|
||||
status: '未超标',
|
||||
tone: 'ok',
|
||||
attachmentStatus: '已上传',
|
||||
attachmentTone: 'ok',
|
||||
attachmentHint: '已上传 2 份附件',
|
||||
attachments: ['打印服务发票.jpg', '行李寄存凭证.jpg'],
|
||||
riskLabel: '低风险',
|
||||
riskTone: 'low',
|
||||
riskText: '用途清晰，金额在授权范围内。'
|
||||
}
|
||||
]
|
||||
|
||||
const expenseTotal = '￥6,920'
|
||||
|
||||
const uploadedExpenseCount = computed(() => expenseItems.filter((item) => item.attachments.length).length)
|
||||
|
||||
const showExpenseRisk = (item) => item.riskTone === 'medium' || item.riskTone === 'high'
|
||||
|
||||
const toggleExpenseAttachments = (id) => {
|
||||
expandedExpenseId.value = expandedExpenseId.value === id ? null : id
|
||||
}
|
||||
|
||||
const attachments = [
|
||||
{ name: '机票.pdf', size: '256 KB', icon: 'mdi mdi-file-pdf-box', iconClass: 'pdf' },
|
||||
{ name: '酒店发票.jpg', size: '412 KB', icon: 'mdi mdi-image', iconClass: 'img' },
|
||||
{ name: '行程单.pdf', size: '198 KB', icon: 'mdi mdi-file-pdf-box', iconClass: 'pdf' },
|
||||
{ name: '出租车发票1.jpg', size: '128 KB', icon: 'mdi mdi-image', iconClass: 'img' },
|
||||
{ name: '出租车发票2.jpg', size: '132 KB', icon: 'mdi mdi-image', iconClass: 'img' },
|
||||
{ name: '酒店入住清单', size: '缺失', icon: 'mdi mdi-minus-circle', iconClass: 'miss', missing: true }
|
||||
]
|
||||
|
||||
const riskItems = [
|
||||
{ text: '酒店入住清单缺失', level: '高', tone: 'high', icon: 'mdi mdi-alert-circle' },
|
||||
{ text: '1 笔出租车费用超差旅标准 ￥28', level: '中', tone: 'medium', icon: 'mdi mdi-alert' },
|
||||
{ text: '发票抬头识别为个人，建议核对', level: '中', tone: 'medium', icon: 'mdi mdi-lightbulb-on' }
|
||||
]
|
||||
|
||||
const flowItems = [
|
||||
{ label: '提交申请', desc: '刘思雨 提交申请', time: '07-11 08:46', icon: 'mdi mdi-check' },
|
||||
{ label: '票据识别', desc: 'AI 自动识别完成', time: '07-11 08:48', icon: 'mdi mdi-check' },
|
||||
{ label: '费用归类', desc: '费用归类完成', time: '07-11 08:49', icon: 'mdi mdi-check' },
|
||||
{ label: '部门负责人审批', desc: '李文静 已通过', time: '07-11 11:28', icon: 'mdi mdi-check' },
|
||||
{ label: '财务审批', desc: '张晓明 审批中', time: '进行中', icon: 'mdi mdi-circle-slice-8', current: true },
|
||||
{ label: '归档入账', desc: '待处理', time: '-', icon: 'mdi mdi-circle-outline', pending: true }
|
||||
]
|
||||
|
||||
return {
|
||||
activeTab,
|
||||
selectedRow,
|
||||
expandedExpenseId,
|
||||
tabs,
|
||||
filters,
|
||||
rows,
|
||||
visibleRows,
|
||||
approvalSteps,
|
||||
summaryItems,
|
||||
heroSummaryItems,
|
||||
currentProgressRingMotion,
|
||||
expenseItems,
|
||||
expenseTotal,
|
||||
uploadedExpenseCount,
|
||||
showExpenseRisk,
|
||||
toggleExpenseAttachments,
|
||||
attachments,
|
||||
riskItems,
|
||||
flowItems
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
249
web/src/views/scripts/AuditView.js
Normal file
249
web/src/views/scripts/AuditView.js
Normal file
@@ -0,0 +1,249 @@
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'AuditView' ,
|
||||
setup(props, { emit }) {
|
||||
const tabs = ['全部技能', '已上线', '草稿中', '待评审', '异常告警']
|
||||
const filters = ['按分类筛选', '按模型筛选', '按负责人筛选']
|
||||
const activeTab = ref(tabs[0])
|
||||
const selectedSkill = ref(null)
|
||||
|
||||
const skills = [
|
||||
{
|
||||
id: 'SKL-001',
|
||||
short: 'TR',
|
||||
name: '差旅申请助手',
|
||||
summary: '生成出差申请、补齐行程信息并关联预订动作。',
|
||||
category: '流程型 Skill',
|
||||
owner: '张晓明',
|
||||
scope: '员工自助',
|
||||
model: 'GPT-5.4',
|
||||
version: 'v2.3',
|
||||
status: '已上线',
|
||||
statusTone: 'success',
|
||||
hitRate: '92.6%',
|
||||
updatedAt: '2026-05-05 09:20',
|
||||
badgeTone: 'emerald',
|
||||
triggerMode: '显式入口 + 语义触发',
|
||||
spotlight: true,
|
||||
promptSections: [
|
||||
{
|
||||
title: '系统定位',
|
||||
intent: '约束 Skill 目标与边界',
|
||||
content: '负责帮助员工完成差旅申请草稿生成、行程补齐和预订前核对。禁止直接跳过必要审批节点。'
|
||||
},
|
||||
{
|
||||
title: '输入预期',
|
||||
intent: '定义需要抽取的字段',
|
||||
content: '抽取出发地、目的地、出差日期、事由、同行人、预算中心与是否需要预订机票/酒店。缺失时逐步追问。'
|
||||
},
|
||||
{
|
||||
title: '输出格式',
|
||||
intent: '约束最终返回结构',
|
||||
content: '输出申请摘要、缺失项清单、下一步操作建议。若信息齐全，生成结构化草稿并提示用户确认。'
|
||||
}
|
||||
],
|
||||
outputRules: [
|
||||
'优先返回结构化摘要，再给行动建议。',
|
||||
'缺失信息必须列成 checklist，不可混写在段落里。',
|
||||
'遇到预算冲突时必须提示人工审批节点。'
|
||||
],
|
||||
tests: [
|
||||
{ name: '基础申请生成', input: '北京到上海，后天出差两天', result: '通过', tone: 'success' },
|
||||
{ name: '缺失预算中心追问', input: '我要去深圳见客户', result: '通过', tone: 'success' },
|
||||
{ name: '异常日期冲突', input: '返回日期早于出发日期', result: '待修复', tone: 'warning' }
|
||||
],
|
||||
triggers: ['差旅申请', '出差申请', '预订机票', '补齐行程'],
|
||||
tools: [
|
||||
{ name: '预订系统 API', scope: '机票 / 酒店查询', mode: '只读', tone: 'safe' },
|
||||
{ name: '报销草稿生成器', scope: '创建申请草稿', mode: '写入', tone: 'active' },
|
||||
{ name: '预算中心校验', scope: '预算占用校验', mode: '校验', tone: 'safe' }
|
||||
],
|
||||
history: [
|
||||
{ version: 'v2.3', note: '补充预算冲突追问逻辑', time: '05-05 09:20' },
|
||||
{ version: 'v2.2', note: '优化酒店预订字段抽取', time: '05-01 17:45' },
|
||||
{ version: 'v2.1', note: '新增同行人识别', time: '04-28 11:10' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'SKL-002',
|
||||
short: 'AU',
|
||||
name: '审批意见生成器',
|
||||
summary: '基于单据、风险点和制度命中结果生成审批意见。',
|
||||
category: '审核型 Skill',
|
||||
owner: '李文静',
|
||||
scope: '财务审批',
|
||||
model: 'GPT-5.4',
|
||||
version: 'v1.8',
|
||||
status: '待评审',
|
||||
statusTone: 'warning',
|
||||
hitRate: '88.4%',
|
||||
updatedAt: '2026-05-04 19:10',
|
||||
badgeTone: 'violet',
|
||||
triggerMode: '审批中心按钮触发',
|
||||
promptSections: [
|
||||
{
|
||||
title: '系统定位',
|
||||
intent: '聚焦审批建议生成',
|
||||
content: '读取单据、制度命中和风险标签后，生成可直接复用的审批意见，不代替最终审批决定。'
|
||||
},
|
||||
{
|
||||
title: '输入预期',
|
||||
intent: '依赖字段',
|
||||
content: '依赖报销类型、金额、风险项、附件齐备情况、历史审批结论。'
|
||||
},
|
||||
{
|
||||
title: '输出格式',
|
||||
intent: '生成标准话术',
|
||||
content: '输出通过 / 驳回 / 补件三种意见模板，并附上判断依据。'
|
||||
}
|
||||
],
|
||||
outputRules: [
|
||||
'意见必须引用风险点或制度条款作为依据。',
|
||||
'驳回类结论需明确补充动作。',
|
||||
'避免输出过长段落，优先三段式表达。'
|
||||
],
|
||||
tests: [
|
||||
{ name: '高风险驳回意见', input: '重复发票 + 缺附件', result: '通过', tone: 'success' },
|
||||
{ name: '低风险通过意见', input: '规则全通过', result: '通过', tone: 'success' },
|
||||
{ name: '混合场景表达', input: '超标但说明充分', result: '评审中', tone: 'warning' }
|
||||
],
|
||||
triggers: ['生成审批意见', '通过意见', '驳回意见', '补件说明'],
|
||||
tools: [
|
||||
{ name: '审批单据上下文', scope: '当前单据读取', mode: '只读', tone: 'safe' },
|
||||
{ name: '制度命中服务', scope: '条款引用', mode: '校验', tone: 'safe' },
|
||||
{ name: '审批结果写回', scope: '保存意见', mode: '写入', tone: 'active' }
|
||||
],
|
||||
history: [
|
||||
{ version: 'v1.8', note: '调整高风险话术严谨度', time: '05-04 19:10' },
|
||||
{ version: 'v1.7', note: '补充制度条款引用模板', time: '05-02 10:30' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'SKL-003',
|
||||
short: 'KB',
|
||||
name: '知识检索编排器',
|
||||
summary: '根据问题意图匹配制度、FAQ 与最近更新文档。',
|
||||
category: '知识型 Skill',
|
||||
owner: '王磊',
|
||||
scope: '知识管理',
|
||||
model: 'GPT-5.2',
|
||||
version: 'v3.1',
|
||||
status: '已上线',
|
||||
statusTone: 'success',
|
||||
hitRate: '94.1%',
|
||||
updatedAt: '2026-05-03 15:40',
|
||||
badgeTone: 'blue',
|
||||
triggerMode: '问答语义召回',
|
||||
promptSections: [
|
||||
{
|
||||
title: '系统定位',
|
||||
intent: '文档命中与答案编排',
|
||||
content: '识别问题主题后，优先召回制度文档、FAQ 与近期更新资料，再组织成引用式回答。'
|
||||
},
|
||||
{
|
||||
title: '输入预期',
|
||||
intent: '需要识别的意图',
|
||||
content: '识别报销、发票、差旅、借款、预算等主题，以及用户是否在追问例外情况。'
|
||||
},
|
||||
{
|
||||
title: '输出格式',
|
||||
intent: '答案结构',
|
||||
content: '先结论，再条款引用，再相关文档链接。若知识不足，明确提示未命中。'
|
||||
}
|
||||
],
|
||||
outputRules: [
|
||||
'必须区分“制度原文依据”和“解释性建议”。',
|
||||
'引用命中不足时，不可编造制度条款。',
|
||||
'输出需附上最近更新时间。'
|
||||
],
|
||||
tests: [
|
||||
{ name: '标准知识问答', input: '住宿超标怎么办', result: '通过', tone: 'success' },
|
||||
{ name: '跨文档综合问答', input: '差旅借款后如何冲销', result: '通过', tone: 'success' }
|
||||
],
|
||||
triggers: ['制度查询', '差旅标准', '发票规范', '借款冲销'],
|
||||
tools: [
|
||||
{ name: '知识库索引', scope: '文档召回', mode: '只读', tone: 'safe' },
|
||||
{ name: 'FAQ 排序器', scope: '答案重排', mode: '校验', tone: 'safe' }
|
||||
],
|
||||
history: [
|
||||
{ version: 'v3.1', note: '加入最近更新知识优先级', time: '05-03 15:40' },
|
||||
{ version: 'v3.0', note: '知识命中格式重构', time: '04-29 18:20' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'SKL-004',
|
||||
short: 'RK',
|
||||
name: '风险解释助手',
|
||||
summary: '向员工解释拦截原因，并给出补件或修正建议。',
|
||||
category: '解释型 Skill',
|
||||
owner: '陈杰',
|
||||
scope: '员工自助',
|
||||
model: 'GPT-5.4-Mini',
|
||||
version: 'v1.4',
|
||||
status: '草稿中',
|
||||
statusTone: 'draft',
|
||||
hitRate: '79.8%',
|
||||
updatedAt: '2026-05-02 11:05',
|
||||
badgeTone: 'amber',
|
||||
triggerMode: '风险拦截后提示入口',
|
||||
promptSections: [
|
||||
{
|
||||
title: '系统定位',
|
||||
intent: '解释风控结论',
|
||||
content: '将复杂风控规则解释成员工可执行的修正动作，不暴露内部评分细节。'
|
||||
},
|
||||
{
|
||||
title: '输入预期',
|
||||
intent: '关注异常标签',
|
||||
content: '读取异常标签、相关票据、制度限制和当前流程节点。'
|
||||
},
|
||||
{
|
||||
title: '输出格式',
|
||||
intent: '行动导向',
|
||||
content: '按“原因 - 影响 - 处理建议”输出，不使用过于生硬的审计口吻。'
|
||||
}
|
||||
],
|
||||
outputRules: [
|
||||
'建议必须可以执行，避免空泛表述。',
|
||||
'不展示内部风控分值。',
|
||||
'涉及附件缺失时输出具体材料名称。'
|
||||
],
|
||||
tests: [
|
||||
{ name: '住宿超标解释', input: '酒店单晚超标 18%', result: '通过', tone: 'success' },
|
||||
{ name: '重复发票风险解释', input: '发票号重复', result: '待修复', tone: 'warning' }
|
||||
],
|
||||
triggers: ['为什么被拦截', '风险原因', '补件说明'],
|
||||
tools: [
|
||||
{ name: '风险标签读取', scope: '异常原因', mode: '只读', tone: 'safe' },
|
||||
{ name: '制度比对服务', scope: '规则解释', mode: '校验', tone: 'safe' }
|
||||
],
|
||||
history: [
|
||||
{ version: 'v1.4', note: '新增补件导向模板', time: '05-02 11:05' },
|
||||
{ version: 'v1.3', note: '优化语气控制', time: '04-30 16:48' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const visibleSkills = computed(() => {
|
||||
if (activeTab.value === '全部技能') return skills
|
||||
const map = {
|
||||
已上线: '已上线',
|
||||
草稿中: '草稿中',
|
||||
待评审: '待评审',
|
||||
异常告警: '异常告警'
|
||||
}
|
||||
return skills.filter((item) => item.status === map[activeTab.value])
|
||||
})
|
||||
|
||||
return {
|
||||
tabs,
|
||||
filters,
|
||||
activeTab,
|
||||
selectedSkill,
|
||||
skills,
|
||||
visibleSkills
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
101
web/src/views/scripts/ChatView.js
Normal file
101
web/src/views/scripts/ChatView.js
Normal file
@@ -0,0 +1,101 @@
|
||||
import { computed, nextTick, ref, watch } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'ChatView',
|
||||
props: {
|
||||
documents: { type: Array, required: true },
|
||||
docSearch: { type: String, default: '' },
|
||||
messages: { type: Array, required: true },
|
||||
uploadedFiles: { type: Array, required: true },
|
||||
activeCase: { type: Object, default: null },
|
||||
quickPrompts: { type: Array, required: true },
|
||||
draft: { type: String, default: '' },
|
||||
messageList: { type: Object, default: null }
|
||||
},
|
||||
emits: ['send', 'upload', 'draft', 'approveCase', 'rejectCase', 'selectCase'] ,
|
||||
setup(props, { emit }) {
|
||||
const localMessageList = ref(null)
|
||||
const promptPage = ref(0)
|
||||
|
||||
const sessions = [
|
||||
{ title: '北京出差，酒店超标报销怎么处理？', time: '10:32', active: true },
|
||||
{ title: '发票抬头不一致怎么办', time: '09:48' },
|
||||
{ title: '借款冲销流程', time: '昨天' },
|
||||
{ title: '预算占用失败处理', time: '昨天' },
|
||||
{ title: '招待费报销范围', time: '05-11' },
|
||||
{ title: '差旅住宿标准如何匹配城市级别？', time: '05-10' },
|
||||
{ title: '电子发票验真失败如何处理？', time: '05-09' },
|
||||
{ title: '跨部门项目费用怎么归集？', time: '05-08' },
|
||||
{ title: '会议费和招待费如何区分？', time: '05-07' },
|
||||
{ title: '超预算申请需要哪些审批节点？', time: '05-06' },
|
||||
{ title: '海外差旅汇率按哪天计算？', time: '05-05' },
|
||||
{ title: '员工退票手续费是否可报销？', time: '05-04' }
|
||||
]
|
||||
|
||||
const prompts = [
|
||||
{ icon: 'mdi mdi-bed-outline', short: '差旅标准', text: '差旅报销特殊标准是什么？' },
|
||||
{ icon: 'mdi mdi-receipt-text-outline', short: '发票规范', text: '发票丢失如何处理？' },
|
||||
{ icon: 'mdi mdi-cash-refund', short: '借款冲销', text: '借款多久内需要冲销？' },
|
||||
{ icon: 'mdi mdi-file-chart-outline', short: '预算冲突', text: '预算不足如何申请？' },
|
||||
{ icon: 'mdi mdi-shield-check-outline', short: '审批要求', text: '酒店超标后如何申请例外报销？' },
|
||||
{ icon: 'mdi mdi-office-building-marker', short: '住宿标准', text: '差旅住宿标准按什么规则执行？' },
|
||||
{ icon: 'mdi mdi-file-question-outline', short: '材料补齐', text: '报销附件缺失怎么补交？' },
|
||||
{ icon: 'mdi mdi-alert-circle-outline', short: '风险等级', text: '哪些情况会触发中风险？' }
|
||||
]
|
||||
|
||||
const visiblePrompts = computed(() => prompts.slice((promptPage.value % 2) * 4, (promptPage.value % 2) * 4 + 4))
|
||||
|
||||
const hotQuestions = [
|
||||
'差旅报销标准是什么？',
|
||||
'酒店超标后如何申请例外报销？',
|
||||
'发票丢失如何处理？',
|
||||
'借款多久内需要冲销？',
|
||||
'预算超支如何申请？',
|
||||
'招待费报销需要哪些凭证？',
|
||||
'发票抬头不一致是否允许报销？',
|
||||
'报销附件缺失怎么补交？',
|
||||
'差旅住宿标准按什么规则执行？',
|
||||
'电子发票验真失败如何处理？'
|
||||
]
|
||||
|
||||
const similarQuestions = [
|
||||
{ text: '酒店超标后如何申请例外报销？', score: '96%' },
|
||||
{ text: '发票抬头不一致是否允许报销？', score: '92%' },
|
||||
{ text: '差旅住宿标准按什么规则执行？', score: '89%' },
|
||||
{ text: '预算不足时能否先提交报销？', score: '86%' },
|
||||
{ text: '电子发票验真失败是否可以先报销？', score: '84%' },
|
||||
{ text: '跨部门项目费用如何归集？', score: '81%' },
|
||||
{ text: '招待费报销需要哪些凭证？', score: '78%' },
|
||||
{ text: '借款冲销逾期会影响报销吗？', score: '76%' }
|
||||
]
|
||||
|
||||
function rotatePrompts() {
|
||||
promptPage.value += 1
|
||||
}
|
||||
|
||||
function applyPrompt(text) {
|
||||
emit('draft', text)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.messages.length,
|
||||
() => {
|
||||
nextTick(() => localMessageList.value?.scrollTo({ top: localMessageList.value.scrollHeight, behavior: 'smooth' }))
|
||||
}
|
||||
)
|
||||
|
||||
return {
|
||||
emit,
|
||||
localMessageList,
|
||||
promptPage,
|
||||
sessions,
|
||||
prompts,
|
||||
visiblePrompts,
|
||||
hotQuestions,
|
||||
similarQuestions,
|
||||
rotatePrompts,
|
||||
applyPrompt
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
202
web/src/views/scripts/EmployeeManagementView.js
Normal file
202
web/src/views/scripts/EmployeeManagementView.js
Normal file
@@ -0,0 +1,202 @@
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'EmployeeManagementView' ,
|
||||
setup(props, { emit }) {
|
||||
const tabs = ['全部员工', '在职', '试用中', '停用']
|
||||
const filters = ['按部门筛选', '按职级筛选', '按系统角色筛选']
|
||||
const activeTab = ref(tabs[0])
|
||||
const selectedEmployee = ref(null)
|
||||
|
||||
const roleOptions = [
|
||||
{ id: 'user', label: '使用者', desc: '可以发起报销、查看个人单据和使用 AI 助手。' },
|
||||
{ id: 'finance', label: '财务人员', desc: '可以处理复核、查看财务知识与风险校验结果。' },
|
||||
{ id: 'manager', label: '管理员', desc: '可以维护员工档案、组织结构和角色权限。' },
|
||||
{ id: 'executive', label: '高级管理人员', desc: '可以查看跨部门数据看板与关键审批结果。' },
|
||||
{ id: 'approver', label: '审批负责人', desc: '可以处理审批中心中的待审单据。' },
|
||||
{ id: 'auditor', label: '审计观察员', desc: '可以查看变更记录和权限调整历史。' }
|
||||
]
|
||||
|
||||
const employees = [
|
||||
{
|
||||
id: 'EMP-001',
|
||||
avatar: '张',
|
||||
name: '张晓晴',
|
||||
employeeNo: 'E10234',
|
||||
department: '财务共享中心',
|
||||
position: '费用运营经理',
|
||||
grade: 'M3',
|
||||
manager: '李文静',
|
||||
financeOwner: '华东财务组',
|
||||
roles: ['管理员', '财务人员', '审批负责人'],
|
||||
status: '在职',
|
||||
statusTone: 'success',
|
||||
gender: '女',
|
||||
age: '32',
|
||||
birthDate: '1994-08-12',
|
||||
email: 'xiaoqing.zhang@xfinance.com',
|
||||
phone: '138 1023 4567',
|
||||
joinDate: '2021-03-15',
|
||||
location: '上海',
|
||||
costCenter: 'CC-2108',
|
||||
updatedAt: '2026-05-06 10:24',
|
||||
lastSync: '2026-05-06 10:24',
|
||||
syncState: '待生效',
|
||||
spotlight: true,
|
||||
permissions: [
|
||||
'可查看审批中心全部待审单据',
|
||||
'可配置员工角色与部门归属',
|
||||
'可查看知识管理与技能中心配置'
|
||||
],
|
||||
history: [
|
||||
{ action: '新增“审批负责人”角色', owner: '系统管理员 · 王敏', time: '今天 10:24' },
|
||||
{ action: '调整财务归口为华东财务组', owner: '组织管理员 · 陈硕', time: '昨天 18:10' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'EMP-002',
|
||||
avatar: '李',
|
||||
name: '李文静',
|
||||
employeeNo: 'E10018',
|
||||
department: '总经办',
|
||||
position: '高级财务总监',
|
||||
grade: 'D2',
|
||||
manager: 'CEO',
|
||||
financeOwner: '集团财务',
|
||||
roles: ['高级管理人员', '审批负责人'],
|
||||
status: '在职',
|
||||
statusTone: 'success',
|
||||
gender: '女',
|
||||
age: '39',
|
||||
birthDate: '1987-03-26',
|
||||
email: 'wenjing.li@xfinance.com',
|
||||
phone: '139 0018 7688',
|
||||
joinDate: '2018-06-21',
|
||||
location: '上海',
|
||||
costCenter: 'CC-1001',
|
||||
updatedAt: '2026-05-05 16:20',
|
||||
lastSync: '2026-05-05 16:20',
|
||||
syncState: '已同步',
|
||||
permissions: [
|
||||
'可查看集团层面的审批看板',
|
||||
'可处理高金额报销的最终审批',
|
||||
'可查看部门预算执行情况'
|
||||
],
|
||||
history: [
|
||||
{ action: '更新高级管理人员可见范围', owner: '系统管理员 · 王敏', time: '05-05 16:20' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'EMP-003',
|
||||
avatar: '王',
|
||||
name: '王敏',
|
||||
employeeNo: 'E10867',
|
||||
department: '人力与组织',
|
||||
position: '组织发展主管',
|
||||
grade: 'P6',
|
||||
manager: '陈嘉',
|
||||
financeOwner: '总部财务',
|
||||
roles: ['管理员', '审计观察员'],
|
||||
status: '在职',
|
||||
statusTone: 'success',
|
||||
gender: '女',
|
||||
age: '30',
|
||||
birthDate: '1996-11-05',
|
||||
email: 'min.wang@xfinance.com',
|
||||
phone: '136 8867 1200',
|
||||
joinDate: '2022-08-08',
|
||||
location: '杭州',
|
||||
costCenter: 'CC-3206',
|
||||
updatedAt: '2026-05-05 09:18',
|
||||
lastSync: '2026-05-05 09:18',
|
||||
syncState: '已同步',
|
||||
permissions: [
|
||||
'可维护组织结构与岗位映射',
|
||||
'可查看员工角色分配历史'
|
||||
],
|
||||
history: [
|
||||
{ action: '新增“审计观察员”角色', owner: '系统管理员 · 张晓晴', time: '05-05 09:18' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'EMP-004',
|
||||
avatar: '陈',
|
||||
name: '陈嘉',
|
||||
employeeNo: 'E11602',
|
||||
department: '销售运营',
|
||||
position: '区域销售经理',
|
||||
grade: 'M2',
|
||||
manager: '李文静',
|
||||
financeOwner: '华南财务组',
|
||||
roles: ['使用者', '审批负责人'],
|
||||
status: '试用中',
|
||||
statusTone: 'warning',
|
||||
gender: '男',
|
||||
age: '29',
|
||||
birthDate: '1997-02-18',
|
||||
email: 'jia.chen@xfinance.com',
|
||||
phone: '137 1602 9901',
|
||||
joinDate: '2026-03-01',
|
||||
location: '深圳',
|
||||
costCenter: 'CC-4102',
|
||||
updatedAt: '2026-05-04 14:12',
|
||||
lastSync: '2026-05-04 14:12',
|
||||
syncState: '已同步',
|
||||
permissions: [
|
||||
'可发起个人报销与出差申请',
|
||||
'可处理本部门基础审批'
|
||||
],
|
||||
history: [
|
||||
{ action: '完成试用期角色初始化', owner: '组织管理员 · 王敏', time: '05-04 14:12' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'EMP-005',
|
||||
avatar: '赵',
|
||||
name: '赵雨辰',
|
||||
employeeNo: 'E11991',
|
||||
department: '研发中心',
|
||||
position: '产品经理',
|
||||
grade: 'P5',
|
||||
manager: '陈嘉',
|
||||
financeOwner: '总部财务',
|
||||
roles: ['使用者'],
|
||||
status: '停用',
|
||||
statusTone: 'neutral',
|
||||
gender: '男',
|
||||
age: '27',
|
||||
birthDate: '1999-06-09',
|
||||
email: 'yuchen.zhao@xfinance.com',
|
||||
phone: '135 1991 3300',
|
||||
joinDate: '2023-11-18',
|
||||
location: '北京',
|
||||
costCenter: 'CC-5209',
|
||||
updatedAt: '2026-05-01 11:06',
|
||||
lastSync: '2026-05-01 11:06',
|
||||
syncState: '已同步',
|
||||
permissions: [
|
||||
'当前账号停用，仅保留历史单据查看记录'
|
||||
],
|
||||
history: [
|
||||
{ action: '账号状态变更为停用', owner: '系统管理员 · 王敏', time: '05-01 11:06' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const visibleEmployees = computed(() => {
|
||||
if (activeTab.value === '全部员工') return employees
|
||||
return employees.filter((item) => item.status === activeTab.value)
|
||||
})
|
||||
|
||||
return {
|
||||
tabs,
|
||||
filters,
|
||||
activeTab,
|
||||
selectedEmployee,
|
||||
roleOptions,
|
||||
employees,
|
||||
visibleEmployees
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
42
web/src/views/scripts/LoginView.js
Normal file
42
web/src/views/scripts/LoginView.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'LoginView',
|
||||
emits: ['login', 'recover-password', 'sso-login'] ,
|
||||
setup(props, { emit }) {
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const tenant = ref('')
|
||||
const remember = ref(true)
|
||||
const showPassword = ref(false)
|
||||
|
||||
const features = [
|
||||
{ title: '智能审单', desc: 'AI 自动识别票据与规则，提升准确率与效率', icon: 'mdi mdi-file-document-outline', tone: 'green' },
|
||||
{ title: '异常预警', desc: '多维风险识别与预警，主动防控风险', icon: 'mdi mdi-bell-outline', tone: 'red' },
|
||||
{ title: 'SLA 监控', desc: '实时监控服务水平协议，保障审批及时性', icon: 'mdi mdi-sync', tone: 'blue' }
|
||||
]
|
||||
|
||||
const LogoMark = {
|
||||
template: `
|
||||
<span class="logo-mark" aria-hidden="true">
|
||||
<svg viewBox="0 0 36 36">
|
||||
<path d="M19.8 4.5c5.7 1.1 9.9 5.7 10.5 11.6-2.8-.9-5.5-.7-7.9.6-2.8 1.5-4.5 4.3-5.2 8.2-4.4-2.8-6.5-6.5-6.3-11.1.2-4.2 3.5-7.8 8.9-9.3Z" />
|
||||
<path d="M9 7.6c-3 3.5-4 7.3-2.9 11.2 1.2 4.2 4.6 7 10.1 8.5-2 1.8-4.6 2.6-7.6 2.3C5.1 26.7 3.5 23.1 3.7 19 4 14.4 5.7 10.6 9 7.6Z" />
|
||||
</svg>
|
||||
</span>
|
||||
`
|
||||
}
|
||||
|
||||
return {
|
||||
emit,
|
||||
username,
|
||||
password,
|
||||
tenant,
|
||||
remember,
|
||||
showPassword,
|
||||
features,
|
||||
LogoMark
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
130
web/src/views/scripts/OverviewView.js
Normal file
130
web/src/views/scripts/OverviewView.js
Normal file
@@ -0,0 +1,130 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import {
|
||||
metricBlueprints,
|
||||
trendRanges,
|
||||
trendSeries,
|
||||
spendByCategory,
|
||||
exceptionMix,
|
||||
departmentRangeOptions,
|
||||
bottlenecks,
|
||||
budgetSummary
|
||||
} from '../../data/metrics.js'
|
||||
import TrendChart from '../../components/charts/TrendChart.vue'
|
||||
import DonutChart from '../../components/charts/DonutChart.vue'
|
||||
import BarChart from '../../components/charts/BarChart.vue'
|
||||
import GaugeChart from '../../components/charts/GaugeChart.vue'
|
||||
import PersonalWorkbench from '../../components/business/PersonalWorkbench.vue'
|
||||
|
||||
export default {
|
||||
name: 'OverviewView',
|
||||
components: { TrendChart, DonutChart, BarChart, GaugeChart, PersonalWorkbench },
|
||||
props: {
|
||||
filteredRequests: { type: Array, required: true }
|
||||
},
|
||||
emits: ['ask'] ,
|
||||
setup(props, { emit }) {
|
||||
const activeTrendRange = ref(trendRanges[0])
|
||||
const activeDepartmentRange = ref(departmentRangeOptions[0])
|
||||
|
||||
const demoTotals = {
|
||||
pendingCount: 128,
|
||||
pendingAmount: 361600,
|
||||
avgSla: 6.8,
|
||||
autoPassRate: 78,
|
||||
riskCount: 14,
|
||||
slaRate: 96
|
||||
}
|
||||
|
||||
const demoDepartments = [
|
||||
{ name: '销售部', amount: 182000, color: '#10b981' },
|
||||
{ name: '研发中心', amount: 146000, color: '#3b82f6' },
|
||||
{ name: '市场部', amount: 96000, color: '#f59e0b' },
|
||||
{ name: '运营部', amount: 68600, color: '#8b5cf6' },
|
||||
{ name: '行政部', amount: 48300, color: '#3b82f6' }
|
||||
]
|
||||
|
||||
const formatCompact = (value) => {
|
||||
if (value >= 1_000_000) return `¥${(value / 1_000_000).toFixed(1)}M`
|
||||
if (value >= 1_000) return `¥${(value / 1_000).toFixed(1)}K`
|
||||
return `¥${value}`
|
||||
}
|
||||
|
||||
const formatCurrency = (value) => formatCompact(value)
|
||||
|
||||
const formatMetricValue = (metric, value) => {
|
||||
if (metric.key === 'pendingAmount') return formatCurrency(Math.round(value))
|
||||
if (metric.key === 'avgSla') return `${value.toFixed(1)} ${metric.unit}`
|
||||
if (metric.unit === '%') return `${Math.round(value)} ${metric.unit}`
|
||||
if (metric.unit) return `${Math.round(value)} ${metric.unit}`
|
||||
return `${Math.round(value)}`
|
||||
}
|
||||
|
||||
const kpiMetrics = computed(() => metricBlueprints.map((metric, index) => {
|
||||
const rawValue = demoTotals[metric.key]
|
||||
const displayValue = formatMetricValue(metric, rawValue)
|
||||
|
||||
return {
|
||||
...metric,
|
||||
displayValue,
|
||||
changeText: metric.change,
|
||||
delay: index * 55
|
||||
}
|
||||
}))
|
||||
|
||||
const activeTrend = computed(() => trendSeries[activeTrendRange.value])
|
||||
|
||||
const spendTotal = computed(() => spendByCategory.reduce((sum, item) => sum + item.value, 0))
|
||||
const riskTotal = computed(() => exceptionMix.reduce((sum, item) => sum + item.value, 0))
|
||||
|
||||
const spendLegend = computed(() => spendByCategory.map((item) => ({
|
||||
...item,
|
||||
display: `${Math.round((item.value / spendTotal.value) * 100)}%`
|
||||
})))
|
||||
|
||||
const riskLegend = computed(() => exceptionMix.map((item) => ({
|
||||
...item,
|
||||
display: `${item.value} 单`
|
||||
})))
|
||||
|
||||
const rankedDepartments = computed(() => {
|
||||
const rows = demoDepartments
|
||||
const max = Math.max(...rows.map((item) => item.amount), 1)
|
||||
|
||||
return rows.slice(0, 5).map((item, index) => ({
|
||||
...item,
|
||||
rank: index + 1,
|
||||
shortName: item.name,
|
||||
amountLabel: formatCurrency(item.amount),
|
||||
width: `${Math.max((item.amount / max) * 100, 18)}%`,
|
||||
color: item.color
|
||||
}))
|
||||
})
|
||||
|
||||
return {
|
||||
emit,
|
||||
activeTrendRange,
|
||||
activeDepartmentRange,
|
||||
demoTotals,
|
||||
demoDepartments,
|
||||
formatCompact,
|
||||
formatCurrency,
|
||||
formatMetricValue,
|
||||
kpiMetrics,
|
||||
activeTrend,
|
||||
spendTotal,
|
||||
riskTotal,
|
||||
spendLegend,
|
||||
riskLegend,
|
||||
rankedDepartments,
|
||||
metricBlueprints,
|
||||
trendRanges,
|
||||
trendSeries,
|
||||
spendByCategory,
|
||||
exceptionMix,
|
||||
departmentRangeOptions,
|
||||
bottlenecks,
|
||||
budgetSummary
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
244
web/src/views/scripts/PoliciesView.js
Normal file
244
web/src/views/scripts/PoliciesView.js
Normal file
@@ -0,0 +1,244 @@
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'PoliciesView' ,
|
||||
setup(props, { emit }) {
|
||||
const folderSearch = ref('')
|
||||
const activeFolder = ref('差旅规范')
|
||||
const selectedDocument = ref(null)
|
||||
|
||||
const folders = [
|
||||
{ name: '财务知识库', count: 36, icon: 'mdi mdi-folder' },
|
||||
{ name: '制度政策', count: 8, icon: 'mdi mdi-folder' },
|
||||
{ name: '报销制度', count: 12, icon: 'mdi mdi-folder-open' },
|
||||
{ name: '差旅规范', count: 18, icon: 'mdi mdi-folder' },
|
||||
{ name: '发票管理', count: 14, icon: 'mdi mdi-folder' },
|
||||
{ name: '税务合规', count: 16, icon: 'mdi mdi-folder' },
|
||||
{ name: '预算管理', count: 9, icon: 'mdi mdi-folder' },
|
||||
{ name: '财务共享', count: 7, icon: 'mdi mdi-folder' },
|
||||
{ name: '培训资料', count: 6, icon: 'mdi mdi-folder' },
|
||||
{ name: '常见问答', count: 11, icon: 'mdi mdi-folder' }
|
||||
]
|
||||
|
||||
const documents = [
|
||||
{
|
||||
name: '差旅报销管理办法（2024版）',
|
||||
folder: '差旅规范',
|
||||
tag: '差旅 / 制度',
|
||||
time: '2024-05-12 14:35',
|
||||
version: 'v3.2',
|
||||
state: '已生效',
|
||||
stateTone: 'success',
|
||||
owner: '张明',
|
||||
icon: 'mdi mdi-file-document-outline-pdf pdf',
|
||||
fileType: 'pdf',
|
||||
fileTypeLabel: 'PDF 预览',
|
||||
summary: '面向员工与财务共享团队的差旅费用标准、审批边界和附件要求。',
|
||||
previewPages: [
|
||||
{
|
||||
title: '差旅报销管理办法（2024版）',
|
||||
subtitle: '住宿、交通、审批与附件要求',
|
||||
stats: [
|
||||
{ label: '适用范围', value: '全员' },
|
||||
{ label: '生效日期', value: '2024-05-12' },
|
||||
{ label: '更新重点', value: '住宿标准' }
|
||||
],
|
||||
blocks: [
|
||||
{
|
||||
heading: '一、适用范围',
|
||||
lines: ['适用于国内差旅申请、预订、报销与借款冲销。', '共享中心审核以出差申请、票据与预算中心为准。']
|
||||
},
|
||||
{
|
||||
heading: '二、住宿标准',
|
||||
lines: ['一线城市单晚标准 650 元，超标需附业务说明。', '连续住宿超过 3 晚需补充行程与客户拜访记录。']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '审批与附件要求',
|
||||
subtitle: '流程节点与必要凭证',
|
||||
stats: [
|
||||
{ label: '附件校验', value: '7 项' },
|
||||
{ label: '审批节点', value: '4 级' },
|
||||
{ label: '自动拦截', value: '超标 / 重复' }
|
||||
],
|
||||
blocks: [
|
||||
{
|
||||
heading: '三、审批规则',
|
||||
lines: ['直属主管审批通过后进入财务复核。', '超预算或超标申请需追加部门负责人审批。']
|
||||
},
|
||||
{
|
||||
heading: '四、附件清单',
|
||||
lines: ['机票行程单、酒店发票、住宿水单、出租车发票。', '如存在改签、退票或异常情况，需补充说明材料。']
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '发票查验规范及操作指引',
|
||||
folder: '发票管理',
|
||||
tag: '发票 / 操作',
|
||||
time: '2024-05-10 10:22',
|
||||
version: 'v1.5',
|
||||
state: '已生效',
|
||||
stateTone: 'success',
|
||||
owner: '李娜',
|
||||
icon: 'mdi mdi-file-document-outline-word word',
|
||||
fileType: 'word',
|
||||
fileTypeLabel: 'Word 预览',
|
||||
summary: '说明发票验真路径、异常票据处理方式以及入账留痕要求。',
|
||||
previewPages: [
|
||||
{
|
||||
title: '发票查验规范及操作指引',
|
||||
subtitle: '验真流程与异常识别',
|
||||
stats: [
|
||||
{ label: '查验入口', value: '3 个' },
|
||||
{ label: '异常类型', value: '6 类' },
|
||||
{ label: '责任角色', value: '财务专员' }
|
||||
],
|
||||
blocks: [
|
||||
{
|
||||
heading: '一、查验入口',
|
||||
lines: ['优先通过税务查验接口进行自动验真。', '无法自动识别时转人工核验并保留截图。']
|
||||
},
|
||||
{
|
||||
heading: '二、异常票据',
|
||||
lines: ['票面抬头不一致、号码重复、跨月补录需重点标注。', '出现红冲票据时需关联原单据并补充说明。']
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '费用报销标准细则（2024）',
|
||||
folder: '报销制度',
|
||||
tag: '报销 / 标准',
|
||||
time: '2024-05-08 09:16',
|
||||
version: 'v2.1',
|
||||
state: '已生效',
|
||||
stateTone: 'success',
|
||||
owner: '王磊',
|
||||
icon: 'mdi mdi-file-document-outline-pdf pdf',
|
||||
fileType: 'pdf',
|
||||
fileTypeLabel: 'PDF 预览',
|
||||
summary: '定义招待、差旅、办公采购与培训等费用类型的标准与限制。',
|
||||
previewPages: [
|
||||
{
|
||||
title: '费用报销标准细则（2024）',
|
||||
subtitle: '费用口径与报销边界',
|
||||
stats: [
|
||||
{ label: '费用大类', value: '8 类' },
|
||||
{ label: '更新日期', value: '2024-05-08' },
|
||||
{ label: '重点事项', value: '招待 / 交通' }
|
||||
],
|
||||
blocks: [
|
||||
{
|
||||
heading: '一、业务招待',
|
||||
lines: ['需填写客户单位、参与人数及招待事由。', '单次超过 2000 元需上传审批邮件或会议纪要。']
|
||||
},
|
||||
{
|
||||
heading: '二、交通与差旅',
|
||||
lines: ['市内交通按真实票据报销，超标部分需说明。', '夜间出行或跨城交通需关联出差申请。']
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '差旅费用标准对照表（国内）',
|
||||
folder: '差旅规范',
|
||||
tag: '差旅 / 标准',
|
||||
time: '2024-05-05 08:20',
|
||||
version: 'v1.3',
|
||||
state: '审批中',
|
||||
stateTone: 'warning',
|
||||
owner: '陈杰',
|
||||
icon: 'mdi mdi-file-document-outline-excel excel',
|
||||
fileType: 'excel',
|
||||
fileTypeLabel: 'Excel 预览',
|
||||
summary: '各城市住宿、餐补与交通等级对照表，供申请与审核环节快速查询。',
|
||||
previewPages: [
|
||||
{
|
||||
title: '差旅费用标准对照表（国内）',
|
||||
subtitle: '城市维度对照',
|
||||
stats: [
|
||||
{ label: '覆盖城市', value: '48 个' },
|
||||
{ label: '住宿档位', value: '4 级' },
|
||||
{ label: '餐补标准', value: '日维度' }
|
||||
],
|
||||
blocks: [
|
||||
{
|
||||
heading: '一、住宿标准',
|
||||
lines: ['北京 / 上海 / 深圳：650 元 / 晚。', '新一线城市：500 元 / 晚，其余城市按 380 元 / 晚执行。']
|
||||
},
|
||||
{
|
||||
heading: '二、交通等级',
|
||||
lines: ['总监及以上可乘坐高铁商务座或机票公务舱。', '其他员工默认经济舱、高铁二等座。']
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '借款管理办法及流程',
|
||||
folder: '财务共享',
|
||||
tag: '借款 / 流程',
|
||||
time: '2024-05-03 11:05',
|
||||
version: 'v1.0',
|
||||
state: '已生效',
|
||||
stateTone: 'success',
|
||||
owner: '刘洋',
|
||||
icon: 'mdi mdi-file-document-outline-pdf pdf',
|
||||
fileType: 'pdf',
|
||||
fileTypeLabel: 'PDF 预览',
|
||||
summary: '覆盖差旅借款、项目借款和借款冲销的全流程要求。',
|
||||
previewPages: [
|
||||
{
|
||||
title: '借款管理办法及流程',
|
||||
subtitle: '借款申请与冲销闭环',
|
||||
stats: [
|
||||
{ label: '适用场景', value: '差旅 / 项目' },
|
||||
{ label: '冲销时限', value: '30 天' },
|
||||
{ label: '审批路径', value: '3 级' }
|
||||
],
|
||||
blocks: [
|
||||
{
|
||||
heading: '一、借款申请',
|
||||
lines: ['借款申请需绑定预算中心与费用类型。', '超过 5000 元需部门负责人额外审批。']
|
||||
},
|
||||
{
|
||||
heading: '二、冲销要求',
|
||||
lines: ['借款发生后 30 日内完成报销与冲销。', '逾期未冲销将纳入月度风险提醒。']
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const filteredFolders = computed(() => {
|
||||
const key = folderSearch.value.trim()
|
||||
if (!key) return folders
|
||||
return folders.filter((folder) => folder.name.includes(key))
|
||||
})
|
||||
|
||||
const filteredDocuments = computed(() =>
|
||||
documents.filter((doc) => {
|
||||
const inFolder = activeFolder.value ? doc.folder === activeFolder.value : true
|
||||
return inFolder
|
||||
})
|
||||
)
|
||||
|
||||
return {
|
||||
folderSearch,
|
||||
activeFolder,
|
||||
selectedDocument,
|
||||
folders,
|
||||
documents,
|
||||
filteredFolders,
|
||||
filteredDocuments
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
116
web/src/views/scripts/RequestsView.js
Normal file
116
web/src/views/scripts/RequestsView.js
Normal file
@@ -0,0 +1,116 @@
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'RequestsView',
|
||||
props: {
|
||||
filteredRequests: { type: Array, required: true }
|
||||
},
|
||||
emits: ['ask', 'approve', 'reject', 'create-request'] ,
|
||||
setup(props, { emit }) {
|
||||
const activeTab = ref('全部')
|
||||
const tabs = ['全部', '待提交', '审批中', '待出行', '已完成']
|
||||
const filters = ['报销状态', '出差城市', '费用类型']
|
||||
|
||||
const datePopover = ref(false)
|
||||
const rangeStart = ref('')
|
||||
const rangeEnd = ref('')
|
||||
const appliedStart = ref('')
|
||||
const appliedEnd = ref('')
|
||||
|
||||
const dateRangeLabel = computed(() => {
|
||||
if (appliedStart.value && appliedEnd.value) return `${appliedStart.value} ~ ${appliedEnd.value}`
|
||||
return '选择时间段'
|
||||
})
|
||||
|
||||
function applyDateRange() {
|
||||
if (!rangeStart.value || !rangeEnd.value) return
|
||||
appliedStart.value = rangeStart.value
|
||||
appliedEnd.value = rangeEnd.value
|
||||
datePopover.value = false
|
||||
}
|
||||
|
||||
const rows = [
|
||||
{ id: 'BR240715001', reason: '华东区域客户拜访', city: '上海、苏州、杭州', period: '07-14~07-17 (4天)', applyTime: '2024-07-13', amount: '￥4,280.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '待预订酒店', travelTone: 'warning' },
|
||||
{ id: 'BR240714010', reason: '年度战略合作伙伴会议', city: '北京', period: '07-15~07-16 (2天)', applyTime: '2024-07-12', amount: '￥1,860.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '待订机票', travelTone: 'warning' },
|
||||
{ id: 'BR240713008', reason: '产品培训与交流', city: '深圳', period: '07-10~07-12 (3天)', applyTime: '2024-07-09', amount: '￥2,150.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240712001', reason: '客户方案汇报', city: '上海', period: '07-08~07-11 (4天)', applyTime: '2024-07-07', amount: '￥3,680.00', node: '财务审核', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240711005', reason: '华南区域市场调研', city: '广州、佛山', period: '07-09~07-11 (3天)', applyTime: '2024-07-06', amount: '￥1,920.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '无需预订', travelTone: 'neutral' },
|
||||
{ id: 'BR240710003', reason: '供应商现场考察', city: '东莞', period: '07-06~07-07 (2天)', applyTime: '2024-07-05', amount: '￥680.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240709005', reason: '客户方案汇报', city: '北京', period: '07-06~07-08 (3天)', applyTime: '2024-07-05', amount: '￥1,980.00', node: '财务审核', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240708012', reason: '供应商现场考察', city: '广州', period: '07-04~07-05 (2天)', applyTime: '2024-07-03', amount: '￥860.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '无需预订', travelTone: 'neutral' },
|
||||
{ id: 'BR240707003', reason: '项目启动会', city: '成都', period: '07-01~07-03 (3天)', applyTime: '2024-06-29', amount: '￥2,420.00', node: '财务审核', approval: '审批中', approvalTone: 'info', travel: '待预订酒店', travelTone: 'warning' },
|
||||
{ id: 'BR240706009', reason: '客户拜访与市场调研', city: '南京、合肥', period: '06-28~06-30 (3天)', applyTime: '2024-06-26', amount: '￥1,750.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240705007', reason: '技术交流会', city: '武汉', period: '06-25~06-26 (2天)', applyTime: '2024-06-23', amount: '￥1,120.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '无需预订', travelTone: 'neutral' },
|
||||
{ id: 'BR240704004', reason: '渠道合作洽谈', city: '西安', period: '06-20~06-21 (2天)', applyTime: '2024-06-18', amount: '￥780.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240703011', reason: '新员工入职培训', city: '长沙', period: '06-18~06-19 (2天)', applyTime: '2024-06-16', amount: '￥920.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240702006', reason: '季度业绩复盘会', city: '杭州', period: '06-15~06-16 (2天)', applyTime: '2024-06-13', amount: '￥1,350.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240701002', reason: '智慧金融峰会参展', city: '上海', period: '06-12~06-14 (3天)', applyTime: '2024-06-10', amount: '￥5,680.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240630009', reason: '西南区域渠道拓展', city: '重庆、贵阳', period: '06-10~06-13 (4天)', applyTime: '2024-06-08', amount: '￥3,450.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240629003', reason: '信息安全合规审计', city: '深圳', period: '06-08~06-09 (2天)', applyTime: '2024-06-06', amount: '￥1,180.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '无需预订', travelTone: 'neutral' },
|
||||
{ id: 'BR240628007', reason: '产学研合作对接', city: '南京', period: '06-05~06-07 (3天)', applyTime: '2024-06-03', amount: '￥2,260.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240627001', reason: 'ERP系统上线支持', city: '青岛', period: '06-03~06-05 (3天)', applyTime: '2024-06-01', amount: '￥1,960.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240626004', reason: '大客户续约洽谈', city: '天津', period: '06-01~06-02 (2天)', applyTime: '2024-05-29', amount: '￥890.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240625010', reason: '区域销售团队建设', city: '厦门', period: '05-28~05-30 (3天)', applyTime: '2024-05-26', amount: '￥2,780.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240624002', reason: '供应链管理系统演示', city: '苏州', period: '05-25~05-26 (2天)', applyTime: '2024-05-23', amount: '￥650.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '无需预订', travelTone: 'neutral' },
|
||||
{ id: 'BR240623008', reason: '行业白皮书发布会', city: '北京', period: '05-22~05-23 (2天)', applyTime: '2024-05-20', amount: '￥1,560.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '待订机票', travelTone: 'warning' },
|
||||
{ id: 'BR240622005', reason: '跨部门协同工作坊', city: '大连', period: '05-20~05-22 (3天)', applyTime: '2024-05-18', amount: '￥2,340.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '无需预订', travelTone: 'neutral' },
|
||||
{ id: 'BR240621003', reason: '数字化转型的客户交流', city: '深圳、珠海', period: '05-16~05-18 (3天)', applyTime: '2024-05-14', amount: '￥3,120.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '待预订酒店', travelTone: 'warning' },
|
||||
{ id: 'BR240620006', reason: '年中预算评审会', city: '上海', period: '05-13~05-14 (2天)', applyTime: '2024-05-11', amount: '￥1,480.00', node: '财务审核', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240619001', reason: '医疗行业解决方案展', city: '成都', period: '05-10~05-12 (3天)', applyTime: '2024-05-08', amount: '￥3,860.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240618009', reason: '东北区域客户回访', city: '沈阳、长春', period: '05-06~05-09 (4天)', applyTime: '2024-05-04', amount: '￥4,520.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '待订机票', travelTone: 'warning' },
|
||||
{ id: 'BR240617007', reason: '大数据平台技术对接', city: '杭州', period: '05-03~05-05 (3天)', applyTime: '2024-05-01', amount: '￥2,180.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||||
{ id: 'BR240616004', reason: '国际业务合规培训', city: '北京', period: '04-28~04-30 (3天)', applyTime: '2024-04-26', amount: '￥2,960.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' }
|
||||
]
|
||||
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const pageSizes = [10, 20, 50]
|
||||
const pageSizeOpen = ref(false)
|
||||
|
||||
function changePageSize(size) {
|
||||
pageSize.value = size
|
||||
pageSizeOpen.value = false
|
||||
currentPage.value = 1
|
||||
}
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if (activeTab.value === '全部') return rows
|
||||
return rows.filter((row) => row.approval === activeTab.value || row.travel.includes(activeTab.value.replace('待出行', '待订')))
|
||||
})
|
||||
|
||||
const totalCount = computed(() => filteredRows.value.length)
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / pageSize.value)))
|
||||
|
||||
const visibleRows = computed(() => {
|
||||
const start = (currentPage.value - 1) * pageSize.value
|
||||
return filteredRows.value.slice(start, start + pageSize.value)
|
||||
})
|
||||
|
||||
watch(activeTab, () => { currentPage.value = 1 })
|
||||
|
||||
return {
|
||||
emit,
|
||||
activeTab,
|
||||
tabs,
|
||||
filters,
|
||||
datePopover,
|
||||
rangeStart,
|
||||
rangeEnd,
|
||||
appliedStart,
|
||||
appliedEnd,
|
||||
dateRangeLabel,
|
||||
applyDateRange,
|
||||
rows,
|
||||
currentPage,
|
||||
pageSize,
|
||||
pageSizes,
|
||||
pageSizeOpen,
|
||||
changePageSize,
|
||||
filteredRows,
|
||||
totalCount,
|
||||
totalPages,
|
||||
visibleRows
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
443
web/src/views/scripts/TravelReimbursementCreateView.js
Normal file
443
web/src/views/scripts/TravelReimbursementCreateView.js
Normal file
@@ -0,0 +1,443 @@
|
||||
import { computed, nextTick, onMounted, ref } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'TravelReimbursementCreateView',
|
||||
props: {
|
||||
initialPrompt: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
entrySource: {
|
||||
type: String,
|
||||
default: 'requests'
|
||||
},
|
||||
requestContext: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
emits: ['close'] ,
|
||||
setup(props, { emit }) {
|
||||
const DEFAULT_REQUEST = {
|
||||
id: 'BR240712001',
|
||||
reason: '客户方案汇报',
|
||||
city: '上海',
|
||||
period: '07-08 ~ 07-11',
|
||||
applyTime: '2024-07-07',
|
||||
amount: '¥3,680.00',
|
||||
node: '财务复核',
|
||||
approval: '主管审批中',
|
||||
travel: '已订酒店 / 机票'
|
||||
}
|
||||
|
||||
const SOURCE_LABELS = {
|
||||
workbench: '来自个人工作台',
|
||||
topbar: '来自发起报销',
|
||||
detail: '来自智能录入',
|
||||
upload: '来自附件上传',
|
||||
requests: '来自报销列表'
|
||||
}
|
||||
|
||||
let messageSeed = 0
|
||||
|
||||
const fileInputRef = ref(null)
|
||||
const messageListRef = ref(null)
|
||||
const composerDraft = ref('')
|
||||
const attachedFiles = ref([])
|
||||
const messages = ref([])
|
||||
const currentInsight = ref({
|
||||
intent: 'welcome',
|
||||
confidence: 0,
|
||||
title: '',
|
||||
summary: '',
|
||||
welcome: { cards: [] }
|
||||
})
|
||||
|
||||
const linkedRequest = computed(() => sanitizeRequest(props.requestContext))
|
||||
const sourceLabel = computed(() => SOURCE_LABELS[props.entrySource] ?? '来自 AI 工作台')
|
||||
const canSubmit = computed(() => Boolean(composerDraft.value.trim() || attachedFiles.value.length))
|
||||
const showInsightPanel = computed(() => currentInsight.value.intent !== 'welcome')
|
||||
const composerPlaceholder = computed(() => {
|
||||
if (props.entrySource === 'detail') {
|
||||
return `例如：帮我看一下 ${linkedRequest.value.id} 现在到哪个审批节点，或者补充超标说明。`
|
||||
}
|
||||
return '例如：帮我发起差旅报销、查一下审批节点，或者识别我刚上传的票据。'
|
||||
})
|
||||
const currentIntentLabel = computed(() => {
|
||||
const labels = {
|
||||
welcome: '等待输入',
|
||||
draft: '报销草稿',
|
||||
approval: '审批查询',
|
||||
recognition: '单据识别',
|
||||
note: '补充说明'
|
||||
}
|
||||
return labels[currentInsight.value.intent] ?? 'AI 处理中'
|
||||
})
|
||||
|
||||
const shortcuts = computed(() => [
|
||||
{ label: '查审批节点', icon: 'mdi mdi-timeline-clock-outline', prompt: `帮我看一下 ${linkedRequest.value.id} 现在到哪个审批节点了` },
|
||||
{ label: '识别上传单据', icon: 'mdi mdi-file-search-outline', prompt: '我上传了几张票据，帮我识别并给出录入结果' },
|
||||
{ label: '补充报销说明', icon: 'mdi mdi-text-box-edit-outline', prompt: `帮我给 ${linkedRequest.value.id} 补一段费用说明` },
|
||||
{ label: '生成报销草稿', icon: 'mdi mdi-file-document-edit-outline', prompt: '我要发起一笔差旅费申请报销，请帮我先生成草稿' }
|
||||
])
|
||||
|
||||
messages.value = [
|
||||
createMessage(
|
||||
'assistant',
|
||||
buildGreeting(),
|
||||
[]
|
||||
)
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
currentInsight.value = buildWelcomeInsight()
|
||||
if (props.initialPrompt?.trim()) {
|
||||
composerDraft.value = props.initialPrompt.trim()
|
||||
submitComposer()
|
||||
} else {
|
||||
nextTick(scrollToBottom)
|
||||
}
|
||||
})
|
||||
|
||||
function sanitizeRequest(request) {
|
||||
if (!request) return { ...DEFAULT_REQUEST }
|
||||
return {
|
||||
id: request.id ?? DEFAULT_REQUEST.id,
|
||||
reason: request.reason ?? DEFAULT_REQUEST.reason,
|
||||
city: request.city ?? DEFAULT_REQUEST.city,
|
||||
period: request.period ?? DEFAULT_REQUEST.period,
|
||||
applyTime: request.applyTime ?? DEFAULT_REQUEST.applyTime,
|
||||
amount: request.amount ?? DEFAULT_REQUEST.amount,
|
||||
node: request.node ?? DEFAULT_REQUEST.node,
|
||||
approval: request.approval ?? DEFAULT_REQUEST.approval,
|
||||
travel: request.travel ?? DEFAULT_REQUEST.travel
|
||||
}
|
||||
}
|
||||
|
||||
function buildGreeting() {
|
||||
if (props.entrySource === 'detail') {
|
||||
return `已进入统一对话工作台，当前关联单据 ${linkedRequest.value.id}。你可以直接问审批节点、补充说明，或继续上传票据。`
|
||||
}
|
||||
return '这里是统一对话入口。你可以直接发起报销、查询审批节点，或者上传单据让我识别。'
|
||||
}
|
||||
|
||||
function buildWelcomeInsight() {
|
||||
return {
|
||||
intent: 'welcome',
|
||||
confidence: 86,
|
||||
title: props.entrySource === 'detail' ? `已关联 ${linkedRequest.value.id}` : '先告诉我你要处理什么',
|
||||
summary: props.entrySource === 'detail'
|
||||
? '右侧会跟随你的提问切换成审批状态、识别结果或补充说明界面。'
|
||||
: '无论是发起报销、查审批还是识别票据，这里都共用一个对话入口。',
|
||||
welcome: {
|
||||
cards: [
|
||||
{ icon: 'mdi mdi-timeline-clock-outline', title: '审批查询', desc: '识别到审批、节点、状态等意图时，右侧切到流程状态。' },
|
||||
{ icon: 'mdi mdi-file-search-outline', title: '票据识别', desc: '上传附件后展示识别结果、建议金额和缺失材料。' },
|
||||
{ icon: 'mdi mdi-text-box-check-outline', title: '补充说明', desc: '补充超标、夜间交通、业务招待等说明时，右侧给出结构化备注。' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createMessage(role, text, attachments = []) {
|
||||
messageSeed += 1
|
||||
return {
|
||||
id: `msg-${messageSeed}`,
|
||||
role,
|
||||
text,
|
||||
attachments,
|
||||
time: nowTime()
|
||||
}
|
||||
}
|
||||
|
||||
function nowTime() {
|
||||
return new Date().toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
})
|
||||
}
|
||||
|
||||
function triggerFileUpload() {
|
||||
fileInputRef.value?.click()
|
||||
}
|
||||
|
||||
function handleFilesChange(event) {
|
||||
attachedFiles.value = Array.from(event.target.files ?? [])
|
||||
}
|
||||
|
||||
function runShortcut(prompt) {
|
||||
composerDraft.value = prompt
|
||||
submitComposer()
|
||||
}
|
||||
|
||||
function submitComposer() {
|
||||
if (!canSubmit.value) return
|
||||
|
||||
const rawText = composerDraft.value.trim()
|
||||
const fileNames = attachedFiles.value.map((file) => file.name)
|
||||
const userText = rawText || `我上传了 ${fileNames.length} 份单据，请帮我识别并录入。`
|
||||
|
||||
messages.value.push(createMessage('user', userText, fileNames))
|
||||
|
||||
const insight = analyzeIntent(userText, fileNames)
|
||||
currentInsight.value = insight
|
||||
messages.value.push(createMessage('assistant', insight.reply))
|
||||
|
||||
composerDraft.value = ''
|
||||
attachedFiles.value = []
|
||||
if (fileInputRef.value) {
|
||||
fileInputRef.value.value = ''
|
||||
}
|
||||
|
||||
nextTick(scrollToBottom)
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
if (!messageListRef.value) return
|
||||
messageListRef.value.scrollTop = messageListRef.value.scrollHeight
|
||||
}
|
||||
|
||||
function analyzeIntent(text, files) {
|
||||
if (isRecognitionIntent(text, files)) return buildRecognitionInsight(text, files)
|
||||
if (isApprovalIntent(text)) return buildApprovalInsight(text)
|
||||
if (isNoteIntent(text)) return buildNoteInsight(text)
|
||||
return buildDraftInsight(text, files)
|
||||
}
|
||||
|
||||
function isRecognitionIntent(text, files) {
|
||||
return files.length > 0 || /(上传|附件|票据|发票|单据|识别|ocr)/i.test(text)
|
||||
}
|
||||
|
||||
function isApprovalIntent(text) {
|
||||
return /(审批|节点|状态|进度|流程|卡在哪|到哪了|通过了吗|驳回)/.test(text)
|
||||
}
|
||||
|
||||
function isNoteIntent(text) {
|
||||
return /(说明|备注|补充|原因|超标|夜间|特殊情况|备注一下)/.test(text)
|
||||
}
|
||||
|
||||
function buildApprovalInsight(text) {
|
||||
const requestId = extractRequestId(text) || linkedRequest.value.id
|
||||
const timeline = [
|
||||
{ label: '提交申请', time: `${linkedRequest.value.applyTime} 09:18`, state: 'done' },
|
||||
{ label: '票据识别', time: `${linkedRequest.value.applyTime} 09:22`, state: 'done' },
|
||||
{ label: '直属主管审批', time: '今天 10:46', state: 'done' },
|
||||
{ label: linkedRequest.value.node, time: '进行中', state: 'current' },
|
||||
{ label: '归档入账', time: '待处理', state: 'pending' }
|
||||
]
|
||||
|
||||
return {
|
||||
intent: 'approval',
|
||||
confidence: 95,
|
||||
title: `${requestId} 的审批状态`,
|
||||
summary: `当前在 ${linkedRequest.value.node}，右侧已经切到流程状态界面。`,
|
||||
reply: `我识别到你是在查询审批节点。${requestId} 当前处于 ${linkedRequest.value.node}，下一步预计由财务在今天 17:30 前处理。`,
|
||||
status: {
|
||||
requestId,
|
||||
currentStatus: linkedRequest.value.approval,
|
||||
currentNode: linkedRequest.value.node,
|
||||
nextOwner: '财务共享中心 · 王敏',
|
||||
eta: '今天 17:30 前',
|
||||
timeline,
|
||||
actions: [
|
||||
'若 17:30 后仍未推进，可提醒财务共享中心处理。',
|
||||
'当前不建议重复提交，避免流程串单。',
|
||||
'如果要补充说明，直接在当前对话里继续输入即可。'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buildRecognitionInsight(text, files) {
|
||||
const requestId = extractRequestId(text) || linkedRequest.value.id
|
||||
const receipts = buildReceiptItems(text, files)
|
||||
const total = receipts.reduce((sum, item) => sum + parseCurrency(item.amount), 0)
|
||||
const amount = formatCurrency(total || guessAmount(text) || 3680)
|
||||
const completeness = files.length >= 2 ? '资料较完整' : '仍需补件'
|
||||
|
||||
return {
|
||||
intent: 'recognition',
|
||||
confidence: files.length ? 97 : 90,
|
||||
title: '已切换到单据识别视图',
|
||||
summary: `识别到 ${receipts.length} 条候选费用，建议关联到 ${requestId}。`,
|
||||
reply: `我识别到你是在上传或识别单据。右侧已经展示识别结果、建议金额和缺失材料。`,
|
||||
recognition: {
|
||||
state: files.length ? '识别完成' : '待补附件',
|
||||
requestId,
|
||||
fileCount: Math.max(files.length, 1),
|
||||
amount,
|
||||
completeness,
|
||||
receipts,
|
||||
suggestions: [
|
||||
files.length ? '可直接生成费用明细草稿。' : '建议补传票据原件，识别结果会更稳定。',
|
||||
'金额和费用分类已经给出，确认后即可写入报销单。',
|
||||
'如果有多张单据属于同一行程，可以继续上传，右侧会合并结果。'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buildNoteInsight(text) {
|
||||
const requestId = extractRequestId(text) || linkedRequest.value.id
|
||||
const noteType = /超标|夜间/.test(text) ? '特殊场景说明' : '补充报销说明'
|
||||
const generatedNote = /超标|夜间/.test(text)
|
||||
? '因客户会议结束较晚，产生夜间交通费用，已保留行程截图与打车凭证，申请按实际发生金额报销。'
|
||||
: '本次费用与客户现场沟通及方案汇报直接相关，单据与行程已对应关联，请按当前草稿继续流转。'
|
||||
|
||||
return {
|
||||
intent: 'note',
|
||||
confidence: 93,
|
||||
title: `${requestId} 的补充说明`,
|
||||
summary: `识别到你是在补充备注，右侧切到说明整理界面。`,
|
||||
reply: `我识别到你是在补充说明。右侧已经生成结构化备注，可直接作为对应单号的附加说明。`,
|
||||
note: {
|
||||
requestId,
|
||||
state: noteType,
|
||||
generatedNote,
|
||||
impacts: [
|
||||
'会同步显示给当前审批节点处理人。',
|
||||
'若涉及超标或夜间交通，审批意见会优先查看这段说明。',
|
||||
'继续补充金额、参与人或业务背景时，我会自动更新说明版本。'
|
||||
],
|
||||
owner: linkedRequest.value.node,
|
||||
nextAction: '继续补充或提交当前说明'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buildDraftInsight(text, files) {
|
||||
const requestId = linkedRequest.value.id
|
||||
const items = buildDraftItems(text, files)
|
||||
const total = items.reduce((sum, item) => sum + parseCurrency(item.amount), 0)
|
||||
|
||||
return {
|
||||
intent: 'draft',
|
||||
confidence: 91,
|
||||
title: '已切换到报销草稿视图',
|
||||
summary: '识别到你是在发起报销或继续填写草稿，右侧展示当前建议明细。',
|
||||
reply: '我识别到你是在发起或继续整理报销。右侧已经切到草稿视图，展示建议费用明细和待补信息。',
|
||||
draft: {
|
||||
state: files.length ? '可继续完善' : '草稿已生成',
|
||||
requestId,
|
||||
type: inferDraftType(text),
|
||||
amount: formatCurrency(total || guessAmount(text) || 3280),
|
||||
progress: files.length ? '已录入基础信息' : '待补票据',
|
||||
items,
|
||||
missing: [
|
||||
'补充至少一份原始票据或行程截图。',
|
||||
'确认出差事由、城市和发生日期是否完整。',
|
||||
'如有业务招待或特殊交通，请补充关联说明。'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function extractRequestId(text) {
|
||||
return text.match(/BR\d{6,}/i)?.[0] ?? ''
|
||||
}
|
||||
|
||||
function inferDraftType(text) {
|
||||
if (/招待|客户|用餐/.test(text)) return '业务招待报销'
|
||||
if (/交通|打车|高铁|机票/.test(text)) return '交通费用报销'
|
||||
return '差旅费申请报销'
|
||||
}
|
||||
|
||||
function buildDraftItems(text, files) {
|
||||
const items = []
|
||||
|
||||
if (/高铁|火车|车票/.test(text)) {
|
||||
items.push({ name: '高铁 / 火车票', desc: '建议录入为城际交通', amount: '¥236.00', tag: '交通' })
|
||||
}
|
||||
if (/机票|航班/.test(text)) {
|
||||
items.push({ name: '机票', desc: '建议录入为航空出行', amount: '¥1,280.00', tag: '交通' })
|
||||
}
|
||||
if (/酒店|住宿/.test(text)) {
|
||||
items.push({ name: '酒店住宿', desc: '建议录入为住宿费用', amount: '¥780.00', tag: '住宿' })
|
||||
}
|
||||
if (/打车|出租车|网约车/.test(text)) {
|
||||
items.push({ name: '市内交通', desc: '建议合并同日打车订单', amount: '¥126.00', tag: '交通' })
|
||||
}
|
||||
if (/餐|招待|客户/.test(text)) {
|
||||
items.push({ name: '业务招待', desc: '建议补充参与人和业务目的', amount: '¥860.00', tag: '招待' })
|
||||
}
|
||||
|
||||
if (!items.length) {
|
||||
items.push({
|
||||
name: '差旅综合费用',
|
||||
desc: files.length ? '已根据附件生成候选明细' : '根据描述先生成一版草稿',
|
||||
amount: files.length ? '¥3,280.00' : '¥2,680.00',
|
||||
tag: '草稿'
|
||||
})
|
||||
}
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
function buildReceiptItems(text, files) {
|
||||
if (files.length) {
|
||||
return files.map((file, index) => {
|
||||
const type = inferFileType(file, text, index)
|
||||
const baseAmount = guessAmount(file) || guessAmount(text) || (index + 1) * 180 + 120
|
||||
return {
|
||||
name: file,
|
||||
type,
|
||||
amount: formatCurrency(baseAmount),
|
||||
confidence: `${92 - index}%`
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return buildDraftItems(text, files).map((item, index) => ({
|
||||
name: item.name,
|
||||
type: item.tag,
|
||||
amount: item.amount,
|
||||
confidence: `${94 - index}%`
|
||||
}))
|
||||
}
|
||||
|
||||
function inferFileType(fileName, text, index) {
|
||||
const name = `${fileName} ${text}`
|
||||
if (/酒店|住宿/.test(name)) return '住宿单据'
|
||||
if (/机票|航班/.test(name)) return '航空出行'
|
||||
if (/高铁|火车|车票/.test(name)) return '城际交通'
|
||||
if (/打车|出租车|网约车/.test(name)) return '市内交通'
|
||||
return index === 0 ? '费用主票据' : '补充附件'
|
||||
}
|
||||
|
||||
function guessAmount(text) {
|
||||
const match = String(text).match(/(\d+(?:\.\d{1,2})?)/)
|
||||
return match ? Number.parseFloat(match[1]) : 0
|
||||
}
|
||||
|
||||
function parseCurrency(value) {
|
||||
return Number.parseFloat(String(value).replace(/[^\d.]/g, '')) || 0
|
||||
}
|
||||
|
||||
function formatCurrency(value) {
|
||||
return `¥${Number(value).toFixed(2)}`
|
||||
}
|
||||
|
||||
return {
|
||||
emit,
|
||||
fileInputRef,
|
||||
messageListRef,
|
||||
composerDraft,
|
||||
attachedFiles,
|
||||
messages,
|
||||
currentInsight,
|
||||
linkedRequest,
|
||||
sourceLabel,
|
||||
canSubmit,
|
||||
showInsightPanel,
|
||||
composerPlaceholder,
|
||||
currentIntentLabel,
|
||||
shortcuts,
|
||||
triggerFileUpload,
|
||||
handleFilesChange,
|
||||
runShortcut,
|
||||
submitComposer
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
451
web/src/views/scripts/TravelRequestDetailView.js
Normal file
451
web/src/views/scripts/TravelRequestDetailView.js
Normal file
@@ -0,0 +1,451 @@
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'TravelRequestDetailView',
|
||||
props: {
|
||||
request: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
emits: ['backToRequests', 'openAssistant'] ,
|
||||
setup(props, { emit }) {
|
||||
const expandedExpenseId = ref(null)
|
||||
const aiEntryOpen = ref(false)
|
||||
const aiDraft = ref('')
|
||||
const aiFileInput = ref(null)
|
||||
const aiEntrySeed = ref(2)
|
||||
const pendingAiExpense = ref(null)
|
||||
const uploadedAiFiles = ref([])
|
||||
const expenseItems = ref([
|
||||
{
|
||||
id: 'exp-1',
|
||||
time: '07-08',
|
||||
dayLabel: '第 1 天',
|
||||
name: '高铁票',
|
||||
category: '交通',
|
||||
desc: '上海虹桥 -> 杭州东',
|
||||
detail: '客户方案汇报前往现场',
|
||||
amount: '￥236.00',
|
||||
status: '规则通过',
|
||||
tone: 'ok',
|
||||
attachmentStatus: '2 份附件',
|
||||
attachmentHint: '车票 + 行程单',
|
||||
attachmentTone: 'ok',
|
||||
attachments: ['高铁票.pdf', '行程单.pdf'],
|
||||
riskLabel: '规则通过',
|
||||
riskText: '票据与行程匹配',
|
||||
riskTone: 'low'
|
||||
},
|
||||
{
|
||||
id: 'exp-2',
|
||||
time: '07-09',
|
||||
dayLabel: '第 2 天',
|
||||
name: '酒店住宿',
|
||||
category: '住宿',
|
||||
desc: '杭州西湖商务酒店',
|
||||
detail: '1 晚住宿，含早餐',
|
||||
amount: '￥1,180.00',
|
||||
status: '待补材料',
|
||||
tone: 'bad',
|
||||
attachmentStatus: '缺 1 份',
|
||||
attachmentHint: '缺少入住清单',
|
||||
attachmentTone: 'partial',
|
||||
attachments: ['酒店发票.jpg'],
|
||||
riskLabel: '待补材料',
|
||||
riskText: '需补酒店入住清单',
|
||||
riskTone: 'medium'
|
||||
},
|
||||
{
|
||||
id: 'exp-3',
|
||||
time: '07-10',
|
||||
dayLabel: '第 3 天',
|
||||
name: '出租车',
|
||||
category: '市内交通',
|
||||
desc: '客户公司往返酒店',
|
||||
detail: '含夜间打车 2 次',
|
||||
amount: '￥128.00',
|
||||
status: '需说明',
|
||||
tone: 'bad',
|
||||
attachmentStatus: '3 份附件',
|
||||
attachmentHint: '发票已上传',
|
||||
attachmentTone: 'ok',
|
||||
attachments: ['出租车发票1.jpg', '出租车发票2.jpg', '打车订单.png'],
|
||||
riskLabel: '超标说明',
|
||||
riskText: '1 笔夜间交通需补充说明',
|
||||
riskTone: 'medium'
|
||||
},
|
||||
{
|
||||
id: 'exp-4',
|
||||
time: '07-11',
|
||||
dayLabel: '第 4 天',
|
||||
name: '餐补',
|
||||
category: '补贴',
|
||||
desc: '差旅餐补',
|
||||
detail: '按 4 天标准自动计算',
|
||||
amount: '￥320.00',
|
||||
status: '规则通过',
|
||||
tone: 'ok',
|
||||
attachmentStatus: '系统生成',
|
||||
attachmentHint: '无需上传附件',
|
||||
attachmentTone: 'neutral',
|
||||
attachments: [],
|
||||
riskLabel: '规则通过',
|
||||
riskText: '补贴标准校验通过',
|
||||
riskTone: 'low'
|
||||
}
|
||||
])
|
||||
|
||||
const request = computed(() => ({
|
||||
id: props.request?.id ?? 'BR240712001',
|
||||
reason: props.request?.reason ?? '客户方案汇报',
|
||||
city: props.request?.city ?? '上海',
|
||||
period: props.request?.period ?? '07-08~07-11 (4天)',
|
||||
applyTime: props.request?.applyTime ?? '2024-07-07',
|
||||
amount: props.request?.amount ?? '￥3,680.00',
|
||||
node: props.request?.node ?? '财务审核',
|
||||
approval: props.request?.approval ?? '审批中',
|
||||
approvalTone: props.request?.approvalTone ?? 'info',
|
||||
travel: props.request?.travel ?? '已订酒店/机票',
|
||||
travelTone: props.request?.travelTone ?? 'low'
|
||||
}))
|
||||
|
||||
const profile = {
|
||||
name: '张晓明',
|
||||
department: '财务管理员',
|
||||
avatar: '张'
|
||||
}
|
||||
|
||||
const summaryItems = [
|
||||
{ label: '出差城市', value: request.value.city, icon: 'mdi mdi-map-marker-path' },
|
||||
{ label: '出差区间', value: request.value.period, icon: 'mdi mdi-clock-outline' },
|
||||
{ label: '票据关联', value: '6 条明细 / 5 份材料', icon: 'mdi mdi-file-document-multiple-outline' },
|
||||
{ label: '商旅状态', value: request.value.travel, icon: 'mdi mdi-airplane' },
|
||||
{ label: '出差事由', value: request.value.reason, icon: 'mdi mdi-briefcase-outline' }
|
||||
]
|
||||
|
||||
const heroSummaryItems = computed(() => [
|
||||
{ label: '单号', value: request.value.id, icon: 'mdi mdi-pound-box-outline' },
|
||||
{ label: '申请类型', value: '差旅费申请/报销', icon: 'mdi mdi-tag-multiple' },
|
||||
...summaryItems
|
||||
])
|
||||
|
||||
const currentProgressRingMotion = {
|
||||
initial: {
|
||||
scale: 1,
|
||||
opacity: 0.34,
|
||||
},
|
||||
enter: {
|
||||
scale: [1, 1.42, 1.78],
|
||||
opacity: [0.34, 0.16, 0],
|
||||
transition: {
|
||||
duration: 3.2,
|
||||
repeat: Infinity,
|
||||
repeatType: 'loop',
|
||||
repeatDelay: 0.85,
|
||||
ease: 'easeOut',
|
||||
times: [0, 0.5, 1],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const progressSteps = computed(() => {
|
||||
return [
|
||||
{ index: 1, label: '提交申请', time: '07-11 08:46', done: true, active: true },
|
||||
{ index: 2, label: '票据识别', time: '07-11 08:48', done: true, active: true },
|
||||
{ index: 3, label: '费用归类', time: '07-11 08:49', done: true, active: true },
|
||||
{ index: 4, label: '部门负责人审批', time: '07-11 11:28', done: true, active: true },
|
||||
{ index: 5, label: '财务审批', time: '进行中', active: true, current: true },
|
||||
{ index: 6, label: '归档入账', time: '待处理' }
|
||||
]
|
||||
})
|
||||
|
||||
const expenseTotal = computed(() => {
|
||||
const total = expenseItems.value.reduce((sum, item) => sum + parseCurrency(item.amount), 0)
|
||||
return formatCurrency(total)
|
||||
})
|
||||
const uploadedExpenseCount = computed(() => expenseItems.value.filter((item) => item.attachments.length).length)
|
||||
const canSendAiEntry = computed(() => Boolean(aiDraft.value.trim() || uploadedAiFiles.value.length))
|
||||
|
||||
const detailNote = '本次出差用于客户方案汇报与现场沟通，需覆盖往返交通、住宿及市内交通费用。已完成主要票据上传，待补酒店入住清单后即可进入完整审批流程。'
|
||||
|
||||
function toggleExpenseAttachments(id) {
|
||||
expandedExpenseId.value = expandedExpenseId.value === id ? null : id
|
||||
}
|
||||
|
||||
function showExpenseRisk(item) {
|
||||
return Boolean(item.riskText)
|
||||
}
|
||||
|
||||
function openAiEntry() {
|
||||
aiEntryOpen.value = false
|
||||
emit('openAssistant', {
|
||||
source: 'detail',
|
||||
prompt: '',
|
||||
request: request.value
|
||||
})
|
||||
}
|
||||
|
||||
function closeAiEntry() {
|
||||
aiEntryOpen.value = false
|
||||
aiDraft.value = ''
|
||||
pendingAiExpense.value = null
|
||||
uploadedAiFiles.value = []
|
||||
if (aiFileInput.value) {
|
||||
aiFileInput.value.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function parseCurrency(value) {
|
||||
return Number.parseFloat(String(value).replace(/[^\d.]/g, '')) || 0
|
||||
}
|
||||
|
||||
function formatCurrency(value) {
|
||||
return `￥${value.toFixed(2)}`
|
||||
}
|
||||
|
||||
function buildNextExpenseId() {
|
||||
aiEntrySeed.value += 1
|
||||
return `exp-ai-${aiEntrySeed.value}`
|
||||
}
|
||||
|
||||
function inferExpenseCategory(text) {
|
||||
if (/高铁|火车|机票|航班|打车|出租车|地铁|公交|交通/.test(text)) return '交通'
|
||||
if (/酒店|住宿|房费/.test(text)) return '住宿'
|
||||
if (/餐|午饭|晚饭|早餐|餐补/.test(text)) return '餐饮'
|
||||
return '其他'
|
||||
}
|
||||
|
||||
function inferExpenseName(text, category) {
|
||||
if (/高铁/.test(text)) return '高铁票'
|
||||
if (/机票|航班/.test(text)) return '机票'
|
||||
if (/出租车|打车/.test(text)) return '出租车'
|
||||
if (/酒店|住宿/.test(text)) return '酒店住宿'
|
||||
if (/餐补/.test(text)) return '餐补'
|
||||
if (/餐|午饭|晚饭|早餐/.test(text)) return '餐饮'
|
||||
return `${category}费用`
|
||||
}
|
||||
|
||||
function inferAttachments(text, uploadedFiles = []) {
|
||||
if (uploadedFiles.length) {
|
||||
return {
|
||||
status: `${uploadedFiles.length} 份附件`,
|
||||
hint: uploadedFiles.map((file) => file.name).join(' + '),
|
||||
tone: 'ok',
|
||||
files: uploadedFiles.map((file) => file.name),
|
||||
}
|
||||
}
|
||||
|
||||
if (/无需|免附件|系统生成/.test(text)) {
|
||||
return {
|
||||
status: '系统生成',
|
||||
hint: '无需上传附件',
|
||||
tone: 'neutral',
|
||||
files: [],
|
||||
}
|
||||
}
|
||||
|
||||
const uploaded = /已上传|上传了|附上|附件/.test(text)
|
||||
const receipt = /发票/.test(text)
|
||||
const itinerary = /行程单/.test(text)
|
||||
const ticket = /车票|机票/.test(text)
|
||||
const hotelList = /入住清单/.test(text)
|
||||
const files = []
|
||||
|
||||
if (receipt) files.push('发票.jpg')
|
||||
if (itinerary) files.push('行程单.pdf')
|
||||
if (ticket && !files.includes('票据.pdf')) files.push('票据.pdf')
|
||||
if (hotelList) files.push('入住清单.pdf')
|
||||
|
||||
if (uploaded || files.length) {
|
||||
return {
|
||||
status: `${Math.max(files.length, 1)} 份附件`,
|
||||
hint: files.length ? files.join(' + ') : '已上传附件待识别',
|
||||
tone: 'ok',
|
||||
files: files.length ? files : ['附件1.jpg'],
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
status: '缺 1 份',
|
||||
hint: '待补上传票据原件',
|
||||
tone: 'missing',
|
||||
files: [],
|
||||
}
|
||||
}
|
||||
|
||||
function inferRisk(text, attachmentTone) {
|
||||
if (/夜间|超标|说明/.test(text)) {
|
||||
return {
|
||||
status: '需说明',
|
||||
tone: 'bad',
|
||||
riskLabel: '超标说明',
|
||||
riskText: '识别到特殊场景，建议补充费用说明',
|
||||
riskTone: 'medium',
|
||||
}
|
||||
}
|
||||
|
||||
if (attachmentTone === 'missing' || attachmentTone === 'partial') {
|
||||
return {
|
||||
status: '待补材料',
|
||||
tone: 'bad',
|
||||
riskLabel: '待补材料',
|
||||
riskText: '附件不完整，需补齐后再提交审批',
|
||||
riskTone: 'medium',
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
status: '规则通过',
|
||||
tone: 'ok',
|
||||
riskLabel: '规则通过',
|
||||
riskText: 'AI 识别通过，字段已结构化',
|
||||
riskTone: 'low',
|
||||
}
|
||||
}
|
||||
|
||||
function extractDateLabel(text) {
|
||||
const match = text.match(/(\d{1,2})月(\d{1,2})日|(\d{1,2})[-/.](\d{1,2})/)
|
||||
if (!match) {
|
||||
return { time: '07-12', dayLabel: `第 ${expenseItems.value.length + 1} 天` }
|
||||
}
|
||||
|
||||
const month = String(match[1] || match[3] || '07').padStart(2, '0')
|
||||
const day = String(match[2] || match[4] || '12').padStart(2, '0')
|
||||
return { time: `${month}-${day}`, dayLabel: `第 ${expenseItems.value.length + 1} 天` }
|
||||
}
|
||||
|
||||
function extractAmount(text) {
|
||||
const match = text.match(/(\d+(?:\.\d{1,2})?)\s*元/)
|
||||
return formatCurrency(Number.parseFloat(match?.[1] || '0'))
|
||||
}
|
||||
|
||||
function buildAiExpense(text) {
|
||||
const category = inferExpenseCategory(text)
|
||||
const name = inferExpenseName(text, category)
|
||||
const dateInfo = extractDateLabel(text)
|
||||
const attachments = inferAttachments(text, uploadedAiFiles.value)
|
||||
const risk = inferRisk(text, attachments.tone)
|
||||
|
||||
return {
|
||||
id: buildNextExpenseId(),
|
||||
time: dateInfo.time,
|
||||
dayLabel: dateInfo.dayLabel,
|
||||
name,
|
||||
category,
|
||||
desc: text.slice(0, 24),
|
||||
detail: text,
|
||||
amount: extractAmount(text),
|
||||
status: risk.status,
|
||||
tone: risk.tone,
|
||||
attachmentStatus: attachments.status,
|
||||
attachmentHint: attachments.hint,
|
||||
attachmentTone: attachments.tone,
|
||||
attachments: attachments.files,
|
||||
riskLabel: risk.riskLabel,
|
||||
riskText: risk.riskText,
|
||||
riskTone: risk.riskTone,
|
||||
}
|
||||
}
|
||||
|
||||
const aiMessages = ref([
|
||||
{
|
||||
id: 'ai-msg-1',
|
||||
role: 'assistant',
|
||||
text: '请直接描述费用场景、日期、金额和是否已上传票据，我会整理成费用明细。',
|
||||
},
|
||||
])
|
||||
|
||||
function sendAiEntry() {
|
||||
const text = aiDraft.value.trim() || `已上传 ${uploadedAiFiles.value.length} 份单据，请根据附件识别费用。`
|
||||
if (!text && !uploadedAiFiles.value.length) return
|
||||
|
||||
aiMessages.value.push({
|
||||
id: `ai-msg-user-${Date.now()}`,
|
||||
role: 'user',
|
||||
text: uploadedAiFiles.value.length ? `${text}\n附件：${uploadedAiFiles.value.map((file) => file.name).join('、')}` : text,
|
||||
})
|
||||
|
||||
pendingAiExpense.value = buildAiExpense(text)
|
||||
|
||||
aiMessages.value.push({
|
||||
id: `ai-msg-assistant-${Date.now()}`,
|
||||
role: 'assistant',
|
||||
text: `已识别为 ${pendingAiExpense.value.name}，金额 ${pendingAiExpense.value.amount}，可直接加入费用明细。`,
|
||||
})
|
||||
|
||||
aiDraft.value = ''
|
||||
}
|
||||
|
||||
function regenerateAiEntry() {
|
||||
if (!pendingAiExpense.value) return
|
||||
const sourceText = pendingAiExpense.value.detail
|
||||
pendingAiExpense.value = buildAiExpense(sourceText.replace('待补上传票据原件', '已上传发票'))
|
||||
aiMessages.value.push({
|
||||
id: `ai-msg-regenerate-${Date.now()}`,
|
||||
role: 'assistant',
|
||||
text: '已重新整理识别结果，你可以继续确认后加入费用明细。',
|
||||
})
|
||||
}
|
||||
|
||||
function applyAiExpense() {
|
||||
if (!pendingAiExpense.value) return
|
||||
expenseItems.value.push({ ...pendingAiExpense.value })
|
||||
expandedExpenseId.value = pendingAiExpense.value.id
|
||||
aiMessages.value.push({
|
||||
id: `ai-msg-apply-${Date.now()}`,
|
||||
role: 'assistant',
|
||||
text: '该费用条目已加入下方费用明细表。',
|
||||
})
|
||||
pendingAiExpense.value = null
|
||||
aiDraft.value = ''
|
||||
uploadedAiFiles.value = []
|
||||
if (aiFileInput.value) {
|
||||
aiFileInput.value.value = ''
|
||||
}
|
||||
aiEntryOpen.value = false
|
||||
}
|
||||
|
||||
function triggerAiUpload() {
|
||||
aiFileInput.value?.click()
|
||||
}
|
||||
|
||||
function handleAiFilesChange(event) {
|
||||
const files = Array.from(event.target.files ?? [])
|
||||
uploadedAiFiles.value = files
|
||||
}
|
||||
|
||||
return {
|
||||
emit,
|
||||
expandedExpenseId,
|
||||
aiEntryOpen,
|
||||
aiDraft,
|
||||
aiFileInput,
|
||||
aiEntrySeed,
|
||||
pendingAiExpense,
|
||||
uploadedAiFiles,
|
||||
expenseItems,
|
||||
request,
|
||||
profile,
|
||||
summaryItems,
|
||||
heroSummaryItems,
|
||||
currentProgressRingMotion,
|
||||
progressSteps,
|
||||
expenseTotal,
|
||||
uploadedExpenseCount,
|
||||
canSendAiEntry,
|
||||
detailNote,
|
||||
toggleExpenseAttachments,
|
||||
showExpenseRisk,
|
||||
openAiEntry,
|
||||
closeAiEntry,
|
||||
aiMessages,
|
||||
sendAiEntry,
|
||||
regenerateAiEntry,
|
||||
applyAiExpense,
|
||||
triggerAiUpload,
|
||||
handleAiFilesChange
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user