229 lines
13 KiB
Vue
229 lines
13 KiB
Vue
<script setup lang="ts">
|
||
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
||
import { Pencil, Ruler, Save } from '@lucide/vue'
|
||
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
|
||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||
import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
|
||
import {
|
||
getCustomerDimensionConfig,
|
||
updateCustomerDimensionConfig,
|
||
type CustomerDimensionBoxType,
|
||
type CustomerDimensionConfig,
|
||
type CustomerDimensionConfigFormModel,
|
||
type CustomerDimensionRule,
|
||
} from '@/modules/dimension-config'
|
||
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
||
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||
import AppDialog from '@/shared/components/AppDialog.vue'
|
||
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
||
|
||
const props = defineProps<{ customerId: string; customerName: string; customerCode?: string }>()
|
||
const access = useAccessPreviewStore()
|
||
const canView = computed(() => access.can('firstleg:dimension-config:view'))
|
||
const canEdit = computed(() => canView.value && access.can('firstleg:dimension-config:edit'))
|
||
const config = ref<CustomerDimensionConfig | null>(null)
|
||
const loading = ref(false)
|
||
const loadError = ref<ApiErrorDetails | null>(null)
|
||
const editorVisible = ref(false)
|
||
const editorSaving = ref(false)
|
||
const editorDirty = ref(false)
|
||
const editorForm = ref<FormInstance>()
|
||
const form = reactive<CustomerDimensionConfigFormModel>({ rules: [] })
|
||
|
||
const BOX_ORDER: readonly CustomerDimensionBoxType[] = ['SMALL', 'MEDIUM', 'LARGE', 'EXTRA_LARGE']
|
||
const BOX_NAMES: Record<CustomerDimensionBoxType, string> = {
|
||
SMALL: '小箱', MEDIUM: '中箱', LARGE: '大箱', EXTRA_LARGE: '特大箱',
|
||
}
|
||
|
||
const columns: DataTableColumn[] = [
|
||
{ key: 'boxTypeName', label: '箱规类型', minWidth: 110, slotName: 'boxTypeName' },
|
||
{ key: 'inner', label: '内径尺寸（长×宽×高 cm）', minWidth: 210, slotName: 'inner' },
|
||
{ key: 'edgeAdditionCm', label: '外边加宽（cm）', width: 150, slotName: 'edgeAdditionCm' },
|
||
{ key: 'outer', label: '外径尺寸（长×宽×高 cm）', minWidth: 210, slotName: 'outer' },
|
||
{ key: 'volumeCbm', label: '体积（CBM）', width: 130, slotName: 'volumeCbm' },
|
||
{ key: 'remark', label: '备注', minWidth: 140, prop: 'remark' },
|
||
]
|
||
|
||
const { captureBaseline } = useUnsavedWorkRegistration({
|
||
key: `customer-dimension-config-${props.customerId}`,
|
||
label: computed(() => `${props.customerName}的箱规尺寸规则`),
|
||
isOpen: editorVisible,
|
||
model: form,
|
||
requiredPermission: computed(() => 'firstleg:dimension-config:edit'),
|
||
})
|
||
|
||
watch(form, () => {
|
||
if (editorVisible.value) editorDirty.value = true
|
||
}, { deep: true })
|
||
|
||
watch(() => props.customerId, () => {
|
||
editorVisible.value = false
|
||
void loadConfig()
|
||
})
|
||
|
||
function sortRules(rules: CustomerDimensionRule[]) {
|
||
return [...rules].sort((a, b) => BOX_ORDER.indexOf(a.boxType) - BOX_ORDER.indexOf(b.boxType))
|
||
.map((rule) => ({ ...rule, boxTypeName: BOX_NAMES[rule.boxType] || rule.boxTypeName }))
|
||
}
|
||
|
||
async function loadConfig() {
|
||
if (!canView.value) return
|
||
loading.value = true
|
||
loadError.value = null
|
||
try {
|
||
config.value = await getCustomerDimensionConfig(props.customerId)
|
||
config.value.rules = sortRules(config.value.rules)
|
||
} catch (error) {
|
||
config.value = null
|
||
loadError.value = getApiErrorDetails(error, '箱规尺寸规则加载失败，请稍后重试')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function cloneRules(rules: CustomerDimensionRule[]) {
|
||
return sortRules(rules).map((rule) => ({ ...rule }))
|
||
}
|
||
|
||
async function openEditor() {
|
||
if (!config.value) return
|
||
form.rules = cloneRules(config.value.rules)
|
||
await nextTick()
|
||
editorDirty.value = false
|
||
editorVisible.value = true
|
||
await nextTick()
|
||
captureBaseline()
|
||
editorForm.value?.clearValidate()
|
||
}
|
||
|
||
async function confirmAbandon(): Promise<boolean> {
|
||
try {
|
||
await ElMessageBox.confirm('箱规尺寸尚未保存，确定放弃修改吗？', '放弃编辑', {
|
||
confirmButtonText: '放弃', cancelButtonText: '继续编辑', type: 'warning',
|
||
})
|
||
return true
|
||
} catch {
|
||
return false
|
||
}
|
||
}
|
||
|
||
async function beforeEditorClose(done: () => void) {
|
||
if (editorSaving.value) return
|
||
if (!editorDirty.value || await confirmAbandon()) done()
|
||
}
|
||
|
||
async function closeEditor() {
|
||
if (editorSaving.value) return
|
||
if (editorDirty.value && !await confirmAbandon()) return
|
||
editorVisible.value = false
|
||
}
|
||
|
||
function validateRules() {
|
||
if (form.rules.length !== BOX_ORDER.length || form.rules.some((rule) => !BOX_ORDER.includes(rule.boxType))) {
|
||
ElMessage.error('必须完整保存小箱、中箱、大箱、特大箱四条规则')
|
||
return false
|
||
}
|
||
if (new Set(form.rules.map((rule) => rule.boxType)).size !== BOX_ORDER.length) {
|
||
ElMessage.error('箱规类型不能重复')
|
||
return false
|
||
}
|
||
if (form.rules.some((rule) => ![rule.innerLengthCm, rule.innerWidthCm, rule.innerHeightCm].every((value) => Number.isFinite(value) && value > 0))) {
|
||
ElMessage.error('内径长、宽、高必须大于 0')
|
||
return false
|
||
}
|
||
if (form.rules.some((rule) => !Number.isFinite(rule.edgeAdditionCm) || rule.edgeAdditionCm < 0.001 || rule.edgeAdditionCm > 100)) {
|
||
ElMessage.error('外边加宽必须在 0.001 至 100cm 之间')
|
||
return false
|
||
}
|
||
if (form.rules.some((rule) => (rule.remark || '').length > 500)) {
|
||
ElMessage.error('备注不能超过 500 个字符')
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
|
||
async function saveConfig() {
|
||
if (!config.value || !validateRules()) return
|
||
editorSaving.value = true
|
||
try {
|
||
const rules = form.rules.map((rule) => ({
|
||
boxType: rule.boxType,
|
||
innerLengthCm: rule.innerLengthCm,
|
||
innerWidthCm: rule.innerWidthCm,
|
||
innerHeightCm: rule.innerHeightCm,
|
||
edgeAdditionCm: rule.edgeAdditionCm,
|
||
remark: rule.remark,
|
||
version: rule.version,
|
||
}))
|
||
config.value = await updateCustomerDimensionConfig(props.customerId, { rules })
|
||
config.value.rules = sortRules(config.value.rules)
|
||
editorDirty.value = false
|
||
editorVisible.value = false
|
||
ElMessage.success('箱规尺寸规则已保存')
|
||
} catch (error) {
|
||
ElMessage.error(getApiErrorDetails(error, '箱规尺寸规则保存失败，请刷新后重试').message)
|
||
} finally {
|
||
editorSaving.value = false
|
||
}
|
||
}
|
||
|
||
function formatDimension(...values: number[]) {
|
||
return values.map((value) => Number(value.toFixed(2)).toString()).join(' × ')
|
||
}
|
||
|
||
function formatDate(value: string | null) {
|
||
return value ? value.replace('T', ' ').slice(0, 16) : '暂无记录'
|
||
}
|
||
|
||
onMounted(loadConfig)
|
||
</script>
|
||
|
||
<template>
|
||
<div class="dimension-rule-panel">
|
||
<div v-if="!canView || loadError" class="panel-title rule-heading">
|
||
<div><h2>按箱规尺寸计算</h2><p>{{ customerName }}{{ customerCode ? `（${customerCode}）` : '' }}的尺寸计算规则</p></div>
|
||
</div>
|
||
<div v-if="!canView" class="rule-state"><Ruler :size="30" /><strong>暂无尺寸计算规则查看权限</strong><p>请联系管理员申请尺寸计算规则查看权限。</p></div>
|
||
<div v-else-if="loadError" class="rule-error" role="alert"><div><strong>箱规尺寸规则加载失败</strong><p>{{ loadError.message }}</p><ApiErrorMeta :details="loadError" /></div><el-button type="primary" plain :loading="loading" @click="loadConfig">重新加载</el-button></div>
|
||
<section v-else-if="config" class="rule-card">
|
||
<header class="rule-card-heading"><h2>按箱规尺寸计算</h2><el-button v-if="canEdit" type="primary" :disabled="loading" @click="openEditor"><Pencil :size="16" />编辑规则</el-button></header>
|
||
<div class="formula-band"><span>计算方式：<strong>内径尺寸 + 外边加宽 × 2 = 外径尺寸</strong></span><span>体积公式：外径长 × 外径宽 × 外径高 ÷ 1,000,000 = CBM</span><span>默认加边：2cm（每侧）</span></div>
|
||
<DataTable :data="config.rules" :columns="columns" :loading="loading" row-key="boxType" empty-text="当前客户暂无箱规尺寸规则">
|
||
<template #boxTypeName="{ row }"><strong>{{ row.boxTypeName }}</strong></template>
|
||
<template #inner="{ row }">{{ formatDimension(row.innerLengthCm, row.innerWidthCm, row.innerHeightCm) }}</template>
|
||
<template #edgeAdditionCm="{ row }"><el-tag effect="light">+{{ row.edgeAdditionCm }}cm</el-tag></template>
|
||
<template #outer="{ row }">{{ formatDimension(row.outerLengthCm, row.outerWidthCm, row.outerHeightCm) }}</template>
|
||
<template #volumeCbm="{ row }"><strong class="volume-value">{{ Number(row.volumeCbm).toFixed(3) }}</strong></template>
|
||
<template #empty><div class="rule-state"><Ruler :size="28" /><strong>当前客户暂无箱规尺寸规则</strong></div></template>
|
||
</DataTable>
|
||
</section>
|
||
<div v-else v-loading="loading" class="loading-state" />
|
||
|
||
<AppDialog v-model="editorVisible" title="编辑箱规尺寸" width="min(1100px, calc(100vw - 28px))" :confirm-loading="editorSaving" :show-cancel="false" :before-close="beforeEditorClose" @confirm="saveConfig">
|
||
<div class="editor-content">
|
||
<p class="editor-formula">计算公式：外径 = 内径 + 加宽 × 2（每侧加宽），体积(CBM) = 外径长 × 外径宽 × 外径高 ÷ 1,000,000</p>
|
||
<el-form ref="editorForm" :model="form" label-position="top">
|
||
<div class="editor-table-wrap">
|
||
<table class="editor-table"><thead><tr><th>箱规类型</th><th>内径长(cm)</th><th>内径宽(cm)</th><th>内径高(cm)</th><th>外边加宽(cm)</th><th>备注</th></tr></thead><tbody>
|
||
<tr v-for="row in form.rules" :key="row.boxType"><th scope="row">{{ row.boxTypeName }}</th><td><el-input-number v-model="row.innerLengthCm" :min="0.001" :precision="3" :controls="false" /></td><td><el-input-number v-model="row.innerWidthCm" :min="0.001" :precision="3" :controls="false" /></td><td><el-input-number v-model="row.innerHeightCm" :min="0.001" :precision="3" :controls="false" /></td><td><el-input-number v-model="row.edgeAdditionCm" :min="0.001" :max="100" :precision="3" :controls="false" /></td><td><el-input v-model="row.remark" maxlength="500" /></td></tr>
|
||
</tbody></table>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
<template #footer><div class="dialog-actions"><el-button :disabled="editorSaving" @click="closeEditor">取消</el-button><el-button type="primary" :loading="editorSaving" @click="saveConfig"><Save :size="16" />保存规则</el-button></div></template>
|
||
</AppDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.dimension-rule-panel { min-width: 0; }
|
||
.rule-heading { align-items: center; }
|
||
.rule-heading h2 { margin: 0; color: var(--cc-text); font-size: 18px; }.rule-heading p { margin: 6px 0 0; color: var(--cc-muted); font-size: 13px; }
|
||
.heading-actions,.dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }.heading-actions :deep(.el-button),.dialog-actions :deep(.el-button) { margin-left: 0; }
|
||
.rule-card { min-width: 0; }.rule-card-heading { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--cc-border); }.rule-card-heading h2 { margin: 0; color: var(--cc-text); font-size: 18px; }.formula-band { display: flex; min-height: 52px; align-items: center; flex-wrap: wrap; gap: 12px 30px; padding: 12px 18px; border-bottom: 1px solid var(--cc-border); background: #f8fafc; color: var(--cc-muted); font-size: 13px; }.formula-band strong { color: #344054; }.loading-state { min-height: 280px; }
|
||
.rule-state { display: flex; min-height: 220px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #8797b2; text-align: center; }.rule-state strong { color: #475467; font-size: 13px; }.rule-state p { margin: 0; color: var(--cc-muted); font-size: 12px; }
|
||
.rule-error { display: flex; min-height: 180px; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; background: #fff4f3; }.rule-error strong { color: #7a271a; }.rule-error p { margin: 5px 0; color: #b42318; font-size: 12px; }
|
||
.volume-value { color: #1570ef; }.editor-content { display: grid; gap: 20px; }.editor-formula { margin: 0; padding: 13px 15px; color: #475467; font-size: 13px; line-height: 1.7; }.editor-table-wrap { overflow-x: auto; }.editor-table { width: 100%; min-width: 920px; border-collapse: collapse; }.editor-table th,.editor-table td { padding: 10px 12px; border-bottom: 1px solid var(--cc-border); text-align: left; white-space: nowrap; }.editor-table thead th { background: #eef0fa; color: #475467; font-size: 12px; }.editor-table tbody th { color: var(--cc-text); font-size: 13px; }.editor-table :deep(.el-input-number),.editor-table :deep(.el-input) { width: 140px; }.editor-table :deep(.el-input-number .el-input__wrapper) { width: 100%; }
|
||
@media (max-width: 760px) { .rule-heading { align-items: stretch; flex-direction: column; }.rule-card-heading { align-items: stretch; flex-direction: column; }.rule-card-heading :deep(.el-button) { min-height: 44px; }.formula-band { align-items: flex-start; flex-direction: column; gap: 8px; }.rule-error { align-items: stretch; flex-direction: column; }.dialog-actions { width: 100%; }.dialog-actions :deep(.el-button) { min-height: 44px; flex: 1; } }
|
||
</style>
|