624 lines
15 KiB
Vue
624 lines
15 KiB
Vue
<template>
|
||
<div class="kingdee-page">
|
||
<section class="kingdee-header">
|
||
<div>
|
||
<h2>ERP监听</h2>
|
||
<p>监听金蝶销售订单排产状态，首次完成排产时自动通知对应会话。</p>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="primary-btn" @click="saveConfig" :disabled="busy">保存配置</button>
|
||
<button class="ghost-btn" @click="testConnection" :disabled="busy">测试连接</button>
|
||
<button class="ghost-btn" @click="runOnce" :disabled="busy">手动扫描</button>
|
||
<button class="ghost-btn" @click="loadAll" :disabled="busy">刷新</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="status-grid">
|
||
<div class="metric">
|
||
<span>监听状态</span>
|
||
<strong :class="status.running ? 'ok' : 'muted'">{{ status.running ? '运行中' : '未运行' }}</strong>
|
||
</div>
|
||
<div class="metric">
|
||
<span>累计扫描</span>
|
||
<strong>{{ status.totalPolled || 0 }}</strong>
|
||
</div>
|
||
<div class="metric">
|
||
<span>已通知</span>
|
||
<strong class="ok">{{ status.totalNotified || 0 }}</strong>
|
||
</div>
|
||
<div class="metric">
|
||
<span>未映射</span>
|
||
<strong class="warn">{{ status.totalUnmapped || 0 }}</strong>
|
||
</div>
|
||
<div class="metric">
|
||
<span>上次扫描</span>
|
||
<strong>{{ formatTime(status.lastPollAt) }}</strong>
|
||
</div>
|
||
</section>
|
||
|
||
<div v-if="message" class="inline-message" :class="{ error: messageType === 'error' }">{{ message }}</div>
|
||
|
||
<section class="kingdee-layout">
|
||
<div class="config-column">
|
||
<section class="kingdee-panel">
|
||
<div class="panel-heading">
|
||
<h3>金蝶连接</h3>
|
||
<span>{{ config.enabled ? '已开启' : '已关闭' }}</span>
|
||
</div>
|
||
<div class="form-grid">
|
||
<label class="switch-row">
|
||
<span>开启监听</span>
|
||
<input type="checkbox" v-model="config.enabled">
|
||
</label>
|
||
<label>
|
||
<span>服务地址</span>
|
||
<input v-model.trim="config.baseUrl" placeholder="https://example.com/k3cloud">
|
||
</label>
|
||
<label>
|
||
<span>账套ID</span>
|
||
<input v-model.trim="config.acctId">
|
||
</label>
|
||
<label>
|
||
<span>用户名</span>
|
||
<input v-model.trim="config.username">
|
||
</label>
|
||
<label>
|
||
<span>密码</span>
|
||
<input v-model="config.password" type="password" autocomplete="new-password">
|
||
</label>
|
||
<label>
|
||
<span>语言/区域</span>
|
||
<input v-model.number="config.lcid" type="number" min="1">
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kingdee-panel">
|
||
<div class="panel-heading">
|
||
<h3>监听规则</h3>
|
||
<span>{{ config.pollIntervalSeconds || 60 }} 秒</span>
|
||
</div>
|
||
<div class="form-grid">
|
||
<label>
|
||
<span>轮询间隔</span>
|
||
<input v-model.number="config.pollIntervalSeconds" type="number" min="10">
|
||
</label>
|
||
<label>
|
||
<span>销售订单表单编码</span>
|
||
<input v-model.trim="config.formId">
|
||
</label>
|
||
<label>
|
||
<span>订单号字段</span>
|
||
<input v-model.trim="config.billNoFieldKey">
|
||
</label>
|
||
<label>
|
||
<span>订单ID字段</span>
|
||
<input v-model.trim="config.orderIdFieldKey">
|
||
</label>
|
||
<label>
|
||
<span>客户编码字段</span>
|
||
<input v-model.trim="config.customerFieldKey">
|
||
</label>
|
||
<label>
|
||
<span>排产状态字段</span>
|
||
<input v-model.trim="config.statusFieldKey">
|
||
</label>
|
||
<label>
|
||
<span>完成状态值</span>
|
||
<input v-model.trim="config.completedValue">
|
||
</label>
|
||
<label>
|
||
<span>修改时间字段</span>
|
||
<input v-model.trim="config.modifyTimeFieldKey">
|
||
</label>
|
||
</div>
|
||
<label class="full-field">
|
||
<span>通知模板</span>
|
||
<textarea v-model="config.notifyTemplate" rows="3"></textarea>
|
||
</label>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="config-column">
|
||
<section class="kingdee-panel">
|
||
<div class="panel-heading">
|
||
<h3>通知映射</h3>
|
||
<button class="small-btn" type="button" @click="addMapping">新增映射</button>
|
||
</div>
|
||
<div class="mapping-list">
|
||
<div class="mapping-header">
|
||
<span>ERP客户编码</span>
|
||
<span>机器人账号</span>
|
||
<span>通知会话ID</span>
|
||
<span>备注</span>
|
||
<span></span>
|
||
</div>
|
||
<div v-for="(row, index) in mappingRows" :key="row.localId" class="mapping-row">
|
||
<input v-model.trim="row.customerNumber">
|
||
<input v-model.trim="row.robotId">
|
||
<input v-model.trim="row.conversationId">
|
||
<input v-model.trim="row.remark">
|
||
<button class="icon-btn" type="button" @click="removeMapping(index)">删</button>
|
||
</div>
|
||
<p v-if="mappingRows.length === 0" class="empty-text">暂无通知映射。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kingdee-panel">
|
||
<div class="panel-heading">
|
||
<h3>运行记录</h3>
|
||
<span>{{ status.status || 'stopped' }}</span>
|
||
</div>
|
||
<div class="record-block">
|
||
<h4>最近通知</h4>
|
||
<div v-if="recentNotices.length === 0" class="empty-text">暂无通知记录。</div>
|
||
<div v-for="item in recentNotices" :key="`${item.orderKey}-${item.notifiedAt}`" class="record-item">
|
||
<strong>{{ item.billNo || item.orderKey }}</strong>
|
||
<span>{{ item.customerNumber }} / {{ formatTime(item.notifiedAt) }}</span>
|
||
<p>{{ item.message }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="record-block">
|
||
<h4>最近错误</h4>
|
||
<div v-if="recentErrors.length === 0" class="empty-text">暂无错误。</div>
|
||
<div v-for="item in recentErrors" :key="`${item.message}-${item.createdAt}`" class="record-item error">
|
||
<strong>{{ item.billNo || item.customerNumber || '系统' }}</strong>
|
||
<span>{{ formatTime(item.createdAt) }}</span>
|
||
<p>{{ item.message }}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, onMounted, ref } from 'vue'
|
||
import {
|
||
GetKingdeeMonitorConfig,
|
||
GetKingdeeMonitorStatus,
|
||
RunKingdeeMonitorOnce,
|
||
SaveKingdeeMonitorConfig,
|
||
TestKingdeeMonitorConnection
|
||
} from '../../wailsjs/go/main/App.js'
|
||
|
||
const defaultTemplate = '您好，您的订单 {{billNo}} 已完成排产，后续我们会继续跟进生产进度。'
|
||
|
||
const busy = ref(false)
|
||
const message = ref('')
|
||
const messageType = ref('success')
|
||
const status = ref({})
|
||
const mappingRows = ref([])
|
||
const config = ref(defaultConfig())
|
||
|
||
const recentNotices = computed(() => status.value.recentNotices || [])
|
||
const recentErrors = computed(() => status.value.recentErrors || [])
|
||
|
||
function defaultConfig() {
|
||
return {
|
||
enabled: false,
|
||
baseUrl: '',
|
||
acctId: '',
|
||
username: '',
|
||
password: '',
|
||
lcid: 2052,
|
||
pollIntervalSeconds: 60,
|
||
formId: 'SAL_SaleOrder',
|
||
billNoFieldKey: 'FBillNo',
|
||
orderIdFieldKey: 'FID',
|
||
customerFieldKey: 'FCustId.FNumber',
|
||
statusFieldKey: '',
|
||
completedValue: '排产已完成',
|
||
modifyTimeFieldKey: 'FModifyDate',
|
||
notifyTemplate: defaultTemplate,
|
||
customerMappings: {}
|
||
}
|
||
}
|
||
|
||
function setMessage(text, type = 'success') {
|
||
message.value = text || ''
|
||
messageType.value = type
|
||
}
|
||
|
||
async function loadAll() {
|
||
busy.value = true
|
||
try {
|
||
await Promise.all([loadConfig(), loadStatus()])
|
||
} finally {
|
||
busy.value = false
|
||
}
|
||
}
|
||
|
||
async function loadConfig() {
|
||
const result = await GetKingdeeMonitorConfig()
|
||
if (result?.success === false) {
|
||
setMessage(result.message || '加载金蝶配置失败', 'error')
|
||
return
|
||
}
|
||
const data = result?.data || result || {}
|
||
config.value = { ...defaultConfig(), ...data }
|
||
mappingRows.value = mappingsToRows(config.value.customerMappings || {})
|
||
}
|
||
|
||
async function loadStatus() {
|
||
const result = await GetKingdeeMonitorStatus()
|
||
if (result?.success === false) {
|
||
setMessage(result.message || '加载监听状态失败', 'error')
|
||
return
|
||
}
|
||
status.value = result?.data || {}
|
||
}
|
||
|
||
async function saveConfig() {
|
||
busy.value = true
|
||
try {
|
||
const payload = normalizedConfig()
|
||
const result = await SaveKingdeeMonitorConfig(JSON.stringify(payload))
|
||
const [ok, msg] = normalizeTupleResult(result)
|
||
if (!ok) {
|
||
setMessage(msg || '保存失败', 'error')
|
||
return
|
||
}
|
||
config.value = payload
|
||
setMessage('金蝶监听配置已保存')
|
||
await loadStatus()
|
||
} catch (err) {
|
||
setMessage(`保存失败: ${err.message || err}`, 'error')
|
||
} finally {
|
||
busy.value = false
|
||
}
|
||
}
|
||
|
||
async function testConnection() {
|
||
busy.value = true
|
||
try {
|
||
const result = await TestKingdeeMonitorConnection(JSON.stringify(normalizedConfig()))
|
||
if (result?.success === false) {
|
||
setMessage(result.message || '连接失败', 'error')
|
||
return
|
||
}
|
||
setMessage(result?.message || '金蝶连接正常')
|
||
} catch (err) {
|
||
setMessage(`连接失败: ${err.message || err}`, 'error')
|
||
} finally {
|
||
busy.value = false
|
||
}
|
||
}
|
||
|
||
async function runOnce() {
|
||
busy.value = true
|
||
try {
|
||
const result = await RunKingdeeMonitorOnce()
|
||
if (result?.success === false) {
|
||
setMessage(result.message || '扫描失败', 'error')
|
||
} else {
|
||
const data = result?.data || {}
|
||
setMessage(`扫描完成：查询 ${data.polled || 0} 条，通知 ${data.notified || 0} 条`)
|
||
}
|
||
await loadStatus()
|
||
} catch (err) {
|
||
setMessage(`扫描失败: ${err.message || err}`, 'error')
|
||
} finally {
|
||
busy.value = false
|
||
}
|
||
}
|
||
|
||
function normalizedConfig() {
|
||
return {
|
||
...config.value,
|
||
pollIntervalSeconds: Number(config.value.pollIntervalSeconds || 60),
|
||
lcid: Number(config.value.lcid || 2052),
|
||
customerMappings: rowsToMappings(mappingRows.value)
|
||
}
|
||
}
|
||
|
||
function mappingsToRows(mappings) {
|
||
return Object.entries(mappings || {}).map(([customerNumber, item], index) => ({
|
||
localId: `${customerNumber}-${index}-${Date.now()}`,
|
||
customerNumber,
|
||
robotId: item?.robotId || '',
|
||
conversationId: item?.conversationId || '',
|
||
remark: item?.remark || ''
|
||
}))
|
||
}
|
||
|
||
function rowsToMappings(rows) {
|
||
const mappings = {}
|
||
for (const row of rows) {
|
||
const customerNumber = String(row.customerNumber || '').trim()
|
||
if (!customerNumber) continue
|
||
mappings[customerNumber] = {
|
||
robotId: String(row.robotId || '').trim(),
|
||
conversationId: String(row.conversationId || '').trim(),
|
||
remark: String(row.remark || '').trim()
|
||
}
|
||
}
|
||
return mappings
|
||
}
|
||
|
||
function addMapping() {
|
||
mappingRows.value.push({
|
||
localId: `new-${Date.now()}-${mappingRows.value.length}`,
|
||
customerNumber: '',
|
||
robotId: '',
|
||
conversationId: '',
|
||
remark: ''
|
||
})
|
||
}
|
||
|
||
function removeMapping(index) {
|
||
mappingRows.value.splice(index, 1)
|
||
}
|
||
|
||
function normalizeTupleResult(result) {
|
||
if (Array.isArray(result)) return [Boolean(result[0]), result[1] || '']
|
||
if (result === true) return [true, 'success']
|
||
if (result && typeof result === 'object') return [result.success !== false, result.message || '']
|
||
return [Boolean(result), '']
|
||
}
|
||
|
||
function formatTime(value) {
|
||
const numeric = Number(value || 0)
|
||
if (!numeric) return '-'
|
||
return new Date(numeric * 1000).toLocaleString()
|
||
}
|
||
|
||
onMounted(loadAll)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.kingdee-page {
|
||
color: #d6eef2;
|
||
min-width: 920px;
|
||
}
|
||
|
||
.kingdee-header,
|
||
.kingdee-panel,
|
||
.metric {
|
||
background: rgba(7, 24, 30, 0.74);
|
||
border: 1px solid rgba(72, 240, 220, 0.22);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.kingdee-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding: 18px 20px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.kingdee-header h2,
|
||
.panel-heading h3,
|
||
.record-block h4 {
|
||
margin: 0;
|
||
}
|
||
|
||
.kingdee-header p {
|
||
margin: 6px 0 0;
|
||
color: #91b5bd;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.primary-btn,
|
||
.ghost-btn,
|
||
.small-btn,
|
||
.icon-btn {
|
||
border: 1px solid rgba(72, 240, 220, 0.45);
|
||
border-radius: 6px;
|
||
color: #e9ffff;
|
||
background: rgba(20, 70, 78, 0.78);
|
||
cursor: pointer;
|
||
height: 34px;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.primary-btn {
|
||
background: linear-gradient(135deg, #34e7d5, #58a6ff);
|
||
color: #062027;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.ghost-btn,
|
||
.small-btn,
|
||
.icon-btn {
|
||
background: rgba(10, 28, 34, 0.86);
|
||
}
|
||
|
||
button:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.status-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(120px, 1fr));
|
||
gap: 10px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.metric {
|
||
padding: 12px 14px;
|
||
}
|
||
|
||
.metric span {
|
||
display: block;
|
||
color: #8fb1b8;
|
||
font-size: 13px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.metric strong {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.ok {
|
||
color: #3df2d0;
|
||
}
|
||
|
||
.warn {
|
||
color: #ffd166;
|
||
}
|
||
|
||
.muted {
|
||
color: #9fb3b9;
|
||
}
|
||
|
||
.inline-message {
|
||
margin-bottom: 14px;
|
||
padding: 10px 12px;
|
||
border-radius: 6px;
|
||
border: 1px solid rgba(72, 240, 220, 0.28);
|
||
background: rgba(18, 66, 64, 0.7);
|
||
}
|
||
|
||
.inline-message.error {
|
||
border-color: rgba(255, 113, 113, 0.42);
|
||
background: rgba(78, 26, 34, 0.78);
|
||
}
|
||
|
||
.kingdee-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
|
||
gap: 14px;
|
||
}
|
||
|
||
.config-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.kingdee-panel {
|
||
padding: 16px;
|
||
}
|
||
|
||
.panel-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.panel-heading span {
|
||
color: #72f0de;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
|
||
label,
|
||
.full-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
color: #a9c8ce;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.switch-row {
|
||
justify-content: center;
|
||
}
|
||
|
||
input,
|
||
textarea {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
border: 1px solid rgba(72, 240, 220, 0.22);
|
||
border-radius: 6px;
|
||
background: rgba(2, 15, 20, 0.86);
|
||
color: #eaffff;
|
||
min-height: 34px;
|
||
padding: 8px 10px;
|
||
outline: none;
|
||
}
|
||
|
||
textarea {
|
||
resize: vertical;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.full-field {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.mapping-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.mapping-header,
|
||
.mapping-row {
|
||
display: grid;
|
||
grid-template-columns: 0.8fr 1fr 1.25fr 0.8fr 42px;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.mapping-header {
|
||
color: #8fb1b8;
|
||
font-size: 12px;
|
||
padding: 0 2px;
|
||
}
|
||
|
||
.icon-btn {
|
||
width: 38px;
|
||
padding: 0;
|
||
}
|
||
|
||
.record-block + .record-block {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.record-item {
|
||
border-top: 1px solid rgba(72, 240, 220, 0.12);
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.record-item strong,
|
||
.record-item span {
|
||
display: block;
|
||
}
|
||
|
||
.record-item span,
|
||
.empty-text {
|
||
color: #8fb1b8;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.record-item p {
|
||
margin: 6px 0 0;
|
||
color: #d6eef2;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.record-item.error p {
|
||
color: #ffb4b4;
|
||
}
|
||
|
||
@media (max-width: 1180px) {
|
||
.kingdee-layout,
|
||
.status-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.kingdee-page {
|
||
min-width: 0;
|
||
}
|
||
}
|
||
</style>
|