Browse Source
- Move 审计日志 after 系统管理; add 定时任务 submenu and /scheduled-tasks route - Add ScheduledTasksView with cron editing, manual run and run history drawer - Add StyleConfigView and SysConfigView under system management - Add line feedback dialog and branding composable - Remove explanatory subtitles and mock-mode notices from pages - Allow workspace proxy hosts in Vite dev server (allowedHosts, HMR port) Co-Authored-By: Claude Code <noreply@anthropic.com>master
19 changed files with 1975 additions and 103 deletions
@ -0,0 +1,520 @@ |
|||||
|
<script setup> |
||||
|
import { computed, ref, watch } from 'vue' |
||||
|
import { voucherApi } from '../api' |
||||
|
import { formatAmount } from '../utils/format' |
||||
|
import { ElMessage } from 'element-plus' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
modelValue: { type: Boolean, default: false }, |
||||
|
voucherId: { type: [String, Number], default: null }, |
||||
|
line: { type: Object, default: null }, |
||||
|
accounts: { type: Array, default: () => [] }, |
||||
|
initialTab: { type: String, default: 'feedback' } |
||||
|
}) |
||||
|
const emit = defineEmits(['update:modelValue', 'applied']) |
||||
|
|
||||
|
const AUX_FACT_FIELDS = { |
||||
|
DEPT: 'departmentId', |
||||
|
CUSTOMER: 'customerId', |
||||
|
PROJECT: 'projectId', |
||||
|
COST_CENTER: 'costCenterId', |
||||
|
EMP: 'applicantId' |
||||
|
} |
||||
|
|
||||
|
const tab = ref('feedback') |
||||
|
const loading = ref(false) |
||||
|
const testing = ref(false) |
||||
|
const applying = ref(false) |
||||
|
const context = ref(null) |
||||
|
const sourceLineNo = ref(null) |
||||
|
const accountCode = ref('') |
||||
|
const selectedFields = ref([]) |
||||
|
const aux = ref({}) |
||||
|
const reason = ref('') |
||||
|
const testResult = ref(null) |
||||
|
|
||||
|
const sourceLineLocked = computed(() => props.line?.sourceLineNo != null) |
||||
|
const sourceLines = computed(() => context.value?.sourceLines || []) |
||||
|
const sameDay = computed(() => context.value?.sameDay || { total: 0, truncated: false, lines: [] }) |
||||
|
const facts = computed(() => context.value?.facts || {}) |
||||
|
const allowlist = computed(() => context.value?.allowlist || []) |
||||
|
const contextFields = computed(() => |
||||
|
allowlist.value.filter((item) => item.field !== 'expenseCategory') |
||||
|
) |
||||
|
const categoryItem = computed(() => |
||||
|
allowlist.value.find((item) => item.field === 'expenseCategory') |
||||
|
) |
||||
|
const selectedAccount = computed(() => |
||||
|
props.accounts.find((a) => a.code === accountCode.value) |
||||
|
) |
||||
|
const requiredAuxKeys = computed(() => { |
||||
|
const json = selectedAccount.value?.auxRequiredJson |
||||
|
if (!json) { |
||||
|
return [] |
||||
|
} |
||||
|
try { |
||||
|
const parsed = JSON.parse(json) |
||||
|
return Array.isArray(parsed) ? parsed : [] |
||||
|
} catch (e) { |
||||
|
return [] |
||||
|
} |
||||
|
}) |
||||
|
const leafAccounts = computed(() => |
||||
|
props.accounts.filter((a) => a.isLeaf !== false && (!a.status || a.status === 'ACTIVE')) |
||||
|
) |
||||
|
const currentRule = computed(() => context.value?.currentRule) |
||||
|
const warnings = computed(() => context.value?.warnings || []) |
||||
|
const canApply = computed(() => Boolean(testResult.value?.passed)) |
||||
|
const failedChecks = computed(() => |
||||
|
(testResult.value?.checks || []).filter((item) => !item.passed) |
||||
|
) |
||||
|
|
||||
|
function visible(value) { |
||||
|
emit('update:modelValue', value) |
||||
|
} |
||||
|
|
||||
|
function displayValue(item) { |
||||
|
if (item.value === null || item.value === undefined || item.value === '') { |
||||
|
return '无值' |
||||
|
} |
||||
|
if (item.type === 'boolean') { |
||||
|
return item.value ? '是' : '否' |
||||
|
} |
||||
|
return String(item.value) |
||||
|
} |
||||
|
|
||||
|
function conditionLabel(item) { |
||||
|
return `${item.label}（当前值：${displayValue(item)}）` |
||||
|
} |
||||
|
|
||||
|
function sourceLineLabel(line) { |
||||
|
const parts = [`#${line.lineNo}`, line.expenseCategory || '未分类'] |
||||
|
if (line.description) { |
||||
|
parts.push(line.description) |
||||
|
} |
||||
|
parts.push(formatAmount(line.amount, '')) |
||||
|
return parts.join(' · ') |
||||
|
} |
||||
|
|
||||
|
function clearResult() { |
||||
|
testResult.value = null |
||||
|
} |
||||
|
|
||||
|
async function loadContext(explicitSourceLineNo) { |
||||
|
if (!props.voucherId || !props.line?.lineNo) { |
||||
|
return |
||||
|
} |
||||
|
loading.value = true |
||||
|
try { |
||||
|
const params = |
||||
|
explicitSourceLineNo === null || explicitSourceLineNo === undefined |
||||
|
? {} |
||||
|
: { sourceLineNo: explicitSourceLineNo } |
||||
|
const data = await voucherApi.feedbackContext(props.voucherId, props.line.lineNo, params) |
||||
|
context.value = data |
||||
|
sourceLineNo.value = data.selectedSourceLineNo ?? null |
||||
|
accountCode.value = accountCode.value || props.line.accountCode || '' |
||||
|
selectedFields.value = (data.defaultFields || []).filter( |
||||
|
(field) => field !== 'expenseCategory' |
||||
|
) |
||||
|
syncAux() |
||||
|
clearResult() |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function syncAux() { |
||||
|
const next = {} |
||||
|
for (const key of requiredAuxKeys.value) { |
||||
|
next[key] = aux.value[key] ?? '' |
||||
|
} |
||||
|
aux.value = next |
||||
|
} |
||||
|
|
||||
|
function onSourceLineChange(value) { |
||||
|
accountCode.value = props.line?.accountCode || '' |
||||
|
loadContext(value) |
||||
|
} |
||||
|
|
||||
|
function onAccountChange() { |
||||
|
syncAux() |
||||
|
} |
||||
|
|
||||
|
function auxPlaceholder(key) { |
||||
|
const factField = AUX_FACT_FIELDS[key] |
||||
|
const value = factField ? facts.value[factField] : null |
||||
|
return value ? `留空自动取 ${value}` : '必填' |
||||
|
} |
||||
|
|
||||
|
function cleanAux() { |
||||
|
const result = {} |
||||
|
for (const [key, value] of Object.entries(aux.value)) { |
||||
|
if (String(value ?? '').trim()) { |
||||
|
result[key] = String(value).trim() |
||||
|
} |
||||
|
} |
||||
|
return result |
||||
|
} |
||||
|
|
||||
|
function payload() { |
||||
|
return { |
||||
|
sourceLineNo: sourceLineNo.value, |
||||
|
fields: ['expenseCategory', ...selectedFields.value], |
||||
|
accountCode: accountCode.value, |
||||
|
aux: cleanAux(), |
||||
|
reason: reason.value.trim() || null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function test() { |
||||
|
if (!sourceLineNo.value) { |
||||
|
ElMessage.warning('请先选择该分录对应的源费用行') |
||||
|
return |
||||
|
} |
||||
|
if (!accountCode.value) { |
||||
|
ElMessage.warning('请选择正确的科目') |
||||
|
return |
||||
|
} |
||||
|
testing.value = true |
||||
|
try { |
||||
|
testResult.value = await voucherApi.feedbackTest( |
||||
|
props.voucherId, |
||||
|
props.line.lineNo, |
||||
|
payload() |
||||
|
) |
||||
|
if (testResult.value.passed) { |
||||
|
ElMessage.success('测试通过，可以应用规则') |
||||
|
} else { |
||||
|
ElMessage.warning('测试未通过，请根据失败项调整条件后重试') |
||||
|
} |
||||
|
} finally { |
||||
|
testing.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function apply() { |
||||
|
if (!testResult.value?.fingerprint) { |
||||
|
ElMessage.warning('请先测试，测试通过后再应用规则') |
||||
|
return |
||||
|
} |
||||
|
applying.value = true |
||||
|
try { |
||||
|
const result = await voucherApi.feedbackApply(props.voucherId, props.line.lineNo, { |
||||
|
...payload(), |
||||
|
fingerprint: testResult.value.fingerprint |
||||
|
}) |
||||
|
if (!result.applied) { |
||||
|
testResult.value = result |
||||
|
ElMessage.warning(result.message || '规则应用前校验未通过，请查看检查项') |
||||
|
return |
||||
|
} |
||||
|
ElMessage.success( |
||||
|
result.created |
||||
|
? `规则 ${result.ruleCode} v${result.version} 已生效，请返回凭证点击「重新生成」` |
||||
|
: `规则 ${result.ruleCode} 已存在，无需重复创建；请返回凭证点击「重新生成」` |
||||
|
) |
||||
|
emit('applied', result) |
||||
|
visible(false) |
||||
|
} finally { |
||||
|
applying.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function init() { |
||||
|
tab.value = props.initialTab || 'feedback' |
||||
|
context.value = null |
||||
|
sourceLineNo.value = null |
||||
|
accountCode.value = '' |
||||
|
selectedFields.value = [] |
||||
|
aux.value = {} |
||||
|
reason.value = '' |
||||
|
testResult.value = null |
||||
|
loadContext(props.line?.sourceLineNo ?? null) |
||||
|
} |
||||
|
|
||||
|
watch( |
||||
|
() => props.modelValue, |
||||
|
(value) => { |
||||
|
if (value) { |
||||
|
init() |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
watch([sourceLineNo, accountCode, selectedFields, aux], clearResult, { deep: true }) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<el-dialog |
||||
|
:model-value="modelValue" |
||||
|
title="行反馈学习" |
||||
|
width="900px" |
||||
|
top="5vh" |
||||
|
destroy-on-close |
||||
|
@update:model-value="visible" |
||||
|
> |
||||
|
<el-tabs v-model="tab"> |
||||
|
<el-tab-pane label="反馈学习" name="feedback"> |
||||
|
<div v-loading="loading"> |
||||
|
<el-alert |
||||
|
v-if="props.line" |
||||
|
:title="`凭证第 ${props.line.lineNo} 行 · ${props.line.accountCode || '-'} ${ |
||||
|
props.line.accountName || '' |
||||
|
} · ${formatAmount(props.line.amount, '')} · ${props.line.summary || '无摘要'}`" |
||||
|
type="info" |
||||
|
:closable="false" |
||||
|
show-icon |
||||
|
style="margin-bottom: 14px" |
||||
|
/> |
||||
|
|
||||
|
<el-form label-width="120px" label-position="right" size="small"> |
||||
|
<el-form-item label="对应费用行"> |
||||
|
<div style="display: flex; flex-direction: column; gap: 6px; width: 100%"> |
||||
|
<el-select |
||||
|
v-model="sourceLineNo" |
||||
|
filterable |
||||
|
placeholder="请选择该分录对应的源费用行" |
||||
|
:disabled="sourceLineLocked" |
||||
|
style="width: 100%" |
||||
|
@change="onSourceLineChange" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="line in sourceLines" |
||||
|
:key="line.lineNo" |
||||
|
:label="sourceLineLabel(line)" |
||||
|
:value="line.lineNo" |
||||
|
/> |
||||
|
</el-select> |
||||
|
<span v-if="sourceLineLocked" class="muted"> |
||||
|
该分录已关联源费用行，不可更改 |
||||
|
</span> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="正确科目"> |
||||
|
<el-select |
||||
|
v-model="accountCode" |
||||
|
filterable |
||||
|
placeholder="选择末级科目" |
||||
|
style="width: 100%" |
||||
|
@change="onAccountChange" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="a in leafAccounts" |
||||
|
:key="a.code" |
||||
|
:label="`${a.code} ${a.name || ''}`" |
||||
|
:value="a.code" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
v-for="key in requiredAuxKeys" |
||||
|
:key="key" |
||||
|
:label="`辅助核算 ${key}`" |
||||
|
> |
||||
|
<el-input v-model="aux[key]" :placeholder="auxPlaceholder(key)" style="width: 100%" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="上下文条件"> |
||||
|
<div v-if="!categoryItem" class="muted"> |
||||
|
未找到源费用行，请先选择上方的对应费用行。 |
||||
|
</div> |
||||
|
<div v-else class="condition-list"> |
||||
|
<el-checkbox :model-value="true" disabled> |
||||
|
{{ conditionLabel(categoryItem) }} |
||||
|
</el-checkbox> |
||||
|
<el-checkbox-group v-model="selectedFields" class="condition-group"> |
||||
|
<el-checkbox |
||||
|
v-for="item in contextFields" |
||||
|
:key="item.field" |
||||
|
:value="item.field" |
||||
|
:disabled="item.value === null || item.value === undefined" |
||||
|
> |
||||
|
{{ conditionLabel(item) }} |
||||
|
</el-checkbox> |
||||
|
</el-checkbox-group> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="备注"> |
||||
|
<el-input |
||||
|
v-model="reason" |
||||
|
type="textarea" |
||||
|
:rows="2" |
||||
|
placeholder="可选，记录本次反馈原因" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-alert |
||||
|
v-for="warning in warnings" |
||||
|
:key="warning" |
||||
|
:title="warning" |
||||
|
type="warning" |
||||
|
:closable="false" |
||||
|
show-icon |
||||
|
style="margin-bottom: 8px" |
||||
|
/> |
||||
|
|
||||
|
<div class="section-title"> |
||||
|
同日相关费用（锚点日期：{{ context?.anchorDate || '-' }}，共 |
||||
|
{{ sameDay.total }} 条） |
||||
|
</div> |
||||
|
<el-table :data="sameDay.lines" size="small" empty-text="当天没有其他相关费用"> |
||||
|
<el-table-column prop="docNo" label="单号" min-width="140" /> |
||||
|
<el-table-column prop="lineNo" label="#" width="50" /> |
||||
|
<el-table-column prop="expenseCategory" label="类别" width="100" /> |
||||
|
<el-table-column prop="description" label="摘要" min-width="150"> |
||||
|
<template #default="{ row }">{{ row.description || '-' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="expenseCity" label="城市" width="90"> |
||||
|
<template #default="{ row }">{{ row.expenseCity || '-' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="invoiceDate" label="开票日期" width="110"> |
||||
|
<template #default="{ row }">{{ row.invoiceDate || '-' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="跨市" width="70"> |
||||
|
<template #default="{ row }">{{ row.crossCity ? '是' : '否' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="金额" align="right" width="110"> |
||||
|
<template #default="{ row }">{{ formatAmount(row.amount, '') }}</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div v-if="sameDay.truncated" class="muted" style="margin-top: 6px"> |
||||
|
当日费用过多，仅展示前 20 条，上下文事实仍基于全部费用计算。 |
||||
|
</div> |
||||
|
|
||||
|
<template v-if="testResult"> |
||||
|
<el-alert |
||||
|
:title=" |
||||
|
testResult.passed |
||||
|
? `测试通过 · 规则 ${testResult.ruleCode} · 优先级 ${testResult.suggestedPriority}` |
||||
|
: '测试未通过，请调整条件后重试' |
||||
|
" |
||||
|
:type="testResult.passed ? 'success' : 'error'" |
||||
|
:closable="false" |
||||
|
show-icon |
||||
|
style="margin-top: 14px" |
||||
|
> |
||||
|
<div v-if="testResult.passed" class="muted"> |
||||
|
条件：{{ JSON.stringify(testResult.condition) }} |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<div v-for="check in failedChecks" :key="check.code"> |
||||
|
{{ check.code }}：{{ check.message }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-alert> |
||||
|
<el-table :data="testResult.checks || []" size="small" style="margin-top: 8px"> |
||||
|
<el-table-column prop="code" label="检查项" width="200" /> |
||||
|
<el-table-column label="结果" width="80"> |
||||
|
<template #default="{ row }"> |
||||
|
<el-tag :type="row.passed ? 'success' : 'danger'" size="small"> |
||||
|
{{ row.passed ? '通过' : '失败' }} |
||||
|
</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="message" label="说明" min-width="300" /> |
||||
|
</el-table> |
||||
|
<div v-if="testResult.conflicts?.length" class="muted" style="margin-top: 8px"> |
||||
|
应用后将退役： |
||||
|
{{ testResult.conflicts.map((c) => c.ruleCode).join('、') }} |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
|
||||
|
<el-tab-pane label="当前规则与上下文" name="context"> |
||||
|
<div v-loading="loading"> |
||||
|
<div class="section-title">当前命中规则</div> |
||||
|
<el-descriptions v-if="currentRule" :column="2" border size="small"> |
||||
|
<el-descriptions-item label="规则编码">{{ currentRule.ruleCode }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="规则名称">{{ currentRule.name }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="优先级">{{ currentRule.priority }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="命中条件"> |
||||
|
{{ (currentRule.matchedFields || []).join('、') || '-' }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="规则结果" :span="2"> |
||||
|
{{ JSON.stringify(currentRule.result) }} |
||||
|
</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
<el-empty v-else description="当前没有规则命中该费用行" :image-size="60" /> |
||||
|
|
||||
|
<div class="section-title" style="margin-top: 16px">上下文事实</div> |
||||
|
<el-descriptions :column="2" border size="small"> |
||||
|
<el-descriptions-item |
||||
|
v-for="item in allowlist" |
||||
|
:key="item.field" |
||||
|
:label="item.label" |
||||
|
> |
||||
|
{{ displayValue(item) }} |
||||
|
</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
<el-empty |
||||
|
v-if="!allowlist.length" |
||||
|
description="请先在「反馈学习」选择对应费用行" |
||||
|
:image-size="60" |
||||
|
/> |
||||
|
|
||||
|
<div class="section-title" style="margin-top: 16px"> |
||||
|
同日费用（共 {{ sameDay.total }} 条） |
||||
|
</div> |
||||
|
<el-table :data="sameDay.lines" size="small" empty-text="当天没有其他相关费用"> |
||||
|
<el-table-column prop="docNo" label="单号" min-width="140" /> |
||||
|
<el-table-column prop="lineNo" label="#" width="50" /> |
||||
|
<el-table-column prop="expenseCategory" label="类别" width="100" /> |
||||
|
<el-table-column prop="expenseCity" label="城市" width="90"> |
||||
|
<template #default="{ row }">{{ row.expenseCity || '-' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="invoiceDate" label="开票日期" width="110"> |
||||
|
<template #default="{ row }">{{ row.invoiceDate || '-' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="金额" align="right" width="110"> |
||||
|
<template #default="{ row }">{{ formatAmount(row.amount, '') }}</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
|
||||
|
<template #footer> |
||||
|
<el-button @click="visible(false)">取消</el-button> |
||||
|
<el-button v-if="tab === 'feedback'" :loading="testing" @click="test">测试</el-button> |
||||
|
<el-button |
||||
|
v-if="tab === 'feedback'" |
||||
|
type="primary" |
||||
|
:loading="applying" |
||||
|
:disabled="!canApply" |
||||
|
@click="apply" |
||||
|
> |
||||
|
应用规则 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.condition-list { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 2px; |
||||
|
} |
||||
|
|
||||
|
.condition-group { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
margin: 14px 0 8px; |
||||
|
font-weight: 600; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.muted { |
||||
|
color: #8a94a6; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,41 @@ |
|||||
|
import { reactive } from 'vue' |
||||
|
import { systemConfigApi } from '../api' |
||||
|
|
||||
|
const state = reactive({ |
||||
|
platformName: 'AutoVoucher', |
||||
|
logo: null, |
||||
|
loaded: false |
||||
|
}) |
||||
|
|
||||
|
let pending = null |
||||
|
|
||||
|
export function useBranding() { |
||||
|
async function load(force = false) { |
||||
|
if (state.loaded && !force) { |
||||
|
return state |
||||
|
} |
||||
|
if (pending) { |
||||
|
return pending |
||||
|
} |
||||
|
pending = systemConfigApi |
||||
|
.get() |
||||
|
.then((data) => { |
||||
|
apply(data || {}) |
||||
|
state.loaded = true |
||||
|
return state |
||||
|
}) |
||||
|
.catch(() => state) |
||||
|
.finally(() => { |
||||
|
pending = null |
||||
|
}) |
||||
|
return pending |
||||
|
} |
||||
|
|
||||
|
function apply(data) { |
||||
|
state.platformName = data.platformName || 'AutoVoucher' |
||||
|
state.logo = data.logo || null |
||||
|
state.loaded = true |
||||
|
} |
||||
|
|
||||
|
return { branding: state, load, apply } |
||||
|
} |
||||
@ -0,0 +1,439 @@ |
|||||
|
<script setup> |
||||
|
import { onMounted, onUnmounted, reactive, ref } from 'vue' |
||||
|
import { ElMessage, ElMessageBox } from 'element-plus' |
||||
|
import { scheduledJobApi } from '../api' |
||||
|
import JsonBlock from '../components/JsonBlock.vue' |
||||
|
import StatusTag from '../components/StatusTag.vue' |
||||
|
import { formatDateTime } from '../utils/format' |
||||
|
|
||||
|
const JOB_TYPE_LABELS = { |
||||
|
OA_FETCH: 'OA 单据拉取', |
||||
|
NCC_PUSH: 'NCC 凭证推送' |
||||
|
} |
||||
|
|
||||
|
const TRIGGER_LABELS = { |
||||
|
SCHEDULED: '定时', |
||||
|
MANUAL: '手动' |
||||
|
} |
||||
|
|
||||
|
const loading = ref(false) |
||||
|
const jobs = ref([]) |
||||
|
const updatingId = ref(null) |
||||
|
const saving = ref(false) |
||||
|
|
||||
|
const editVisible = ref(false) |
||||
|
const editingJob = ref(null) |
||||
|
const form = reactive({ |
||||
|
cronExpression: '', |
||||
|
description: '' |
||||
|
}) |
||||
|
|
||||
|
const historyVisible = ref(false) |
||||
|
const historyJob = ref(null) |
||||
|
const runs = ref([]) |
||||
|
const runsLoading = ref(false) |
||||
|
|
||||
|
let listTimer = null |
||||
|
let runTimer = null |
||||
|
let loadingPromise = null |
||||
|
|
||||
|
function jobTypeLabel(type) { |
||||
|
return JOB_TYPE_LABELS[type] || type || '-' |
||||
|
} |
||||
|
|
||||
|
function triggerLabel(trigger) { |
||||
|
return TRIGGER_LABELS[trigger] || trigger || '-' |
||||
|
} |
||||
|
|
||||
|
function formatDuration(ms) { |
||||
|
if (ms === null || ms === undefined) { |
||||
|
return '-' |
||||
|
} |
||||
|
if (ms < 1000) { |
||||
|
return `${ms} ms` |
||||
|
} |
||||
|
return `${(ms / 1000).toFixed(ms < 10000 ? 1 : 0)} s` |
||||
|
} |
||||
|
|
||||
|
function hasRunning() { |
||||
|
return jobs.value.some((job) => job.running || job.lastStatus === 'RUNNING') |
||||
|
} |
||||
|
|
||||
|
function syncRunTimer() { |
||||
|
if (hasRunning()) { |
||||
|
if (!runTimer) { |
||||
|
runTimer = setInterval(refreshWhileRunning, 2000) |
||||
|
} |
||||
|
} else if (runTimer) { |
||||
|
clearInterval(runTimer) |
||||
|
runTimer = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function refreshWhileRunning() { |
||||
|
await load() |
||||
|
if (historyVisible.value) { |
||||
|
await loadRuns() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function load() { |
||||
|
if (loadingPromise) { |
||||
|
return loadingPromise |
||||
|
} |
||||
|
loading.value = true |
||||
|
loadingPromise = scheduledJobApi |
||||
|
.list() |
||||
|
.then((data) => { |
||||
|
jobs.value = data |
||||
|
syncRunTimer() |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
loading.value = false |
||||
|
loadingPromise = null |
||||
|
}) |
||||
|
return loadingPromise |
||||
|
} |
||||
|
|
||||
|
async function confirmToggle(row) { |
||||
|
const next = !row.enabled |
||||
|
try { |
||||
|
await ElMessageBox.confirm( |
||||
|
next |
||||
|
? `确定启用任务「${row.jobName}」？启用后将按 Cron 自动执行。` |
||||
|
: `确定停用任务「${row.jobName}」？停用后不再自动执行，仍可手动触发。`, |
||||
|
next ? '启用确认' : '停用确认', |
||||
|
{ |
||||
|
type: 'warning', |
||||
|
confirmButtonText: next ? '启用' : '停用', |
||||
|
cancelButtonText: '取消' |
||||
|
} |
||||
|
) |
||||
|
} catch (e) { |
||||
|
return false |
||||
|
} |
||||
|
updatingId.value = row.id |
||||
|
try { |
||||
|
await scheduledJobApi.update(row.id, { enabled: next }) |
||||
|
ElMessage.success(next ? '任务已启用' : '任务已停用') |
||||
|
await load() |
||||
|
return true |
||||
|
} catch (e) { |
||||
|
return false |
||||
|
} finally { |
||||
|
updatingId.value = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function openEdit(row) { |
||||
|
editingJob.value = row |
||||
|
form.cronExpression = row.cronExpression || '' |
||||
|
form.description = row.description || '' |
||||
|
editVisible.value = true |
||||
|
} |
||||
|
|
||||
|
async function saveEdit() { |
||||
|
const cron = form.cronExpression.trim() |
||||
|
if (!cron) { |
||||
|
ElMessage.error('Cron 表达式不能为空') |
||||
|
return |
||||
|
} |
||||
|
saving.value = true |
||||
|
try { |
||||
|
await scheduledJobApi.update(editingJob.value.id, { |
||||
|
cronExpression: cron, |
||||
|
// Empty string clears the description; null would mean "leave unchanged". |
||||
|
description: form.description.trim() |
||||
|
}) |
||||
|
ElMessage.success('任务已更新，新的执行计划立即生效') |
||||
|
editVisible.value = false |
||||
|
await load() |
||||
|
} catch (e) { |
||||
|
// The HTTP layer already surfaces JOB_CRON_INVALID and similar messages. |
||||
|
} finally { |
||||
|
saving.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function runNow(row) { |
||||
|
try { |
||||
|
await ElMessageBox.confirm( |
||||
|
`确定立即执行任务「${row.jobName}」？任务将在后台执行，可在运行历史中查看结果。`, |
||||
|
'执行确认', |
||||
|
{ type: 'warning', confirmButtonText: '立即执行', cancelButtonText: '取消' } |
||||
|
) |
||||
|
} catch (e) { |
||||
|
return |
||||
|
} |
||||
|
try { |
||||
|
const result = await scheduledJobApi.run(row.id) |
||||
|
ElMessage.success(`已触发，运行编号 #${result.runId}`) |
||||
|
await openHistory(row) |
||||
|
await load() |
||||
|
} catch (e) { |
||||
|
// Conflict (409) and executor unavailable (503) messages come from the interceptor. |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function openHistory(row) { |
||||
|
historyJob.value = row |
||||
|
historyVisible.value = true |
||||
|
await loadRuns() |
||||
|
} |
||||
|
|
||||
|
async function loadRuns() { |
||||
|
if (!historyJob.value) { |
||||
|
return |
||||
|
} |
||||
|
runsLoading.value = true |
||||
|
try { |
||||
|
runs.value = await scheduledJobApi.runs(historyJob.value.id, { limit: 100 }) |
||||
|
} finally { |
||||
|
runsLoading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function closeHistory() { |
||||
|
historyJob.value = null |
||||
|
runs.value = [] |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
load() |
||||
|
listTimer = setInterval(load, 10000) |
||||
|
}) |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
if (listTimer) { |
||||
|
clearInterval(listTimer) |
||||
|
listTimer = null |
||||
|
} |
||||
|
if (runTimer) { |
||||
|
clearInterval(runTimer) |
||||
|
runTimer = null |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="page"> |
||||
|
<div class="page-header"> |
||||
|
<div> |
||||
|
<h2 class="page-title">定时任务</h2> |
||||
|
</div> |
||||
|
<el-button :loading="loading" @click="load">刷新</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<el-card shadow="never"> |
||||
|
<el-table |
||||
|
v-loading="loading" |
||||
|
:data="jobs" |
||||
|
size="small" |
||||
|
empty-text="暂无定时任务" |
||||
|
> |
||||
|
<el-table-column label="任务" min-width="200"> |
||||
|
<template #default="{ row }"> |
||||
|
<div class="job-name">{{ row.jobName }}</div> |
||||
|
<div class="mono muted">{{ row.jobCode }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="类型" width="140"> |
||||
|
<template #default="{ row }"> |
||||
|
<el-tag size="small" effect="plain">{{ jobTypeLabel(row.jobType) }}</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="Cron" width="160"> |
||||
|
<template #default="{ row }"> |
||||
|
<span class="mono">{{ row.cronExpression || '-' }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="启用" width="90"> |
||||
|
<template #default="{ row }"> |
||||
|
<el-switch |
||||
|
v-model="row.enabled" |
||||
|
:loading="updatingId === row.id" |
||||
|
:before-change="() => confirmToggle(row)" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="上次执行" min-width="210"> |
||||
|
<template #default="{ row }"> |
||||
|
<template v-if="row.lastStatus"> |
||||
|
<StatusTag :status="row.lastStatus" /> |
||||
|
<span class="cell-time">{{ formatDateTime(row.lastRunAt) }}</span> |
||||
|
<span class="muted">· {{ formatDuration(row.lastDurationMs) }}</span> |
||||
|
</template> |
||||
|
<span v-else class="muted">尚未执行</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="下次执行" width="170"> |
||||
|
<template #default="{ row }"> |
||||
|
<span v-if="row.enabled">{{ formatDateTime(row.nextRunAt) }}</span> |
||||
|
<span v-else class="muted">已停用</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="最近信息" min-width="220" show-overflow-tooltip> |
||||
|
<template #default="{ row }"> |
||||
|
<span :class="row.lastStatus === 'FAILED' ? 'message-failed' : 'muted'"> |
||||
|
{{ row.lastMessage || '—' }} |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="190" fixed="right"> |
||||
|
<template #default="{ row }"> |
||||
|
<el-button link type="primary" @click="openEdit(row)">编辑</el-button> |
||||
|
<el-button |
||||
|
link |
||||
|
type="primary" |
||||
|
:disabled="row.running" |
||||
|
@click="runNow(row)" |
||||
|
> |
||||
|
立即执行 |
||||
|
</el-button> |
||||
|
<el-button link @click="openHistory(row)">历史</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<div class="table-footer muted"> |
||||
|
共 {{ jobs.length }} 个任务 · 运行中的任务每 2 秒自动刷新 |
||||
|
</div> |
||||
|
</el-card> |
||||
|
|
||||
|
<el-dialog |
||||
|
v-model="editVisible" |
||||
|
title="编辑定时任务" |
||||
|
width="560px" |
||||
|
@closed="editingJob = null" |
||||
|
> |
||||
|
<el-form v-if="editingJob" label-position="top" @submit.prevent="saveEdit"> |
||||
|
<el-form-item label="任务"> |
||||
|
<div> |
||||
|
<div class="job-name">{{ editingJob.jobName }}</div> |
||||
|
<div class="mono muted"> |
||||
|
{{ editingJob.jobCode }} · {{ jobTypeLabel(editingJob.jobType) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="Cron 表达式"> |
||||
|
<el-input |
||||
|
v-model="form.cronExpression" |
||||
|
class="mono" |
||||
|
maxlength="128" |
||||
|
placeholder="例如 0 */5 * * * *" |
||||
|
/> |
||||
|
<div class="field-hint"> |
||||
|
支持 5 段或 6 段（秒 分 时 日 月 周，0 和 7 均表示周日），5 段会自动补秒。 |
||||
|
保存后立即生效。示例：<span class="mono">0 */5 * * * *</span>（每 5 分钟）、 |
||||
|
<span class="mono">*/10 * * * * *</span>（每 10 秒）。 |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="说明"> |
||||
|
<el-input |
||||
|
v-model="form.description" |
||||
|
type="textarea" |
||||
|
:rows="3" |
||||
|
maxlength="255" |
||||
|
show-word-limit |
||||
|
placeholder="选填，留空则清除说明" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<template #footer> |
||||
|
<el-button @click="editVisible = false">取消</el-button> |
||||
|
<el-button type="primary" :loading="saving" @click="saveEdit">保存</el-button> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<el-drawer |
||||
|
v-model="historyVisible" |
||||
|
size="780px" |
||||
|
:title="historyJob ? `运行历史 · ${historyJob.jobName}` : '运行历史'" |
||||
|
@closed="closeHistory" |
||||
|
> |
||||
|
<div class="drawer-meta muted"> |
||||
|
<span class="mono">{{ historyJob?.jobCode }}</span> |
||||
|
<span>Cron：<span class="mono">{{ historyJob?.cronExpression }}</span></span> |
||||
|
<el-button size="small" :loading="runsLoading" @click="loadRuns">刷新</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<el-table |
||||
|
v-loading="runsLoading" |
||||
|
:data="runs" |
||||
|
size="small" |
||||
|
empty-text="暂无运行记录" |
||||
|
max-height="640" |
||||
|
> |
||||
|
<el-table-column label="开始时间" width="170"> |
||||
|
<template #default="{ row }">{{ formatDateTime(row.startedAt) }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="触发" width="80"> |
||||
|
<template #default="{ row }">{{ triggerLabel(row.triggerType) }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="状态" width="100"> |
||||
|
<template #default="{ row }"><StatusTag :status="row.status" /></template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="耗时" width="90"> |
||||
|
<template #default="{ row }"> |
||||
|
<span class="mono">{{ formatDuration(row.durationMs) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="消息" min-width="220" show-overflow-tooltip> |
||||
|
<template #default="{ row }">{{ row.message || '—' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column type="expand"> |
||||
|
<template #default="{ row }"> |
||||
|
<div class="expand-body"> |
||||
|
<div class="muted">执行详情</div> |
||||
|
<JsonBlock :value="row.detailJson" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-drawer> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.job-name { |
||||
|
font-weight: 600; |
||||
|
color: #1f2d3d; |
||||
|
} |
||||
|
|
||||
|
.table-footer { |
||||
|
margin-top: 12px; |
||||
|
font-size: 12px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.cell-time { |
||||
|
margin-left: 8px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.message-failed { |
||||
|
color: var(--el-color-danger); |
||||
|
} |
||||
|
|
||||
|
.field-hint { |
||||
|
margin-top: 6px; |
||||
|
color: var(--av-text-muted); |
||||
|
font-size: 12px; |
||||
|
line-height: 1.6; |
||||
|
} |
||||
|
|
||||
|
.drawer-meta { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 16px; |
||||
|
margin-bottom: 12px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.expand-body { |
||||
|
padding: 8px 16px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,221 @@ |
|||||
|
<script setup> |
||||
|
import { computed, onMounted, ref } from 'vue' |
||||
|
import { ElMessage } from 'element-plus' |
||||
|
import { systemConfigApi } from '../api' |
||||
|
import { useBranding } from '../composables/useBranding' |
||||
|
|
||||
|
const { branding, apply } = useBranding() |
||||
|
|
||||
|
const loading = ref(false) |
||||
|
const saving = ref(false) |
||||
|
const platformName = ref('') |
||||
|
const logo = ref(null) |
||||
|
|
||||
|
const MAX_LOGO_BYTES = 1024 * 1024 |
||||
|
const ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'] |
||||
|
|
||||
|
const trimmedName = computed(() => platformName.value.trim()) |
||||
|
const nameValid = computed(() => trimmedName.value.length > 0 && trimmedName.value.length <= 64) |
||||
|
const dirty = computed( |
||||
|
() => |
||||
|
trimmedName.value !== branding.platformName || |
||||
|
(logo.value || null) !== (branding.logo || null) |
||||
|
) |
||||
|
|
||||
|
async function load() { |
||||
|
loading.value = true |
||||
|
try { |
||||
|
const data = await systemConfigApi.get() |
||||
|
platformName.value = data.platformName || 'AutoVoucher' |
||||
|
logo.value = data.logo || null |
||||
|
apply(data) |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function onLogoChange(uploadFile) { |
||||
|
const file = uploadFile.raw |
||||
|
if (!file) { |
||||
|
return |
||||
|
} |
||||
|
if (!ALLOWED_TYPES.includes(file.type)) { |
||||
|
ElMessage.error('Logo 仅支持 PNG、JPG、WebP 或 GIF 图片') |
||||
|
return |
||||
|
} |
||||
|
if (file.size > MAX_LOGO_BYTES) { |
||||
|
ElMessage.error('Logo 不能超过 1MB') |
||||
|
return |
||||
|
} |
||||
|
const reader = new FileReader() |
||||
|
reader.onload = () => { |
||||
|
logo.value = reader.result |
||||
|
} |
||||
|
reader.onerror = () => ElMessage.error('图片读取失败，请重新选择') |
||||
|
reader.readAsDataURL(file) |
||||
|
} |
||||
|
|
||||
|
function removeLogo() { |
||||
|
logo.value = null |
||||
|
} |
||||
|
|
||||
|
function reset() { |
||||
|
platformName.value = branding.platformName |
||||
|
logo.value = branding.logo || null |
||||
|
} |
||||
|
|
||||
|
async function save() { |
||||
|
if (!nameValid.value) { |
||||
|
ElMessage.error('平台名称不能为空，且不能超过 64 个字符') |
||||
|
return |
||||
|
} |
||||
|
saving.value = true |
||||
|
try { |
||||
|
const data = await systemConfigApi.update({ |
||||
|
platformName: trimmedName.value, |
||||
|
logo: logo.value || null |
||||
|
}) |
||||
|
platformName.value = data.platformName |
||||
|
logo.value = data.logo || null |
||||
|
apply(data) |
||||
|
ElMessage.success('样式配置已保存') |
||||
|
} finally { |
||||
|
saving.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMounted(load) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="page"> |
||||
|
<div class="page-header"> |
||||
|
<div> |
||||
|
<h2 class="page-title">样式管理</h2> |
||||
|
<div class="page-subtitle">平台名称与 Logo 会同步展示在登录页、侧边栏和顶部标题</div> |
||||
|
</div> |
||||
|
<el-button :loading="loading" @click="load">刷新</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<el-card v-loading="loading" shadow="never" class="config-card"> |
||||
|
<div class="config-section-title">品牌样式</div> |
||||
|
|
||||
|
<el-form label-position="top" @submit.prevent="save"> |
||||
|
<el-form-item label="平台名称"> |
||||
|
<el-input |
||||
|
v-model="platformName" |
||||
|
maxlength="64" |
||||
|
show-word-limit |
||||
|
placeholder="例如：AutoVoucher" |
||||
|
style="max-width: 420px" |
||||
|
/> |
||||
|
<div class="field-hint">最多 64 个字符，保存后立即生效</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="Logo"> |
||||
|
<div class="logo-row"> |
||||
|
<div class="logo-preview"> |
||||
|
<img v-if="logo" :src="logo" alt="logo preview" /> |
||||
|
<span v-else class="logo-empty">未上传</span> |
||||
|
</div> |
||||
|
<div class="logo-actions"> |
||||
|
<div class="logo-buttons"> |
||||
|
<el-upload |
||||
|
:auto-upload="false" |
||||
|
:show-file-list="false" |
||||
|
accept="image/png,image/jpeg,image/webp,image/gif" |
||||
|
:on-change="onLogoChange" |
||||
|
> |
||||
|
<el-button> |
||||
|
<el-icon><Upload /></el-icon> |
||||
|
<span>选择图片</span> |
||||
|
</el-button> |
||||
|
</el-upload> |
||||
|
<el-button v-if="logo" text type="danger" @click="removeLogo">移除 Logo</el-button> |
||||
|
</div> |
||||
|
<div class="field-hint">支持 PNG / JPG / WebP / GIF，不超过 1MB；建议使用透明背景的正方形图片</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<div class="config-footer"> |
||||
|
<el-button :disabled="!dirty || saving" @click="reset">撤销修改</el-button> |
||||
|
<el-button type="primary" :loading="saving" :disabled="!nameValid || !dirty" @click="save"> |
||||
|
保存 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.config-card { |
||||
|
max-width: 820px; |
||||
|
} |
||||
|
|
||||
|
.config-section-title { |
||||
|
margin-bottom: 18px; |
||||
|
font-size: 15px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.field-hint { |
||||
|
margin-top: 6px; |
||||
|
color: var(--av-text-muted); |
||||
|
font-size: 12px; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.logo-row { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
gap: 18px; |
||||
|
} |
||||
|
|
||||
|
.logo-preview { |
||||
|
display: grid; |
||||
|
place-items: center; |
||||
|
width: 96px; |
||||
|
height: 96px; |
||||
|
flex: none; |
||||
|
border: 1px dashed #d7dee8; |
||||
|
border-radius: 10px; |
||||
|
background: #fafbfd; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.logo-preview img { |
||||
|
max-width: 88px; |
||||
|
max-height: 88px; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
|
||||
|
.logo-empty { |
||||
|
color: var(--av-text-muted); |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.logo-actions { |
||||
|
padding-top: 6px; |
||||
|
} |
||||
|
|
||||
|
.logo-buttons { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
.logo-buttons :deep(.el-upload) { |
||||
|
display: inline-flex; |
||||
|
} |
||||
|
|
||||
|
.config-footer { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
gap: 8px; |
||||
|
margin-top: 8px; |
||||
|
padding-top: 18px; |
||||
|
border-top: 1px solid #eef1f6; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,345 @@ |
|||||
|
<script setup> |
||||
|
import { computed, onMounted, reactive, ref } from 'vue' |
||||
|
import { ElMessage, ElMessageBox } from 'element-plus' |
||||
|
import { sysConfigApi } from '../api' |
||||
|
import { formatDateTime } from '../utils/format' |
||||
|
|
||||
|
const MAX_GROUP_LENGTH = 64 |
||||
|
const MAX_KEY_LENGTH = 128 |
||||
|
const MAX_VALUE_BYTES = 65535 |
||||
|
const MAX_DESCRIPTION_LENGTH = 255 |
||||
|
const KEY_PATTERN = /^[A-Za-z0-9][A-Za-z0-9._-]*$/ |
||||
|
|
||||
|
const loading = ref(false) |
||||
|
const saving = ref(false) |
||||
|
const entries = ref([]) |
||||
|
const dialogVisible = ref(false) |
||||
|
const editingId = ref(null) |
||||
|
const editingSecret = ref(false) |
||||
|
|
||||
|
const filters = reactive({ |
||||
|
group: '', |
||||
|
keyword: '' |
||||
|
}) |
||||
|
|
||||
|
const form = reactive({ |
||||
|
configGroup: '', |
||||
|
configKey: '', |
||||
|
configValue: '', |
||||
|
description: '' |
||||
|
}) |
||||
|
|
||||
|
const groups = computed(() => { |
||||
|
const set = new Set(entries.value.map((entry) => entry.configGroup)) |
||||
|
return Array.from(set).sort((a, b) => a.localeCompare(b)) |
||||
|
}) |
||||
|
|
||||
|
const filteredEntries = computed(() => { |
||||
|
const keyword = filters.keyword.trim().toLowerCase() |
||||
|
return entries.value.filter((entry) => { |
||||
|
if (filters.group && entry.configGroup !== filters.group) { |
||||
|
return false |
||||
|
} |
||||
|
if (!keyword) { |
||||
|
return true |
||||
|
} |
||||
|
return [entry.configGroup, entry.configKey, entry.description] |
||||
|
.filter(Boolean) |
||||
|
.some((value) => value.toLowerCase().includes(keyword)) |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
async function load() { |
||||
|
loading.value = true |
||||
|
try { |
||||
|
entries.value = await sysConfigApi.list() |
||||
|
if (filters.group && !groups.value.includes(filters.group)) { |
||||
|
filters.group = '' |
||||
|
} |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function resetFilters() { |
||||
|
filters.group = '' |
||||
|
filters.keyword = '' |
||||
|
} |
||||
|
|
||||
|
function resetForm() { |
||||
|
editingId.value = null |
||||
|
editingSecret.value = false |
||||
|
form.configGroup = '' |
||||
|
form.configKey = '' |
||||
|
form.configValue = '' |
||||
|
form.description = '' |
||||
|
} |
||||
|
|
||||
|
function openCreate() { |
||||
|
resetForm() |
||||
|
dialogVisible.value = true |
||||
|
} |
||||
|
|
||||
|
function openEdit(row) { |
||||
|
editingId.value = row.id |
||||
|
editingSecret.value = Boolean(row.secret) |
||||
|
form.configGroup = row.configGroup |
||||
|
form.configKey = row.configKey |
||||
|
form.configValue = row.secret ? '' : (row.configValue || '') |
||||
|
form.description = row.description || '' |
||||
|
dialogVisible.value = true |
||||
|
} |
||||
|
|
||||
|
function validate() { |
||||
|
const group = form.configGroup.trim() |
||||
|
const key = form.configKey.trim() |
||||
|
const description = form.description.trim() |
||||
|
|
||||
|
if (!group) { |
||||
|
ElMessage.error('配置分组不能为空') |
||||
|
return false |
||||
|
} |
||||
|
if (group.length > MAX_GROUP_LENGTH) { |
||||
|
ElMessage.error(`配置分组不能超过 ${MAX_GROUP_LENGTH} 个字符`) |
||||
|
return false |
||||
|
} |
||||
|
if (!editingId.value) { |
||||
|
if (!key) { |
||||
|
ElMessage.error('配置键不能为空') |
||||
|
return false |
||||
|
} |
||||
|
if (key.length > MAX_KEY_LENGTH) { |
||||
|
ElMessage.error(`配置键不能超过 ${MAX_KEY_LENGTH} 个字符`) |
||||
|
return false |
||||
|
} |
||||
|
if (!KEY_PATTERN.test(key)) { |
||||
|
ElMessage.error('配置键只能包含字母、数字、点、下划线和短横线，且需以字母或数字开头') |
||||
|
return false |
||||
|
} |
||||
|
} |
||||
|
if (new TextEncoder().encode(form.configValue).length > MAX_VALUE_BYTES) { |
||||
|
ElMessage.error('配置值不能超过 65535 字节') |
||||
|
return false |
||||
|
} |
||||
|
if (description.length > MAX_DESCRIPTION_LENGTH) { |
||||
|
ElMessage.error(`说明不能超过 ${MAX_DESCRIPTION_LENGTH} 个字符`) |
||||
|
return false |
||||
|
} |
||||
|
return true |
||||
|
} |
||||
|
|
||||
|
async function save() { |
||||
|
if (!validate()) { |
||||
|
return |
||||
|
} |
||||
|
saving.value = true |
||||
|
try { |
||||
|
const secretEdit = Boolean(editingId.value) && editingSecret.value |
||||
|
const payload = { |
||||
|
configGroup: form.configGroup.trim(), |
||||
|
configKey: form.configKey.trim(), |
||||
|
// Masked secrets are never sent to the browser, so blank means keep the stored value. |
||||
|
configValue: secretEdit && form.configValue === '' ? null : form.configValue, |
||||
|
description: form.description.trim() || null |
||||
|
} |
||||
|
if (editingId.value) { |
||||
|
await sysConfigApi.update(editingId.value, payload) |
||||
|
ElMessage.success('配置项已更新') |
||||
|
} else { |
||||
|
await sysConfigApi.create(payload) |
||||
|
ElMessage.success('配置项已新增') |
||||
|
} |
||||
|
dialogVisible.value = false |
||||
|
await load() |
||||
|
} finally { |
||||
|
saving.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function remove(row) { |
||||
|
try { |
||||
|
await ElMessageBox.confirm( |
||||
|
`确定删除配置项「${row.configKey}」？该操作不可恢复。`, |
||||
|
'删除确认', |
||||
|
{ type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' } |
||||
|
) |
||||
|
} catch (e) { |
||||
|
return |
||||
|
} |
||||
|
await sysConfigApi.remove(row.id) |
||||
|
ElMessage.success('配置项已删除') |
||||
|
await load() |
||||
|
} |
||||
|
|
||||
|
onMounted(load) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="page"> |
||||
|
<div class="page-header"> |
||||
|
<div> |
||||
|
<h2 class="page-title">系统配置</h2> |
||||
|
<div class="page-subtitle"> |
||||
|
按分组维护系统运行参数，保存后立即生效；配置变更会记录审计日志 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="toolbar-actions"> |
||||
|
<el-button :loading="loading" @click="load">刷新</el-button> |
||||
|
<el-button type="primary" @click="openCreate">新增配置</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-card shadow="never"> |
||||
|
<div class="filter-bar"> |
||||
|
<el-select |
||||
|
v-model="filters.group" |
||||
|
clearable |
||||
|
placeholder="全部分组" |
||||
|
style="width: 180px" |
||||
|
> |
||||
|
<el-option v-for="group in groups" :key="group" :label="group" :value="group" /> |
||||
|
</el-select> |
||||
|
<el-input |
||||
|
v-model="filters.keyword" |
||||
|
clearable |
||||
|
placeholder="搜索配置键 / 说明" |
||||
|
style="max-width: 280px" |
||||
|
/> |
||||
|
<el-button @click="resetFilters">重置</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<el-table |
||||
|
v-loading="loading" |
||||
|
:data="filteredEntries" |
||||
|
size="small" |
||||
|
empty-text="暂无配置项" |
||||
|
> |
||||
|
<el-table-column prop="configGroup" label="分组" width="140"> |
||||
|
<template #default="{ row }"> |
||||
|
<el-tag size="small" effect="plain">{{ row.configGroup }}</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="configKey" label="配置键" min-width="200"> |
||||
|
<template #default="{ row }"> |
||||
|
<span class="mono">{{ row.configKey }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="configValue" label="配置值" min-width="220" show-overflow-tooltip> |
||||
|
<template #default="{ row }"> |
||||
|
<template v-if="row.secret"> |
||||
|
<span class="mono secret-value"> |
||||
|
{{ row.configured ? '••••••••' : '未配置' }} |
||||
|
</span> |
||||
|
<el-tag v-if="row.configured" size="small" type="success" effect="plain"> |
||||
|
已配置 |
||||
|
</el-tag> |
||||
|
</template> |
||||
|
<span v-else class="mono">{{ row.configValue || '—' }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="description" label="说明" min-width="220" show-overflow-tooltip> |
||||
|
<template #default="{ row }">{{ row.description || '—' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="更新时间" width="170"> |
||||
|
<template #default="{ row }">{{ formatDateTime(row.updatedAt) }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="130" fixed="right"> |
||||
|
<template #default="{ row }"> |
||||
|
<el-button link type="primary" @click="openEdit(row)">编辑</el-button> |
||||
|
<el-button link type="danger" @click="remove(row)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<div class="table-footer muted">共 {{ filteredEntries.length }} 项</div> |
||||
|
</el-card> |
||||
|
|
||||
|
<el-dialog |
||||
|
v-model="dialogVisible" |
||||
|
:title="editingId ? '编辑配置' : '新增配置'" |
||||
|
width="560px" |
||||
|
@closed="resetForm" |
||||
|
> |
||||
|
<el-form label-position="top" @submit.prevent="save"> |
||||
|
<el-form-item label="配置分组"> |
||||
|
<el-select |
||||
|
v-model="form.configGroup" |
||||
|
filterable |
||||
|
allow-create |
||||
|
default-first-option |
||||
|
placeholder="选择或输入分组" |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-option v-for="group in groups" :key="group" :label="group" :value="group" /> |
||||
|
</el-select> |
||||
|
<div class="field-hint">可直接输入新的分组名称，例如 llm、push、oa</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="配置键"> |
||||
|
<el-input |
||||
|
v-model="form.configKey" |
||||
|
:disabled="Boolean(editingId)" |
||||
|
maxlength="128" |
||||
|
placeholder="例如 llm.endpoint" |
||||
|
/> |
||||
|
<div class="field-hint">创建后不可修改；建议使用“分组.名称”的格式</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="配置值"> |
||||
|
<el-input |
||||
|
v-model="form.configValue" |
||||
|
:type="editingSecret ? 'password' : 'textarea'" |
||||
|
:show-password="editingSecret" |
||||
|
:rows="editingSecret ? 1 : 4" |
||||
|
:autocomplete="editingSecret ? 'new-password' : 'off'" |
||||
|
:placeholder="editingSecret |
||||
|
? '已配置，留空表示不修改' |
||||
|
: '请输入配置值，留空表示清除'" |
||||
|
/> |
||||
|
<div class="field-hint"> |
||||
|
<template v-if="editingSecret"> |
||||
|
出于安全考虑，已保存的令牌不会回显，也无法复制；如需清除请删除该配置项。 |
||||
|
</template> |
||||
|
<template v-else>最多 65535 字节</template> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="说明"> |
||||
|
<el-input |
||||
|
v-model="form.description" |
||||
|
maxlength="255" |
||||
|
show-word-limit |
||||
|
placeholder="选填，描述该配置项的用途" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<template #footer> |
||||
|
<el-button @click="dialogVisible = false">取消</el-button> |
||||
|
<el-button type="primary" :loading="saving" @click="save">保存</el-button> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.table-footer { |
||||
|
margin-top: 12px; |
||||
|
font-size: 12px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.field-hint { |
||||
|
margin-top: 6px; |
||||
|
color: var(--av-text-muted); |
||||
|
font-size: 12px; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.secret-value { |
||||
|
margin-right: 8px; |
||||
|
letter-spacing: 2px; |
||||
|
user-select: none; |
||||
|
-webkit-user-select: none; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue