优化构架
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import test from 'node:test'
|
||||
import {
|
||||
getPasswordStrength,
|
||||
validateEditableAccountProfile,
|
||||
validatePasswordChange,
|
||||
} from './accountProfile.ts'
|
||||
|
||||
test('accepts a complete editable account profile', () => {
|
||||
assert.deepEqual(validateEditableAccountProfile({
|
||||
realName: '企业管理员',
|
||||
phone: '13800006601',
|
||||
email: 'admin@example.com',
|
||||
}), [])
|
||||
})
|
||||
|
||||
test('reports invalid profile fields together', () => {
|
||||
const errors = validateEditableAccountProfile({ realName: '', phone: '1'.repeat(33), email: 'bad' })
|
||||
assert.equal(errors.length, 3)
|
||||
})
|
||||
|
||||
test('validates password length, equality and confirmation', () => {
|
||||
assert.deepEqual(validatePasswordChange({
|
||||
currentPassword: 'OldPass123',
|
||||
newPassword: 'NewPass456',
|
||||
confirmPassword: 'NewPass456',
|
||||
}), [])
|
||||
assert.equal(validatePasswordChange({ currentPassword: '', newPassword: '123', confirmPassword: '456' }).length, 3)
|
||||
assert.match(validatePasswordChange({ currentPassword: 'SamePass1', newPassword: 'SamePass1', confirmPassword: 'SamePass1' }).join('|'), /不能与当前密码相同/)
|
||||
assert.match(validatePasswordChange({ currentPassword: 'OldPass1', newPassword: 'abcdefgh', confirmPassword: 'abcdefgh' }).join('|'), /同时包含字母和数字/)
|
||||
})
|
||||
|
||||
test('grades password strength without making extra complexity mandatory', () => {
|
||||
assert.equal(getPasswordStrength('short'), 'weak')
|
||||
assert.equal(getPasswordStrength('Password1'), 'medium')
|
||||
assert.equal(getPasswordStrength('Stronger@2026'), 'strong')
|
||||
})
|
||||
@@ -0,0 +1,57 @@
|
||||
export interface EditableAccountProfile {
|
||||
realName: string
|
||||
phone: string
|
||||
email: string
|
||||
}
|
||||
|
||||
export interface PasswordChangePayload {
|
||||
currentPassword: string
|
||||
newPassword: string
|
||||
confirmPassword: string
|
||||
}
|
||||
|
||||
const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
|
||||
export function validateEditableAccountProfile(profile: EditableAccountProfile): string[] {
|
||||
const errors: string[] = []
|
||||
const realName = profile.realName.trim()
|
||||
const phone = profile.phone.trim()
|
||||
const email = profile.email.trim()
|
||||
|
||||
if (realName.length < 1 || realName.length > 64) errors.push('姓名需为 1–64 个字符')
|
||||
if (phone.length > 32) errors.push('联系电话不能超过 32 个字符')
|
||||
if (email && !EMAIL_PATTERN.test(email)) errors.push('请输入有效的邮箱地址')
|
||||
|
||||
return errors
|
||||
}
|
||||
|
||||
export function validatePasswordChange(payload: PasswordChangePayload): string[] {
|
||||
const errors: string[] = []
|
||||
|
||||
if (!payload.currentPassword) errors.push('请输入当前密码')
|
||||
if (payload.newPassword.length < 8 || payload.newPassword.length > 64) {
|
||||
errors.push('新密码需为 8–64 个字符')
|
||||
}
|
||||
if (payload.newPassword.length >= 8 && (!/[a-zA-Z]/.test(payload.newPassword) || !/\d/.test(payload.newPassword))) {
|
||||
errors.push('新密码必须同时包含字母和数字')
|
||||
}
|
||||
if (payload.newPassword && payload.newPassword === payload.currentPassword) {
|
||||
errors.push('新密码不能与当前密码相同')
|
||||
}
|
||||
if (payload.confirmPassword !== payload.newPassword) errors.push('两次输入的新密码不一致')
|
||||
|
||||
return errors
|
||||
}
|
||||
|
||||
export type PasswordStrength = 'weak' | 'medium' | 'strong'
|
||||
|
||||
export function getPasswordStrength(password: string): PasswordStrength {
|
||||
let categoryCount = 0
|
||||
if (/[a-zA-Z]/.test(password)) categoryCount += 1
|
||||
if (/\d/.test(password)) categoryCount += 1
|
||||
if (/[^a-zA-Z\d]/.test(password)) categoryCount += 1
|
||||
|
||||
if (password.length >= 12 && categoryCount >= 3) return 'strong'
|
||||
if (password.length >= 8 && categoryCount >= 2) return 'medium'
|
||||
return 'weak'
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import fs from 'node:fs'
|
||||
import test from 'node:test'
|
||||
|
||||
const routerSource = fs.readFileSync(new URL('../router/index.ts', import.meta.url), 'utf8')
|
||||
const navigationSource = fs.readFileSync(new URL('../navigation/clientNavigation.ts', import.meta.url), 'utf8')
|
||||
const viewSource = fs.readFileSync(new URL('./AccountProfileView.vue', import.meta.url), 'utf8')
|
||||
const authSource = fs.readFileSync(new URL('../stores/auth.ts', import.meta.url), 'utf8')
|
||||
const authApiSource = fs.readFileSync(new URL('../api/auth.ts', import.meta.url), 'utf8')
|
||||
|
||||
test('registers the account profile route and navigation entry', () => {
|
||||
assert.match(routerSource, /account\/profile'.*AccountProfileView\.vue/)
|
||||
assert.match(routerSource, /permission: 'account:profile:view'/)
|
||||
assert.match(navigationSource, /title: '我的信息'.*path: '\/account\/profile'/)
|
||||
})
|
||||
|
||||
test('implements profile view, edit, save and cancel states', () => {
|
||||
assert.match(viewSource, /基本信息/)
|
||||
assert.doesNotMatch(viewSource, /account-identity/)
|
||||
assert.doesNotMatch(viewSource, /<h2>基本信息<\/h2>|<h2>修改密码<\/h2>/)
|
||||
assert.match(viewSource, /function startEditing\(\)/)
|
||||
assert.match(viewSource, /function cancelEditing\(\)/)
|
||||
assert.match(viewSource, /async function saveProfile\(\)/)
|
||||
assert.match(viewSource, /账号标识暂不支持在客户端修改/)
|
||||
assert.match(viewSource, /企业归属由平台审核关系确定/)
|
||||
assert.match(authSource, /async function savePersonalProfile\(/)
|
||||
assert.match(viewSource, /await auth\.savePersonalProfile/)
|
||||
})
|
||||
|
||||
test('implements password validation, strength feedback and double-submit protection', () => {
|
||||
assert.match(viewSource, /async function changePassword\(\)/)
|
||||
assert.match(viewSource, /validatePasswordChange/)
|
||||
assert.match(viewSource, /callback\(new Error\('请输入新密码'\)\)/)
|
||||
assert.match(viewSource, /getPasswordStrength/)
|
||||
assert.match(viewSource, /passwordStrengthState/)
|
||||
assert.match(viewSource, /if \(passwordSaving\.value\) return/)
|
||||
assert.match(viewSource, /await changeCurrentPassword/)
|
||||
assert.match(authApiSource, /method: 'PUT', url: '\/auth\/password'/)
|
||||
assert.match(viewSource, /安全记录已更新/)
|
||||
assert.match(viewSource, /await router\.replace\('\/login'\)/)
|
||||
assert.doesNotMatch(viewSource, /DEMO_CURRENT_PASSWORD|静态演示/)
|
||||
})
|
||||
|
||||
test('provides explicit responsive account layouts', () => {
|
||||
assert.match(viewSource, /@media \(max-width: 820px\)/)
|
||||
assert.match(viewSource, /@media \(max-width: 620px\)/)
|
||||
assert.match(viewSource, /\.account-info-grid, \.account-form-grid \{ grid-template-columns: 1fr; \}/)
|
||||
assert.match(viewSource, /min-height: 44px/)
|
||||
})
|
||||
@@ -0,0 +1,321 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
CheckCircle2,
|
||||
KeyRound,
|
||||
Pencil,
|
||||
Save,
|
||||
ShieldCheck,
|
||||
UserRound,
|
||||
X,
|
||||
} from '@lucide/vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { changeCurrentPassword } from '@/api/auth'
|
||||
import {
|
||||
getPasswordStrength,
|
||||
validateEditableAccountProfile,
|
||||
validatePasswordChange,
|
||||
type PasswordChangePayload,
|
||||
} from '@/utils/accountProfile'
|
||||
|
||||
type AccountTab = 'profile' | 'password'
|
||||
|
||||
interface ProfileForm {
|
||||
username: string
|
||||
realName: string
|
||||
phone: string
|
||||
email: string
|
||||
tenantName: string
|
||||
}
|
||||
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
const activeTab = ref<AccountTab>('profile')
|
||||
const editing = ref(false)
|
||||
const profileSaving = ref(false)
|
||||
const passwordSaving = ref(false)
|
||||
const passwordChangedAt = ref('')
|
||||
const profileFormRef = ref<FormInstance>()
|
||||
const passwordFormRef = ref<FormInstance>()
|
||||
|
||||
const profileForm = reactive<ProfileForm>({ ...auth.profile })
|
||||
const passwordForm = reactive<PasswordChangePayload>({
|
||||
currentPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
})
|
||||
|
||||
const profileRules: FormRules<ProfileForm> = {
|
||||
realName: [
|
||||
{ required: true, message: '请输入真实姓名', trigger: 'blur' },
|
||||
{ min: 1, max: 64, message: '姓名需为 1–64 个字符', trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{ max: 32, message: '联系电话不能超过 32 个字符', trigger: 'blur' },
|
||||
],
|
||||
email: [
|
||||
{ type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
|
||||
const passwordRules: FormRules<PasswordChangePayload> = {
|
||||
currentPassword: [{
|
||||
required: true,
|
||||
validator: (_rule, value: string, callback) => {
|
||||
if (!value) callback(new Error('请输入当前密码'))
|
||||
else callback()
|
||||
},
|
||||
trigger: 'blur',
|
||||
}],
|
||||
newPassword: [{
|
||||
required: true,
|
||||
validator: (_rule, value: string, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入新密码'))
|
||||
return
|
||||
}
|
||||
const errors = validatePasswordChange({
|
||||
currentPassword: passwordForm.currentPassword,
|
||||
newPassword: value,
|
||||
confirmPassword: value,
|
||||
})
|
||||
const relevantError = errors.find((error) => error.includes('8–64') || error.includes('同时包含') || error.includes('当前密码相同'))
|
||||
if (relevantError) callback(new Error(relevantError))
|
||||
else callback()
|
||||
},
|
||||
trigger: 'blur',
|
||||
}],
|
||||
confirmPassword: [{
|
||||
required: true,
|
||||
validator: (_rule, value: string, callback) => {
|
||||
if (!value) callback(new Error('请再次输入新密码'))
|
||||
else if (value !== passwordForm.newPassword) callback(new Error('两次输入的新密码不一致'))
|
||||
else callback()
|
||||
},
|
||||
trigger: 'blur',
|
||||
}],
|
||||
}
|
||||
|
||||
const passwordStrength = computed(() => getPasswordStrength(passwordForm.newPassword))
|
||||
const passwordStrengthState = computed(() => passwordForm.newPassword ? passwordStrength.value : 'empty')
|
||||
const strengthLabel = computed(() => passwordForm.newPassword
|
||||
? ({ weak: '较弱', medium: '中等', strong: '较强' })[passwordStrength.value]
|
||||
: '未输入')
|
||||
|
||||
function syncProfileForm() {
|
||||
Object.assign(profileForm, auth.profile)
|
||||
profileFormRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
function startEditing() {
|
||||
syncProfileForm()
|
||||
editing.value = true
|
||||
}
|
||||
|
||||
function cancelEditing() {
|
||||
syncProfileForm()
|
||||
editing.value = false
|
||||
}
|
||||
|
||||
async function saveProfile() {
|
||||
if (profileSaving.value) return
|
||||
const valid = await profileFormRef.value?.validate().catch(() => false)
|
||||
const errors = validateEditableAccountProfile(profileForm)
|
||||
if (!valid || errors.length > 0) return
|
||||
|
||||
profileSaving.value = true
|
||||
try {
|
||||
await auth.savePersonalProfile({
|
||||
realName: profileForm.realName.trim(),
|
||||
phone: profileForm.phone.trim(),
|
||||
email: profileForm.email.trim(),
|
||||
})
|
||||
syncProfileForm()
|
||||
editing.value = false
|
||||
ElMessage.success('个人信息已保存')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '个人信息保存失败，请重试')
|
||||
} finally {
|
||||
profileSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function resetPasswordForm() {
|
||||
passwordForm.currentPassword = ''
|
||||
passwordForm.newPassword = ''
|
||||
passwordForm.confirmPassword = ''
|
||||
passwordFormRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
async function changePassword() {
|
||||
if (passwordSaving.value) return
|
||||
const valid = await passwordFormRef.value?.validate().catch(() => false)
|
||||
if (!valid || validatePasswordChange(passwordForm).length > 0) return
|
||||
|
||||
passwordSaving.value = true
|
||||
try {
|
||||
await changeCurrentPassword(passwordForm.currentPassword, passwordForm.newPassword)
|
||||
passwordChangedAt.value = new Date().toLocaleString('zh-CN', { hour12: false })
|
||||
resetPasswordForm()
|
||||
ElMessage.success('密码已修改，请使用新密码重新登录')
|
||||
await auth.logout().catch(() => undefined)
|
||||
await router.replace('/login')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '密码修改失败，请重试')
|
||||
} finally {
|
||||
passwordSaving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="account-page">
|
||||
<div class="client-card account-workspace">
|
||||
<el-tabs v-model="activeTab" class="account-tabs">
|
||||
<el-tab-pane name="profile">
|
||||
<template #label><span class="account-tab-label"><UserRound :size="16" />基本信息</span></template>
|
||||
|
||||
<div v-if="!editing" class="account-actions">
|
||||
<el-button type="primary" @click="startEditing"><Pencil :size="16" />编辑信息</el-button>
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
v-if="editing"
|
||||
ref="profileFormRef"
|
||||
:model="profileForm"
|
||||
:rules="profileRules"
|
||||
label-position="top"
|
||||
class="account-form-grid"
|
||||
@submit.prevent="saveProfile"
|
||||
>
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="profileForm.username" disabled />
|
||||
<span class="field-help">账号标识暂不支持在客户端修改</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="realName"><el-input v-model="profileForm.realName" maxlength="64" show-word-limit placeholder="请输入真实姓名" /></el-form-item>
|
||||
<el-form-item label="联系电话" prop="phone"><el-input v-model="profileForm.phone" maxlength="32" inputmode="tel" placeholder="选填" /></el-form-item>
|
||||
<el-form-item label="邮箱" prop="email"><el-input v-model="profileForm.email" maxlength="128" inputmode="email" placeholder="选填" /></el-form-item>
|
||||
<el-form-item label="所属公司">
|
||||
<el-input v-model="profileForm.tenantName" disabled />
|
||||
<span class="field-help">企业归属由平台审核关系确定</span>
|
||||
</el-form-item>
|
||||
<div class="account-form-actions">
|
||||
<el-button :disabled="profileSaving" @click="cancelEditing"><X :size="16" />取消</el-button>
|
||||
<el-button type="primary" native-type="submit" :loading="profileSaving"><Save :size="16" />保存修改</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<dl v-else class="account-info-grid">
|
||||
<div><dt>用户名</dt><dd>{{ auth.profile.username }}</dd></div>
|
||||
<div><dt>姓名</dt><dd>{{ auth.profile.realName }}</dd></div>
|
||||
<div><dt>联系电话</dt><dd>{{ auth.profile.phone || '未填写' }}</dd></div>
|
||||
<div><dt>邮箱</dt><dd>{{ auth.profile.email || '未填写' }}</dd></div>
|
||||
<div><dt>所属公司</dt><dd>{{ auth.profile.tenantName }}</dd></div>
|
||||
</dl>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane name="password">
|
||||
<template #label><span class="account-tab-label"><KeyRound :size="16" />修改密码</span></template>
|
||||
|
||||
<div class="password-layout">
|
||||
<div>
|
||||
<el-form
|
||||
ref="passwordFormRef"
|
||||
:model="passwordForm"
|
||||
:rules="passwordRules"
|
||||
label-position="top"
|
||||
class="password-form"
|
||||
@submit.prevent="changePassword"
|
||||
>
|
||||
<el-form-item label="当前密码" prop="currentPassword">
|
||||
<el-input v-model="passwordForm.currentPassword" type="password" show-password autocomplete="current-password" placeholder="请输入当前密码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input v-model="passwordForm.newPassword" type="password" show-password autocomplete="new-password" maxlength="64" placeholder="请输入新密码" />
|
||||
<div class="password-strength" :data-strength="passwordStrengthState">
|
||||
<span aria-hidden="true"><i /><i /><i /></span>
|
||||
<small>密码强度：{{ strengthLabel }}</small>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认新密码" prop="confirmPassword">
|
||||
<el-input v-model="passwordForm.confirmPassword" type="password" show-password autocomplete="new-password" maxlength="64" placeholder="请再次输入新密码" />
|
||||
</el-form-item>
|
||||
<div class="password-actions">
|
||||
<el-button :disabled="passwordSaving" @click="resetPasswordForm">清空</el-button>
|
||||
<el-button type="primary" native-type="submit" :loading="passwordSaving"><KeyRound :size="16" />确认修改</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
<div v-if="passwordChangedAt" class="password-result" role="status">
|
||||
<CheckCircle2 :size="18" />
|
||||
<div><strong>安全记录已更新</strong><p>{{ passwordChangedAt }}；服务端已使旧会话失效。</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="security-note">
|
||||
<ShieldCheck :size="22" />
|
||||
<div><strong>账户安全提示</strong><p>建议组合使用字母、数字和符号，不要与其他网站共用密码。</p></div>
|
||||
<p>当前密码仅用于本次服务端校验，前端不会持久化密码。修改成功后需要重新登录。</p>
|
||||
</aside>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.account-page { display: flex; flex-direction: column; gap: 14px; }
|
||||
.account-workspace { min-height: 520px; padding: 0 24px 28px; }
|
||||
.account-tabs :deep(.el-tabs__header) { margin-bottom: 0; }
|
||||
.account-tabs :deep(.el-tabs__item) { min-height: 52px; }
|
||||
.account-tab-label { display: inline-flex; align-items: center; gap: 7px; }
|
||||
.account-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 20px 0; }
|
||||
.account-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
|
||||
.account-info-grid div { min-width: 0; min-height: 94px; padding: 18px 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||||
.account-info-grid dt { color: var(--muted); font-size: 11px; }
|
||||
.account-info-grid dd { margin: 9px 0 0; overflow-wrap: anywhere; color: var(--navy); font-size: 14px; font-weight: 650; }
|
||||
.account-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; max-width: 900px; }
|
||||
.account-form-grid :deep(.el-form-item) { align-content: start; margin-bottom: 21px; }
|
||||
.account-form-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; padding-top: 2px; }
|
||||
.field-help { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
|
||||
.password-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(260px, 1fr); align-items: start; max-width: 980px; gap: clamp(32px, 6vw, 72px); padding-top: 22px; }
|
||||
.password-form { max-width: 440px; }
|
||||
.password-form :deep(.el-form-item) { margin-bottom: 18px; }
|
||||
.password-form :deep(.el-form-item__error) { padding-top: 5px; line-height: 1.45; white-space: normal; }
|
||||
.password-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }
|
||||
.password-result { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; padding: 14px; background: #edf6f4; color: var(--primary); }
|
||||
.password-result strong { color: var(--navy); font-size: 12px; }
|
||||
.password-result p { margin: 3px 0 0; color: #526b67; font-size: 11px; line-height: 1.6; }
|
||||
.password-strength { display: grid; width: 100%; min-height: 18px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 9px; color: var(--muted); }
|
||||
.password-strength > span { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); gap: 4px; }
|
||||
.password-strength i { height: 3px; background: #dce3e6; }
|
||||
.password-strength[data-strength="weak"] i:first-child { background: #c2413b; }
|
||||
.password-strength[data-strength="medium"] i:nth-child(-n+2) { background: #c47913; }
|
||||
.password-strength[data-strength="strong"] i { background: var(--primary); }
|
||||
.password-strength small { white-space: nowrap; font-size: 10px; }
|
||||
.security-note { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; margin-top: 0; padding: 22px; background: #f2f7f6; color: var(--primary); }
|
||||
.security-note strong { color: var(--navy); font-size: 13px; }
|
||||
.security-note p { margin: 5px 0 0; color: #526b67; font-size: 11px; line-height: 1.7; }
|
||||
.security-note > p { grid-column: 1 / -1; margin-top: 8px; padding-top: 14px; border-top: 1px solid #d7e5e2; }
|
||||
.security-note code { color: var(--navy); font-weight: 700; }
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.password-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 18px; }
|
||||
.security-note { margin-top: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.account-workspace { min-height: 0; padding: 0 16px 22px; }
|
||||
.account-actions { width: 100%; margin: 16px 0; }
|
||||
.account-actions .el-button { width: 100%; min-height: 44px; }
|
||||
.account-form-actions { width: 100%; }
|
||||
.account-form-actions .el-button { min-height: 44px; flex: 1; }
|
||||
.account-info-grid, .account-form-grid { grid-template-columns: 1fr; }
|
||||
.account-info-grid div { min-height: 82px; }
|
||||
.password-actions { width: 100%; }
|
||||
.password-actions .el-button { min-height: 44px; flex: 1; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
import { apiRequest } from '@/api/http'
|
||||
import type { TokenPair } from '@/api/session'
|
||||
|
||||
export interface RegisterMerchantRequest {
|
||||
username: string
|
||||
password: string
|
||||
displayName: string
|
||||
companyName: string
|
||||
legalPerson: string
|
||||
legalPhone: string
|
||||
contactEmail?: string
|
||||
countryCode?: string
|
||||
address?: string
|
||||
}
|
||||
|
||||
export interface RegisterMerchantResult {
|
||||
accountId: number | string
|
||||
tenantId: number | string
|
||||
membershipId: number | string
|
||||
tenantStatus: 'PROFILE_REQUIRED'
|
||||
nextStep: string
|
||||
}
|
||||
|
||||
export function loginMerchant(username: string, password: string) {
|
||||
return apiRequest<TokenPair>({ method: 'POST', url: '/auth/login', data: { username, password } })
|
||||
}
|
||||
|
||||
export function registerMerchant(payload: RegisterMerchantRequest) {
|
||||
return apiRequest<RegisterMerchantResult>({ method: 'POST', url: '/auth/register', data: payload })
|
||||
}
|
||||
|
||||
export function logoutMerchant(refreshToken: string) {
|
||||
return apiRequest<void>({ method: 'POST', url: '/auth/logout', data: { refreshToken } })
|
||||
}
|
||||
|
||||
export function changeCurrentPassword(oldPassword: string, newPassword: string) {
|
||||
return apiRequest<void>({ method: 'PUT', url: '/auth/password', data: { oldPassword, newPassword } })
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import type { CurrentUser } from '@chongchong/shared'
|
||||
import { loginMerchant, logoutMerchant } from '@/api/auth'
|
||||
import { ApiError } from '@/api/http'
|
||||
import { getMerchantPermissionResources, getMerchantPersonalProfile, getTenantProfile, updateMerchantPersonalProfile, type MerchantPermissionResource } from '@/api/merchantIam'
|
||||
import { clearSessionTokens, getAccessToken, getRefreshToken, persistTokenPair } from '@/api/session'
|
||||
import { FRONTEND_TO_MERCHANT_PERMISSION_CODES, TENANT_PERMISSION_GROUPS } from '@/stores/tenantAdministration'
|
||||
import { decodeMerchantToken, type MerchantJwtPayload } from '@/utils/jwt'
|
||||
|
||||
const frontendPermissionCodes = new Set(TENANT_PERMISSION_GROUPS.flatMap((group) => group.items.map((item) => item.code)))
|
||||
const backendPermissionMapping = Object.entries(FRONTEND_TO_MERCHANT_PERMISSION_CODES)
|
||||
.reduce<Record<string, string[]>>((mapping, [frontendCode, backendCodes]) => {
|
||||
for (const backendCode of backendCodes) {
|
||||
if (!mapping[backendCode]) mapping[backendCode] = []
|
||||
mapping[backendCode].push(frontendCode)
|
||||
}
|
||||
return mapping
|
||||
}, {})
|
||||
|
||||
export interface ClientAccountProfile {
|
||||
username: string
|
||||
realName: string
|
||||
phone: string
|
||||
email: string
|
||||
tenantName: string
|
||||
}
|
||||
|
||||
const emptyProfile: ClientAccountProfile = {
|
||||
username: '',
|
||||
realName: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
tenantName: '',
|
||||
}
|
||||
|
||||
function effectiveBackendPermissions(payload: MerchantJwtPayload, resources?: MerchantPermissionResource[]) {
|
||||
const jwtPermissions = new Set(payload.permissions ?? [])
|
||||
if (!resources) return jwtPermissions
|
||||
const activeResources = new Set(resources.filter((item) => item.status === 'ACTIVE').map((item) => item.permissionCode))
|
||||
return new Set([...jwtPermissions].filter((permission) => activeResources.has(permission)))
|
||||
}
|
||||
|
||||
function mapPermissions(payload: MerchantJwtPayload, resources?: MerchantPermissionResource[]) {
|
||||
const backendPermissions = effectiveBackendPermissions(payload, resources)
|
||||
const result = new Set<string>(['dashboard:view', 'account:profile:view'])
|
||||
for (const permission of backendPermissions) {
|
||||
if (frontendPermissionCodes.has(permission)) result.add(permission)
|
||||
for (const mapped of backendPermissionMapping[permission] ?? []) result.add(mapped)
|
||||
}
|
||||
return [...result]
|
||||
}
|
||||
|
||||
function currentUser(payload: MerchantJwtPayload, tenantName?: string): CurrentUser {
|
||||
return {
|
||||
id: String(payload.user_id),
|
||||
name: payload.username,
|
||||
account: payload.username,
|
||||
tenantName: tenantName || `企业租户 ${payload.tenant_id}`,
|
||||
roles: payload.roles?.length ? [...payload.roles] : ['企业成员'],
|
||||
}
|
||||
}
|
||||
|
||||
function isExpiredSessionError(error: unknown) {
|
||||
return error instanceof ApiError && (error.status === 401 || error.code === 'A0401')
|
||||
}
|
||||
|
||||
export const useAuthStore = defineStore('client-auth', () => {
|
||||
const token = ref(getAccessToken())
|
||||
const payload = ref<MerchantJwtPayload | null>(null)
|
||||
const user = ref<CurrentUser | null>(null)
|
||||
const profile = ref<ClientAccountProfile>({ ...emptyProfile })
|
||||
const permissionCodes = ref<string[]>([])
|
||||
const sessionRestored = ref(false)
|
||||
|
||||
function applyToken(accessToken: string, resources?: MerchantPermissionResource[]) {
|
||||
const decoded = decodeMerchantToken(accessToken)
|
||||
payload.value = decoded
|
||||
token.value = accessToken
|
||||
user.value = currentUser(decoded, user.value?.tenantName)
|
||||
profile.value.username = decoded.username
|
||||
profile.value.realName = decoded.username
|
||||
permissionCodes.value = mapPermissions(decoded, resources)
|
||||
}
|
||||
|
||||
function clearSession() {
|
||||
clearSessionTokens()
|
||||
token.value = ''
|
||||
payload.value = null
|
||||
user.value = null
|
||||
permissionCodes.value = []
|
||||
profile.value = { ...emptyProfile }
|
||||
sessionRestored.value = true
|
||||
}
|
||||
|
||||
if (token.value) {
|
||||
try {
|
||||
applyToken(token.value)
|
||||
} catch {
|
||||
clearSession()
|
||||
}
|
||||
}
|
||||
|
||||
const isAuthenticated = computed(() => Boolean(token.value && payload.value))
|
||||
|
||||
async function loadSessionContext() {
|
||||
if (!payload.value) return
|
||||
const [resources, tenant, personalProfile] = await Promise.all([
|
||||
getMerchantPermissionResources(),
|
||||
getTenantProfile(),
|
||||
getMerchantPersonalProfile(),
|
||||
])
|
||||
permissionCodes.value = mapPermissions(payload.value, resources)
|
||||
user.value = currentUser(payload.value, tenant.tenantName)
|
||||
profile.value = {
|
||||
...profile.value,
|
||||
realName: personalProfile.displayName || payload.value.username,
|
||||
phone: personalProfile.phone || '',
|
||||
email: personalProfile.email || '',
|
||||
tenantName: tenant.tenantName,
|
||||
}
|
||||
}
|
||||
|
||||
async function restoreSession() {
|
||||
if (sessionRestored.value) return
|
||||
if (!isAuthenticated.value) {
|
||||
sessionRestored.value = true
|
||||
return
|
||||
}
|
||||
try {
|
||||
await loadSessionContext()
|
||||
} catch (error) {
|
||||
if (isExpiredSessionError(error)) {
|
||||
clearSession()
|
||||
throw error
|
||||
}
|
||||
sessionRestored.value = true
|
||||
return
|
||||
}
|
||||
sessionRestored.value = true
|
||||
}
|
||||
|
||||
async function login(username: string, password: string, remember = false) {
|
||||
const tokens = await loginMerchant(username, password)
|
||||
const decoded = decodeMerchantToken(tokens.accessToken)
|
||||
persistTokenPair(tokens, remember)
|
||||
token.value = tokens.accessToken
|
||||
payload.value = decoded
|
||||
user.value = currentUser(decoded)
|
||||
profile.value = { ...emptyProfile, username: decoded.username, realName: decoded.username }
|
||||
permissionCodes.value = mapPermissions(decoded)
|
||||
sessionRestored.value = false
|
||||
try {
|
||||
await loadSessionContext()
|
||||
sessionRestored.value = true
|
||||
} catch (error) {
|
||||
if (isExpiredSessionError(error)) {
|
||||
clearSession()
|
||||
throw error
|
||||
}
|
||||
sessionRestored.value = true
|
||||
}
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
const refreshToken = getRefreshToken()
|
||||
try {
|
||||
if (refreshToken) await logoutMerchant(refreshToken)
|
||||
} finally {
|
||||
clearSession()
|
||||
}
|
||||
}
|
||||
|
||||
function hasPermission(permission?: string) {
|
||||
return !permission || permissionCodes.value.includes(permission)
|
||||
}
|
||||
|
||||
function updateProfile(next: Pick<ClientAccountProfile, 'realName' | 'phone' | 'email'>) {
|
||||
profile.value = { ...profile.value, ...structuredClone(next) }
|
||||
if (user.value) user.value = { ...user.value, name: next.realName }
|
||||
}
|
||||
|
||||
async function savePersonalProfile(next: Pick<ClientAccountProfile, 'realName' | 'phone' | 'email'>) {
|
||||
const updated = await updateMerchantPersonalProfile({
|
||||
displayName: next.realName.trim(),
|
||||
phone: next.phone.trim(),
|
||||
email: next.email.trim(),
|
||||
})
|
||||
updateProfile({
|
||||
realName: updated.displayName,
|
||||
phone: updated.phone || '',
|
||||
email: updated.email || '',
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener('cc-client-session-expired', clearSession)
|
||||
|
||||
return { token, user, profile, permissionCodes, isAuthenticated, sessionRestored, hasPermission, login, logout, restoreSession, updateProfile, savePersonalProfile }
|
||||
})
|
||||
@@ -0,0 +1,31 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import test from 'node:test'
|
||||
import { decodeMerchantToken } from './jwt.ts'
|
||||
|
||||
function tokenFor(payload) {
|
||||
const encoded = Buffer.from(JSON.stringify(payload)).toString('base64url')
|
||||
return `header.${encoded}.signature`
|
||||
}
|
||||
|
||||
const payload = {
|
||||
user_id: 1001,
|
||||
username: 'merchant_admin',
|
||||
tenant_id: 2001,
|
||||
membership_id: 3001,
|
||||
app_code: 'MERCHANT',
|
||||
roles: ['MERCHANT_OWNER'],
|
||||
permissions: ['merchant:profile:view'],
|
||||
exp: 1900000000,
|
||||
}
|
||||
|
||||
test('decodes a merchant JWT payload for UI identity and permissions', () => {
|
||||
assert.deepEqual(decodeMerchantToken(tokenFor(payload)), payload)
|
||||
})
|
||||
|
||||
test('rejects tokens from the platform application domain', () => {
|
||||
assert.throws(() => decodeMerchantToken(tokenFor({ ...payload, app_code: 'PLATFORM' })), /账号不属于当前应用端/)
|
||||
})
|
||||
|
||||
test('rejects malformed tokens', () => {
|
||||
assert.throws(() => decodeMerchantToken('not-a-jwt'), /登录凭证格式无效/)
|
||||
})
|
||||
@@ -0,0 +1,37 @@
|
||||
export interface MerchantJwtPayload {
|
||||
user_id: number | string
|
||||
username: string
|
||||
tenant_id: number | string
|
||||
operator_tenant_id?: number | string
|
||||
membership_id: number | string
|
||||
app_code: string
|
||||
client_type?: string
|
||||
roles?: string[]
|
||||
permissions?: string[]
|
||||
exp: number
|
||||
}
|
||||
|
||||
function decodeBase64Url(value: string) {
|
||||
const normalized = value.replace(/-/g, '+').replace(/_/g, '/')
|
||||
const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, '=')
|
||||
const binary = atob(padded)
|
||||
const bytes = Uint8Array.from(binary, (character) => character.charCodeAt(0))
|
||||
return new TextDecoder().decode(bytes)
|
||||
}
|
||||
|
||||
export function decodeMerchantToken(token: string): MerchantJwtPayload {
|
||||
const payloadPart = token.split('.')[1]
|
||||
if (!payloadPart) throw new Error('登录凭证格式无效')
|
||||
|
||||
try {
|
||||
const value: unknown = JSON.parse(decodeBase64Url(payloadPart))
|
||||
if (!value || typeof value !== 'object') throw new Error()
|
||||
const payload = value as Partial<MerchantJwtPayload>
|
||||
if (!payload.user_id || !payload.username || !payload.tenant_id || !payload.membership_id || !payload.exp) throw new Error()
|
||||
if (payload.app_code !== 'MERCHANT') throw new Error('账号不属于当前应用端')
|
||||
return payload as MerchantJwtPayload
|
||||
} catch (error) {
|
||||
if (error instanceof Error && error.message === '账号不属于当前应用端') throw error
|
||||
throw new Error('登录凭证无法解析，请重新登录')
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import test from 'node:test'
|
||||
|
||||
const loginSource = readFileSync(new URL('./LoginView.vue', import.meta.url), 'utf8')
|
||||
const registerSource = readFileSync(new URL('./RegisterView.vue', import.meta.url), 'utf8')
|
||||
const authStoreSource = readFileSync(new URL('../stores/auth.ts', import.meta.url), 'utf8')
|
||||
const httpSource = readFileSync(new URL('../api/http.ts', import.meta.url), 'utf8')
|
||||
const sessionSource = readFileSync(new URL('../api/session.ts', import.meta.url), 'utf8')
|
||||
const authApiSource = readFileSync(new URL('../api/auth.ts', import.meta.url), 'utf8')
|
||||
const mainSource = readFileSync(new URL('../main.ts', import.meta.url), 'utf8')
|
||||
|
||||
test('matches the backend username login contract', () => {
|
||||
assert.match(loginSource, /label="用户名"/)
|
||||
assert.match(loginSource, /\^\[A-Za-z0-9_\]/)
|
||||
assert.match(loginSource, /typeof route\.query\.account === 'string'/)
|
||||
assert.doesNotMatch(loginSource, /developmentHint|demo-tip|merchant_admin|联调账号|本地后端/)
|
||||
assert.match(loginSource, /form\.remember/)
|
||||
assert.match(loginSource, /忘记密码/)
|
||||
})
|
||||
|
||||
test('persists both rotating tokens according to the remember choice', () => {
|
||||
assert.match(sessionSource, /ACCESS_TOKEN_KEY/)
|
||||
assert.match(sessionSource, /REFRESH_TOKEN_KEY/)
|
||||
assert.match(sessionSource, /remember \? localStorage : sessionStorage/)
|
||||
assert.match(sessionSource, /clearSessionTokens/)
|
||||
})
|
||||
|
||||
test('implements every backend registration field and real submission', () => {
|
||||
for (const field of ['username', 'companyName', 'displayName', 'legalPerson', 'legalPhone', 'contactEmail', 'countryCode', 'address', 'password', 'agreement']) {
|
||||
assert.match(registerSource, new RegExp(`prop="${field}"`))
|
||||
}
|
||||
assert.match(registerSource, /registerMerchant\(/)
|
||||
assert.match(registerSource, /4–64 位/)
|
||||
assert.match(registerSource, /8–72 位/)
|
||||
})
|
||||
|
||||
test('shows immediate login after registration and separates company review from account activation', () => {
|
||||
assert.match(registerSource, /企业账号注册成功/)
|
||||
assert.match(registerSource, /无需等待注册审核/)
|
||||
assert.match(registerSource, /提交订单前还需完成一步/)
|
||||
assert.match(registerSource, /立即登录/)
|
||||
})
|
||||
|
||||
test('uses real auth endpoints and single-flight refresh handling', () => {
|
||||
assert.match(authApiSource, /\/auth\/login/)
|
||||
assert.match(authApiSource, /\/auth\/register/)
|
||||
assert.match(authApiSource, /\/auth\/logout/)
|
||||
assert.match(httpSource, /refreshPromise/)
|
||||
assert.match(httpSource, /\/auth\/refresh/)
|
||||
assert.match(httpSource, /envelope\.code !== '200'/)
|
||||
assert.match(httpSource, /redirectToLoginAfterSessionExpiry/)
|
||||
assert.match(httpSource, /window\.location\.replace\(`\/login\?redirect=\$\{encodeURIComponent\(redirect\)\}`\)/)
|
||||
assert.match(authStoreSource, /decodeMerchantToken/)
|
||||
assert.doesNotMatch(authStoreSource, /mock-client:/)
|
||||
})
|
||||
|
||||
test('treats only body code 200 as success', () => {
|
||||
assert.match(httpSource, /if \(envelope\.code !== '200'\)/)
|
||||
assert.doesNotMatch(httpSource, /if \(envelope\.code !== '0'\)/)
|
||||
})
|
||||
|
||||
test('keeps a valid local session during temporary context and refresh outages', () => {
|
||||
assert.match(authStoreSource, /function isExpiredSessionError/)
|
||||
assert.match(authStoreSource, /if \(isExpiredSessionError\(error\)\)/)
|
||||
assert.match(authStoreSource, /sessionRestored\.value = true\s+return/)
|
||||
assert.match(httpSource, /if \(mappedError\.status === 401 \|\| mappedError\.code === 'A0401'\)/)
|
||||
assert.doesNotMatch(httpSource, /catch \(refreshError\) \{\s+clearSessionTokens\(\)/)
|
||||
})
|
||||
|
||||
test('loads styles for programmatic Element Plus messages and dialogs', () => {
|
||||
assert.match(mainSource, /element-plus\/es\/components\/message\/style\/css/)
|
||||
assert.match(mainSource, /element-plus\/es\/components\/message-box\/style\/css/)
|
||||
})
|
||||
@@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { ArrowRight, LockKeyhole, UserRound } from '@lucide/vue'
|
||||
import baiyueLogoDark from '@/assets/brand/baiyue-logo-dark.png'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
interface LoginForm {
|
||||
account: string
|
||||
password: string
|
||||
remember: boolean
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const formRef = ref<FormInstance>()
|
||||
const loading = ref(false)
|
||||
const form = reactive<LoginForm>({
|
||||
account: typeof route.query.account === 'string'
|
||||
? route.query.account
|
||||
: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
})
|
||||
const accountPattern = /^[A-Za-z0-9_]{4,64}$/
|
||||
|
||||
const rules: FormRules<LoginForm> = {
|
||||
account: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ pattern: accountPattern, message: '用户名为 4–64 位字母、数字或下划线', trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 8, max: 72, message: '密码长度应为 8–72 位', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!formRef.value || loading.value) return
|
||||
const valid = await formRef.value.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
await auth.login(form.account.trim(), form.password, form.remember)
|
||||
ElMessage.success('登录成功')
|
||||
await router.replace(String(route.query.redirect || '/'))
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '登录失败，请检查账号后重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function showResetHint() {
|
||||
ElMessage.info('请联系平台客服重置密码')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-page">
|
||||
<header class="auth-header">
|
||||
<RouterLink to="/login" class="auth-brand"><img class="auth-brand-logo" :src="baiyueLogoDark" alt="柏悦物流" /></RouterLink>
|
||||
<div>还没有企业账号？ <RouterLink to="/register">申请入驻</RouterLink></div>
|
||||
</header>
|
||||
<main class="auth-main">
|
||||
<section class="auth-copy">
|
||||
<h1>跨境物流业务<br />一个工作台完成</h1>
|
||||
<p>从企业成员协作到头程订单跟进，统一管理业务与权限。</p>
|
||||
<div class="auth-facts"><span>企业级权限</span><span>订单全程跟进</span><span>多端业务协同</span></div>
|
||||
</section>
|
||||
<section class="auth-card" aria-labelledby="login-title">
|
||||
<h2 id="login-title">登录客户工作台</h2>
|
||||
<p>企业注册成功后即可登录；提交订单前需完成企业资料审核</p>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" size="large" @submit.prevent="submit">
|
||||
<el-form-item label="用户名" prop="account">
|
||||
<el-input v-model="form.account" autocomplete="username" maxlength="64" placeholder="请输入用户名" :prefix-icon="UserRound" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="form.password" autocomplete="current-password" maxlength="72" type="password" show-password placeholder="请输入 8–72 位密码" :prefix-icon="LockKeyhole" @keyup.enter="submit" />
|
||||
</el-form-item>
|
||||
<div class="auth-form-options">
|
||||
<el-checkbox v-model="form.remember">记住我</el-checkbox>
|
||||
<button type="button" @click="showResetHint">忘记密码？</button>
|
||||
</div>
|
||||
<el-button native-type="submit" class="auth-submit" type="primary" :loading="loading">登录 <ArrowRight :size="17" /></el-button>
|
||||
</el-form>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,137 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { ArrowLeft, Building2, CheckCircle2, Mail, Phone } from '@lucide/vue'
|
||||
import baiyueLogoDark from '@/assets/brand/baiyue-logo-dark.png'
|
||||
import { registerMerchant } from '@/api/auth'
|
||||
|
||||
interface RegisterForm {
|
||||
username: string
|
||||
companyName: string
|
||||
displayName: string
|
||||
legalPerson: string
|
||||
legalPhone: string
|
||||
contactEmail: string
|
||||
countryCode: string
|
||||
address: string
|
||||
password: string
|
||||
agreement: boolean
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const formRef = ref<FormInstance>()
|
||||
const submitting = ref(false)
|
||||
const submitted = ref(false)
|
||||
const submittedAt = ref('')
|
||||
const form = reactive<RegisterForm>({ username: '', companyName: '', displayName: '', legalPerson: '', legalPhone: '', contactEmail: '', countryCode: 'CN', address: '', password: '', agreement: false })
|
||||
|
||||
const rules: FormRules<RegisterForm> = {
|
||||
username: [
|
||||
{ required: true, message: '请输入登录用户名', trigger: 'blur' },
|
||||
{ pattern: /^[A-Za-z0-9_]{4,64}$/, message: '用户名为 4–64 位字母、数字或下划线', trigger: 'blur' },
|
||||
],
|
||||
companyName: [
|
||||
{ required: true, message: '请输入企业名称', trigger: 'blur' },
|
||||
{ min: 2, max: 100, message: '企业名称长度应为 2–100 个字符', trigger: 'blur' },
|
||||
],
|
||||
displayName: [
|
||||
{ required: true, message: '请输入联系人姓名', trigger: 'blur' },
|
||||
{ max: 64, message: '联系人姓名最多 64 个字符', trigger: 'blur' },
|
||||
],
|
||||
legalPerson: [
|
||||
{ required: true, message: '请输入法定代表人', trigger: 'blur' },
|
||||
{ max: 64, message: '法定代表人最多 64 个字符', trigger: 'blur' },
|
||||
],
|
||||
contactEmail: [
|
||||
{ type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
|
||||
],
|
||||
legalPhone: [
|
||||
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
||||
{ pattern: /^1\d{10}$/, message: '请输入有效的 11 位手机号', trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请设置登录密码', trigger: 'blur' },
|
||||
{ min: 8, max: 72, message: '密码长度应为 8–72 位', trigger: 'blur' },
|
||||
],
|
||||
agreement: [{ validator: (_rule, value, callback) => value ? callback() : callback(new Error('请先阅读并同意服务协议和隐私政策')), trigger: 'change' }],
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!formRef.value || submitting.value) return
|
||||
const valid = await formRef.value.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
await registerMerchant({
|
||||
username: form.username.trim(),
|
||||
password: form.password,
|
||||
displayName: form.displayName.trim(),
|
||||
companyName: form.companyName.trim(),
|
||||
legalPerson: form.legalPerson.trim(),
|
||||
legalPhone: form.legalPhone.trim(),
|
||||
contactEmail: form.contactEmail.trim() || undefined,
|
||||
countryCode: form.countryCode,
|
||||
address: form.address.trim() || undefined,
|
||||
})
|
||||
submittedAt.value = new Intl.DateTimeFormat('zh-CN', {
|
||||
year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false,
|
||||
}).format(new Date())
|
||||
submitted.value = true
|
||||
ElMessage.success('企业账号注册成功')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '注册失败，请检查信息后重试')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function showDocument(name: string) {
|
||||
ElMessage.info(`${name}将在正式接入前由业务方确认内容`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="register-page">
|
||||
<header class="register-header">
|
||||
<RouterLink to="/login"><ArrowLeft :size="18" /> 返回登录</RouterLink>
|
||||
<div class="auth-brand"><img class="auth-brand-logo" :src="baiyueLogoDark" alt="柏悦物流" /></div>
|
||||
</header>
|
||||
<main class="register-main">
|
||||
<template v-if="!submitted">
|
||||
<div class="register-title"><div><Building2 :size="22" /></div><span><h1>企业注册</h1><p>注册成功后即可登录并使用客户工作台，提交订单前需完成企业资料审核。</p></span></div>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" class="register-form" label-position="top" size="large" @submit.prevent="submit">
|
||||
<div class="form-grid">
|
||||
<el-form-item label="登录用户名" prop="username" required><el-input v-model="form.username" autocomplete="username" maxlength="64" placeholder="4–64 位字母、数字或下划线" /></el-form-item>
|
||||
<el-form-item label="企业名称" prop="companyName" required><el-input v-model="form.companyName" maxlength="100" placeholder="请输入企业营业执照上的名称" /></el-form-item>
|
||||
<el-form-item label="联系人" prop="displayName" required><el-input v-model="form.displayName" maxlength="64" placeholder="请输入联系人姓名" /></el-form-item>
|
||||
<el-form-item label="法定代表人" prop="legalPerson" required><el-input v-model="form.legalPerson" maxlength="64" placeholder="请输入营业执照法定代表人" /></el-form-item>
|
||||
<el-form-item label="法人手机号" prop="legalPhone" required><el-input v-model="form.legalPhone" type="tel" autocomplete="tel" inputmode="numeric" maxlength="11" placeholder="请输入手机号" :prefix-icon="Phone" /></el-form-item>
|
||||
<el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" type="email" autocomplete="email" maxlength="128" placeholder="选填，用于接收业务通知" :prefix-icon="Mail" /></el-form-item>
|
||||
<el-form-item label="国家/地区" prop="countryCode"><el-select v-model="form.countryCode"><el-option label="中国大陆（CN）" value="CN" /></el-select></el-form-item>
|
||||
<el-form-item label="企业地址" prop="address" class="full-row"><el-input v-model="form.address" maxlength="255" placeholder="选填，最多 255 个字符" /></el-form-item>
|
||||
<el-form-item label="登录密码" prop="password" required><el-input v-model="form.password" type="password" autocomplete="new-password" maxlength="72" show-password placeholder="请设置 8–72 位密码" /></el-form-item>
|
||||
</div>
|
||||
<el-form-item prop="agreement" class="agreement-item">
|
||||
<div class="agreement-control">
|
||||
<el-checkbox v-model="form.agreement"><span class="agreement-required" aria-hidden="true">*</span>我已阅读并同意</el-checkbox>
|
||||
<span><button type="button" @click="showDocument('《用户服务协议》')">《用户服务协议》</button> 和 <button type="button" @click="showDocument('《隐私政策》')">《隐私政策》</button></span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<p class="register-security-note">注册成功后账号可立即登录；首次登录需上传营业执照并等待平台审核，审核通过后才能提交订单。</p>
|
||||
<div class="register-actions"><el-button @click="$router.push('/login')">取消</el-button><el-button native-type="submit" type="primary" :loading="submitting">注册企业账号</el-button></div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<section v-else class="registration-result" aria-live="polite">
|
||||
<CheckCircle2 :size="42" />
|
||||
<h1>企业账号注册成功</h1>
|
||||
<p><strong>{{ form.username }}</strong> 现在可以直接登录客户工作台，无需等待注册审核。</p>
|
||||
<dl><div><dt>企业名称</dt><dd>{{ form.companyName }}</dd></div><div><dt>登录账号</dt><dd>{{ form.username }}</dd></div><div><dt>注册时间</dt><dd>{{ submittedAt }}</dd></div><div><dt>账号状态</dt><dd><el-tag type="success" effect="light">可登录</el-tag></dd></div></dl>
|
||||
<div class="registration-next-step" role="note"><strong>提交订单前还需完成一步</strong><span>登录后请在“企业资料”补充公司和资质信息，等待平台人工审核通过。审核期间仍可维护资料、成员和订单草稿。</span></div>
|
||||
<div class="registration-result-actions"><el-button type="primary" @click="router.push({ path: '/login', query: { account: form.username } })">立即登录</el-button></div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="美国本土卡" description="创建美国本土卡车运输订单" /></template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="美本土散板" description="创建美国本土散板运输订单" /></template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="海外采购" description="管理海外采购订单" /></template>
|
||||
@@ -0,0 +1,26 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import test from 'node:test'
|
||||
|
||||
const source = readFileSync(new URL('./DashboardView.vue', import.meta.url), 'utf8')
|
||||
|
||||
test('loads real dashboard data allowed by the current permissions', () => {
|
||||
assert.match(source, /auth\.hasPermission\('company:profile:view'\).*tenant\.loadCompanyContext\(\)/)
|
||||
assert.match(source, /auth\.hasPermission\('company:member:list'\).*tenant\.loadMembers\(\)/)
|
||||
assert.match(source, /auth\.hasPermission\('order:first-leg:list'\).*orders\.load\(\)/)
|
||||
assert.match(source, /onMounted\(\(\) => void loadDashboardData\(\)\)/)
|
||||
})
|
||||
|
||||
test('isolates recoverable dashboard failures without hiding successful sections', () => {
|
||||
assert.match(source, /Promise\.allSettled/)
|
||||
assert.match(source, /Partial<Record<DashboardDataSource, string>>/)
|
||||
assert.match(source, /:aria-busy="loading"/)
|
||||
assert.match(source, /role="alert"/)
|
||||
assert.match(source, /部分业务数据加载失败/)
|
||||
assert.match(source, /ordersUnavailable/)
|
||||
assert.match(source, /companyUnavailable/)
|
||||
assert.match(source, /订单数据暂不可用，请重新加载后查看。/)
|
||||
assert.match(source, /企业资料暂不可用，请重新加载后查看。/)
|
||||
assert.match(source, /@click="loadDashboardData"/)
|
||||
assert.doesNotMatch(source, /<template v-else>\s*<section class="quick-order-band">/)
|
||||
})
|
||||
@@ -0,0 +1,121 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { AlertTriangle, ArrowRight, ClipboardCheck, Clock3, FilePlus2, Users } from '@lucide/vue'
|
||||
import { useFirstLegOrdersStore } from '@/stores/firstLegOrders'
|
||||
import { useTenantAdministrationStore } from '@/stores/tenantAdministration'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { getFirstLegStatusLabel, getFirstLegStatusTone } from '@/utils/firstLegOrder'
|
||||
|
||||
const orders = useFirstLegOrdersStore()
|
||||
const tenant = useTenantAdministrationStore()
|
||||
const auth = useAuthStore()
|
||||
const loading = ref(false)
|
||||
type DashboardDataSource = 'company' | 'members' | 'orders'
|
||||
const loadErrors = ref<Partial<Record<DashboardDataSource, string>>>({})
|
||||
const dataSourceLabels: Record<DashboardDataSource, string> = {
|
||||
company: '企业资料',
|
||||
members: '企业成员',
|
||||
orders: '头程订单',
|
||||
}
|
||||
const companyApproved = computed(() => tenant.company.auditStatus === 'ACTIVE')
|
||||
const companyUnavailable = computed(() => Boolean(loadErrors.value.company))
|
||||
const membersUnavailable = computed(() => Boolean(loadErrors.value.members))
|
||||
const ordersUnavailable = computed(() => Boolean(loadErrors.value.orders))
|
||||
const loadErrorItems = computed(() =>
|
||||
(Object.keys(loadErrors.value) as DashboardDataSource[]).map((key) => ({
|
||||
key,
|
||||
label: dataSourceLabels[key],
|
||||
message: loadErrors.value[key] ?? '请求失败',
|
||||
})),
|
||||
)
|
||||
const stats = computed(() => [
|
||||
...(auth.hasPermission('order:first-leg:list')
|
||||
? [
|
||||
{ label: '进行中订单', value: ordersUnavailable.value ? '—' : String(orders.activeCount), icon: Clock3 },
|
||||
{ label: '待平台审核', value: ordersUnavailable.value ? '—' : String(orders.pendingCount), icon: ClipboardCheck },
|
||||
]
|
||||
: []),
|
||||
...(auth.hasPermission('company:member:list')
|
||||
? [{ label: '企业成员', value: membersUnavailable.value ? '—' : String(tenant.activeMemberCount), icon: Users }]
|
||||
: []),
|
||||
])
|
||||
const recentOrders = computed(() => orders.orders.slice(0, 3))
|
||||
|
||||
function errorMessage(error: unknown) {
|
||||
return error instanceof Error ? error.message : '请求失败，请稍后重试'
|
||||
}
|
||||
|
||||
async function loadDashboardData() {
|
||||
loading.value = true
|
||||
loadErrors.value = {}
|
||||
const requests: Array<{ source: DashboardDataSource; request: Promise<unknown> }> = []
|
||||
if (auth.hasPermission('company:profile:view')) requests.push({ source: 'company', request: tenant.loadCompanyContext() })
|
||||
if (auth.hasPermission('company:member:list')) requests.push({ source: 'members', request: tenant.loadMembers() })
|
||||
if (auth.hasPermission('order:first-leg:list')) requests.push({ source: 'orders', request: orders.load() })
|
||||
try {
|
||||
const results = await Promise.allSettled(requests.map(({ request }) => request))
|
||||
const nextErrors: Partial<Record<DashboardDataSource, string>> = {}
|
||||
results.forEach((result, index) => {
|
||||
const request = requests[index]
|
||||
if (request && result.status === 'rejected') nextErrors[request.source] = errorMessage(result.reason)
|
||||
})
|
||||
loadErrors.value = nextErrors
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => void loadDashboardData())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="loading" class="client-dashboard" :aria-busy="loading">
|
||||
<div v-if="loadErrorItems.length" class="dashboard-load-error" role="alert">
|
||||
<AlertTriangle :size="20" />
|
||||
<div>
|
||||
<strong>部分业务数据加载失败</strong>
|
||||
<ul>
|
||||
<li v-for="item in loadErrorItems" :key="item.key">
|
||||
<span>{{ item.label }}：</span>{{ item.message }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<el-button :loading="loading" @click="loadDashboardData">重新加载</el-button>
|
||||
</div>
|
||||
<section class="quick-order-band">
|
||||
<div>
|
||||
<span>头程物流</span>
|
||||
<h2>{{ auth.hasPermission('order:first-leg:create') ? '创建新的头程订单' : '跟进企业头程订单' }}</h2>
|
||||
<p v-if="companyUnavailable">企业资料暂不可用，恢复后可查看下单资格。</p>
|
||||
<p v-else>{{ companyApproved ? '企业资料已审核，可正常提交并跟进订单。' : '企业资料待平台审核，当前可以维护并保存订单草稿。' }}</p>
|
||||
</div>
|
||||
<el-button v-if="auth.hasPermission('order:first-leg:list')" type="primary" size="large" @click="$router.push('/orders/first-leg')"><FilePlus2 :size="18" /> {{ auth.hasPermission('order:first-leg:create') ? '开始下单' : '查看订单' }}</el-button>
|
||||
</section>
|
||||
<section v-if="stats.length" class="client-stats">
|
||||
<article v-for="item in stats" :key="item.label"><component :is="item.icon" :size="20" /><div><span>{{ item.label }}</span><strong>{{ item.value }}</strong></div></article>
|
||||
</section>
|
||||
<section class="client-content-grid">
|
||||
<article v-if="auth.hasPermission('order:first-leg:list')" class="client-card">
|
||||
<header><div><span class="section-label">ORDERS</span><h3>最近订单</h3></div><el-button text @click="$router.push('/orders/first-leg')">查看全部 <ArrowRight :size="16" /></el-button></header>
|
||||
<div v-if="ordersUnavailable" class="dashboard-section-error" role="status">订单数据暂不可用，请重新加载后查看。</div>
|
||||
<div v-else-if="recentOrders.length" class="recent-orders"><button v-for="order in recentOrders" :key="order.id" type="button" @click="$router.push('/orders/first-leg')"><span><strong>{{ order.orderNo || '未提交草稿' }}</strong><small>{{ order.origin }} → {{ order.destination }}</small></span><el-tag :type="getFirstLegStatusTone(order.status)" effect="light">{{ getFirstLegStatusLabel(order.status) }}</el-tag></button></div>
|
||||
<div v-else class="client-empty">暂无订单，提交第一笔头程订单后将在这里展示。</div>
|
||||
</article>
|
||||
<article v-if="auth.hasPermission('company:profile:view')" class="client-card">
|
||||
<header><div><span class="section-label">ACCOUNT</span><h3>企业资料</h3></div></header>
|
||||
<div v-if="companyUnavailable" class="dashboard-section-error" role="status">企业资料暂不可用，请重新加载后查看。</div>
|
||||
<template v-else>
|
||||
<dl class="profile-summary"><div><dt>企业名称</dt><dd>{{ tenant.company.companyName || '-' }}</dd></div><div><dt>审核状态</dt><dd><el-tag :type="companyApproved ? 'success' : 'warning'" effect="light">{{ companyApproved ? '已通过' : '待审核' }}</el-tag></dd></div><div><dt>当前成员</dt><dd>{{ auth.user?.name }}</dd></div></dl>
|
||||
<el-button plain @click="$router.push('/company/profile')">{{ companyApproved ? '查看企业资料' : '完善企业资料' }}</el-button>
|
||||
</template>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard-load-error ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
|
||||
.dashboard-load-error li { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.5; }
|
||||
.dashboard-load-error li span { color: #9a5a09; font-weight: 650; }
|
||||
.dashboard-section-error { display: grid; min-height: 160px; place-items: center; padding: 24px; border-top: 1px solid var(--border); color: #8a5a22; font-size: 13px; line-height: 1.6; text-align: center; }
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="应付账单" description="查询企业应付账单" /></template>
|
||||
@@ -0,0 +1,229 @@
|
||||
import { apiRequest } from '@/api/http'
|
||||
|
||||
export type ApiFirstLegStatus = 'DRAFT' | 'SUBMITTED' | 'APPROVED' | 'ACCEPTED' | 'REJECTED' | 'CANCELLED' | 'PROCESSING' | 'COMPLETED'
|
||||
export type ApiTransportMode = 'SEA' | 'AIR' | 'RAIL' | 'TRUCK'
|
||||
export type ApiPickupMethod = 'SELF_EXPRESS' | 'PICKUP' | 'SELF_TRUCK'
|
||||
export type ApiTaxMode = 'BUY_DECLARATION' | 'TAX_REFUND'
|
||||
export type ApiContainerMode = 'FULL_CONTAINER' | 'LCL'
|
||||
export type ApiDestinationType = 'FBA' | 'OVERSEAS' | 'PRIVATE'
|
||||
|
||||
export interface PageResult<T> {
|
||||
records: T[]
|
||||
page: number
|
||||
size: number
|
||||
total: number
|
||||
pages: number
|
||||
}
|
||||
|
||||
export interface MerchantWarehouse {
|
||||
id: number | string
|
||||
warehouseCode: string
|
||||
warehouseName: string
|
||||
warehouseType: string
|
||||
countryCode: string
|
||||
timezone: string | null
|
||||
contactName: string | null
|
||||
contactPhone: string | null
|
||||
contactEmail: string | null
|
||||
status: 'ACTIVE' | 'INACTIVE'
|
||||
remark: string | null
|
||||
updatedAt: string | null
|
||||
}
|
||||
|
||||
export interface MerchantWarehouseAddress {
|
||||
countryCode: string
|
||||
stateProvince: string | null
|
||||
city: string | null
|
||||
district: string | null
|
||||
postalCode: string | null
|
||||
addressLine1: string
|
||||
addressLine2: string | null
|
||||
}
|
||||
|
||||
export interface MerchantWarehouseCapability {
|
||||
capabilityCode: string
|
||||
capabilityName: string
|
||||
enabled: boolean
|
||||
cutoffTime: string | null
|
||||
description: string | null
|
||||
}
|
||||
|
||||
export interface MerchantWarehouseDetail {
|
||||
warehouse: MerchantWarehouse
|
||||
addresses: MerchantWarehouseAddress[]
|
||||
capabilities: MerchantWarehouseCapability[]
|
||||
}
|
||||
|
||||
export interface FirstLegOrderPartyPayload {
|
||||
companyName: string
|
||||
contactName: string
|
||||
phone: string
|
||||
email?: string
|
||||
countryCode: string
|
||||
province?: string
|
||||
city: string
|
||||
district?: string
|
||||
addressLine: string
|
||||
postalCode?: string
|
||||
}
|
||||
|
||||
export interface FirstLegOrderCargoPayload {
|
||||
cargoName: string
|
||||
hsCode?: string
|
||||
packageType: string
|
||||
packageCount: number
|
||||
grossWeightKg: number
|
||||
volumeCbm: number
|
||||
declaredValue?: number
|
||||
currency?: string
|
||||
dangerousGoods?: boolean
|
||||
cargoRemark?: string
|
||||
skuNo?: string
|
||||
upcNo?: string
|
||||
cargoNameEn?: string
|
||||
totalQuantity?: number
|
||||
netWeightKg?: number
|
||||
}
|
||||
|
||||
export interface FirstLegOrderSaveRequest {
|
||||
customerId?: number | string
|
||||
customerName: string
|
||||
transportMode: ApiTransportMode
|
||||
tradeTerm?: string
|
||||
destinationCountryCode: string
|
||||
destinationWarehouseId?: number | string
|
||||
destinationWarehouseName: string
|
||||
expectedShipDate?: string
|
||||
customerRemark?: string
|
||||
sender: FirstLegOrderPartyPayload
|
||||
receiver: FirstLegOrderPartyPayload
|
||||
cargoes: FirstLegOrderCargoPayload[]
|
||||
pickupMethod: ApiPickupMethod
|
||||
receivingWarehouseId: number | string
|
||||
receivingWarehouseName: string
|
||||
receivingWarehouseAddress?: string | null
|
||||
receivingTime?: string | null
|
||||
channelCode: string
|
||||
channelName: string
|
||||
taxMode: ApiTaxMode
|
||||
containerMode?: ApiContainerMode
|
||||
customsInspection: boolean
|
||||
destinationType: ApiDestinationType
|
||||
amazonWarehouseCode?: string
|
||||
shipmentId?: string
|
||||
referenceId?: string
|
||||
}
|
||||
|
||||
export interface MerchantFirstLegOrder {
|
||||
id: number | string
|
||||
orderNo: string | null
|
||||
customerId: number | string | null
|
||||
customerName: string
|
||||
status: ApiFirstLegStatus
|
||||
transportMode: ApiTransportMode
|
||||
tradeTerm: string | null
|
||||
destinationCountryCode: string
|
||||
destinationWarehouseId: number | string | null
|
||||
destinationWarehouseName: string
|
||||
expectedShipDate: string | null
|
||||
customerRemark: string | null
|
||||
pickupMethod: ApiPickupMethod
|
||||
receivingWarehouseId: number | string
|
||||
receivingWarehouseName: string
|
||||
receivingWarehouseAddress?: string | null
|
||||
channelCode: string
|
||||
channelName: string
|
||||
taxMode: ApiTaxMode
|
||||
containerMode: ApiContainerMode | null
|
||||
customsInspection: boolean
|
||||
destinationType: ApiDestinationType
|
||||
amazonWarehouseCode: string | null
|
||||
shipmentId: string | null
|
||||
referenceId: string | null
|
||||
expressCompany?: string | null
|
||||
expressTrackingNo?: string | null
|
||||
version: number
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface MerchantFirstLegOrderCargo extends FirstLegOrderCargoPayload {
|
||||
id: number | string
|
||||
itemNo: number
|
||||
}
|
||||
|
||||
export interface MerchantFirstLegOrderParty extends FirstLegOrderPartyPayload {
|
||||
id: number | string
|
||||
partyType: 'SENDER' | 'RECEIVER' | string
|
||||
}
|
||||
|
||||
export interface MerchantOrderStatusHistory {
|
||||
id: number | string
|
||||
fromStatus: ApiFirstLegStatus | null
|
||||
toStatus: ApiFirstLegStatus
|
||||
action: string
|
||||
reason: string | null
|
||||
operatorName: string | null
|
||||
occurredAt: string
|
||||
}
|
||||
|
||||
export interface MerchantFirstLegOrderDetail {
|
||||
order: MerchantFirstLegOrder
|
||||
cargoes: MerchantFirstLegOrderCargo[]
|
||||
parties: MerchantFirstLegOrderParty[]
|
||||
internalNotes: []
|
||||
statusHistory: MerchantOrderStatusHistory[]
|
||||
}
|
||||
|
||||
export interface FirstLegOrderQuery {
|
||||
keyword?: string
|
||||
status?: ApiFirstLegStatus
|
||||
customerId?: number | string
|
||||
destinationWarehouseId?: number | string
|
||||
createdFrom?: string
|
||||
createdTo?: string
|
||||
page?: number
|
||||
size?: number
|
||||
}
|
||||
|
||||
export function getMerchantWarehouses() {
|
||||
return apiRequest<PageResult<MerchantWarehouse>>({ method: 'GET', url: '/merchant/v1/warehouses', params: { page: 1, size: 200, status: 'ACTIVE' } })
|
||||
}
|
||||
|
||||
export function getMerchantWarehouseDetail(id: number | string) {
|
||||
return apiRequest<MerchantWarehouseDetail>({ method: 'GET', url: `/merchant/v1/warehouses/${id}` })
|
||||
}
|
||||
|
||||
export function getMerchantFirstLegOrders(params: FirstLegOrderQuery = {}) {
|
||||
return apiRequest<PageResult<MerchantFirstLegOrder>>({ method: 'GET', url: '/merchant/v1/orders/first-leg', params: { page: 1, size: 200, ...params } })
|
||||
}
|
||||
|
||||
export function getMerchantFirstLegOrder(id: number | string) {
|
||||
return apiRequest<MerchantFirstLegOrderDetail>({ method: 'GET', url: `/merchant/v1/orders/first-leg/${id}` })
|
||||
}
|
||||
|
||||
export function createMerchantFirstLegOrder(payload: FirstLegOrderSaveRequest) {
|
||||
return apiRequest<number | string>({
|
||||
method: 'POST',
|
||||
url: '/merchant/v1/orders/first-leg',
|
||||
data: payload,
|
||||
headers: { 'Idempotency-Key': createIdempotencyKey('first-leg-create') },
|
||||
})
|
||||
}
|
||||
|
||||
export function updateMerchantFirstLegOrder(id: number | string, payload: FirstLegOrderSaveRequest) {
|
||||
return apiRequest<void>({ method: 'PUT', url: `/merchant/v1/orders/first-leg/${id}`, data: payload })
|
||||
}
|
||||
|
||||
export function submitMerchantFirstLegOrder(id: number | string) {
|
||||
return apiRequest<void>({
|
||||
method: 'POST',
|
||||
url: `/merchant/v1/orders/first-leg/${id}/submit`,
|
||||
headers: { 'Idempotency-Key': createIdempotencyKey(`first-leg-submit-${id}`) },
|
||||
})
|
||||
}
|
||||
|
||||
function createIdempotencyKey(scope: string) {
|
||||
const randomPart = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2)}`
|
||||
return `${scope}-${randomPart}`
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { apiRequest } from '@/api/http'
|
||||
|
||||
export type MerchantPartnerType = 'CUSTOMER' | 'SUPPLIER' | 'CARRIER' | 'CUSTOMS_BROKER' | 'SHIPPER' | 'CONSIGNEE'
|
||||
|
||||
export interface MerchantPartner {
|
||||
id: number | string
|
||||
partnerCode: string
|
||||
partnerName: string
|
||||
partnerType: MerchantPartnerType | 'BOTH' | string
|
||||
types?: MerchantPartnerType[]
|
||||
contactName: string | null
|
||||
contactPhone: string | null
|
||||
contactEmail: string | null
|
||||
countryCode: string | null
|
||||
province: string | null
|
||||
city: string | null
|
||||
district: string | null
|
||||
addressLine: string | null
|
||||
postalCode: string | null
|
||||
status: 'ACTIVE' | 'INACTIVE' | 'DISABLED' | string
|
||||
}
|
||||
|
||||
export function getMerchantPartnerCandidates(type?: MerchantPartnerType, keyword?: string) {
|
||||
return apiRequest<MerchantPartner[]>({
|
||||
method: 'GET',
|
||||
url: '/merchant/v1/partners/candidates',
|
||||
params: { type, keyword: keyword?.trim() || undefined },
|
||||
})
|
||||
}
|
||||
|
||||
export function getMerchantPartner(id: number | string) {
|
||||
return apiRequest<MerchantPartner>({ method: 'GET', url: `/merchant/v1/partners/${id}` })
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft } from '@lucide/vue'
|
||||
|
||||
defineProps<{
|
||||
modelValue: boolean
|
||||
page: boolean
|
||||
title: string
|
||||
beforeClose: (done: () => void) => void | Promise<void>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
back: []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-if="page" class="first-leg-editor-page">
|
||||
<div class="editor-page-nav">
|
||||
<el-button link type="primary" @click="emit('back')"><ArrowLeft :size="17" />返回订单列表</el-button>
|
||||
<span>可先保存草稿，确认无误后再提交平台审核</span>
|
||||
</div>
|
||||
<div class="editor-page-body"><slot /></div>
|
||||
<footer class="editor-page-footer"><slot name="footer" /></footer>
|
||||
</section>
|
||||
|
||||
<el-drawer
|
||||
v-else
|
||||
class="first-leg-editor"
|
||||
:model-value="modelValue"
|
||||
:title="title"
|
||||
size="1080px"
|
||||
destroy-on-close
|
||||
:before-close="beforeClose"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
>
|
||||
<slot />
|
||||
<template #footer><slot name="footer" /></template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.first-leg-editor-page { min-width: 0; border: 1px solid var(--border); background: #fff; }
|
||||
.editor-page-nav { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 20px; border-bottom: 1px solid var(--border); }
|
||||
.editor-page-nav span { color: var(--muted); font-size: 12px; }
|
||||
.editor-page-body { padding: 22px 24px 30px; }
|
||||
.editor-page-footer { position: sticky; z-index: 3; bottom: 0; display: flex; justify-content: flex-end; padding: 12px 24px; border-top: 1px solid var(--border); background: rgba(255, 255, 255, 0.96); }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.editor-page-nav { align-items: flex-start; flex-direction: column; gap: 2px; padding: 10px 16px; }
|
||||
.editor-page-nav span { padding-left: 1px; line-height: 1.5; }
|
||||
.editor-page-body { padding: 18px 16px 24px; }
|
||||
.editor-page-footer { padding: 10px 16px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.editor-page-footer { position: static; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
export type FirstLegPartyRole = 'SHIPPER' | 'CONSIGNEE'
|
||||
|
||||
export interface FirstLegParty {
|
||||
id: string
|
||||
code: string
|
||||
name: string
|
||||
roles: FirstLegPartyRole[]
|
||||
contactName: string
|
||||
phone: string
|
||||
email: string
|
||||
countryRegion: string
|
||||
province: string
|
||||
city: string
|
||||
postalCode: string
|
||||
address: string
|
||||
status: 'ACTIVE' | 'INACTIVE'
|
||||
}
|
||||
|
||||
export interface FirstLegPartySnapshot extends Omit<FirstLegParty, 'roles' | 'status'> {
|
||||
role: FirstLegPartyRole
|
||||
}
|
||||
|
||||
export function createFirstLegPartySnapshot(party: FirstLegParty, role: FirstLegPartyRole): FirstLegPartySnapshot {
|
||||
return {
|
||||
id: party.id,
|
||||
code: party.code,
|
||||
name: party.name,
|
||||
role,
|
||||
contactName: party.contactName,
|
||||
phone: party.phone,
|
||||
email: party.email,
|
||||
countryRegion: party.countryRegion,
|
||||
province: party.province,
|
||||
city: party.city,
|
||||
postalCode: party.postalCode,
|
||||
address: party.address,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import test from 'node:test'
|
||||
|
||||
const source = readFileSync(new URL('./firstLegPartySource.ts', import.meta.url), 'utf8')
|
||||
const viewSource = readFileSync(new URL('../views/FirstLegOrdersView.vue', import.meta.url), 'utf8')
|
||||
const apiSource = readFileSync(new URL('../api/partners.ts', import.meta.url), 'utf8')
|
||||
|
||||
test('keeps counterparty availability behind a replaceable read-only source', () => {
|
||||
assert.match(source, /export interface FirstLegPartySource/)
|
||||
assert.match(source, /listAvailable\(role/)
|
||||
assert.match(source, /findAvailable\(id, role/)
|
||||
assert.match(source, /async load\(\)/)
|
||||
assert.match(source, /party\.status === 'ACTIVE' && party\.roles\.includes\(role\)/)
|
||||
assert.match(source, /getMerchantPartnerCandidates/)
|
||||
assert.match(source, /partner\.types\?\.length/)
|
||||
assert.match(source, /partner\.types\?\.includes\(role\)/)
|
||||
assert.match(source, /: \['SHIPPER', 'CONSIGNEE'\]/)
|
||||
assert.match(source, /await getMerchantPartnerCandidates\(\)/)
|
||||
assert.doesNotMatch(source, /getMerchantPartnerCandidates\('SENDER'\)|getMerchantPartnerCandidates\('RECEIVER'\)/)
|
||||
assert.match(viewSource, /firstLegPartySource\.listAvailable\('SHIPPER'\)/)
|
||||
assert.match(viewSource, /firstLegPartySource\.listAvailable\('CONSIGNEE'\)/)
|
||||
assert.match(viewSource, /firstLegPartySource\.findAvailable\(id, role\)/)
|
||||
assert.match(viewSource, /firstLegPartySource\.load\(\)/)
|
||||
assert.doesNotMatch(viewSource, /DEMO_FIRST_LEG_PARTIES/)
|
||||
assert.match(apiSource, /url: '\/merchant\/v1\/partners\/candidates'/)
|
||||
assert.match(apiSource, /'CARRIER' \| 'CUSTOMS_BROKER' \| 'SHIPPER' \| 'CONSIGNEE'/)
|
||||
assert.match(apiSource, /types\?: MerchantPartnerType\[\]/)
|
||||
assert.match(apiSource, /url: `\/merchant\/v1\/partners\/\$\{id\}`/)
|
||||
})
|
||||
@@ -0,0 +1,49 @@
|
||||
import { getMerchantPartnerCandidates, type MerchantPartner } from '@/api/partners'
|
||||
import type { FirstLegParty, FirstLegPartyRole } from '@/data/firstLegParties'
|
||||
|
||||
export interface FirstLegPartySource {
|
||||
listAvailable(role: FirstLegPartyRole): readonly FirstLegParty[]
|
||||
findAvailable(id: string, role: FirstLegPartyRole): FirstLegParty | undefined
|
||||
load(): Promise<void>
|
||||
}
|
||||
|
||||
function isAvailableForRole(party: FirstLegParty, role: FirstLegPartyRole) {
|
||||
return party.status === 'ACTIVE' && party.roles.includes(role)
|
||||
}
|
||||
|
||||
const parties: FirstLegParty[] = []
|
||||
|
||||
function mapPartner(partner: MerchantPartner): FirstLegParty {
|
||||
const roles: FirstLegPartyRole[] = partner.types?.length
|
||||
? (['SHIPPER', 'CONSIGNEE'] as FirstLegPartyRole[]).filter((role) => partner.types?.includes(role))
|
||||
: ['SHIPPER', 'CONSIGNEE']
|
||||
return {
|
||||
id: String(partner.id),
|
||||
code: partner.partnerCode,
|
||||
name: partner.partnerName,
|
||||
// 新契约按稳定类型限制订单角色；旧响应无 types 时保持原有兼容行为。
|
||||
roles,
|
||||
contactName: partner.contactName ?? '',
|
||||
phone: partner.contactPhone ?? '',
|
||||
email: partner.contactEmail ?? '',
|
||||
countryRegion: partner.countryCode ?? '',
|
||||
province: partner.province ?? '',
|
||||
city: partner.city ?? '',
|
||||
postalCode: partner.postalCode ?? '',
|
||||
address: [partner.district, partner.addressLine].filter(Boolean).join(''),
|
||||
status: partner.status === 'ACTIVE' ? 'ACTIVE' : 'INACTIVE',
|
||||
}
|
||||
}
|
||||
|
||||
export const firstLegPartySource: FirstLegPartySource = {
|
||||
listAvailable(role) {
|
||||
return parties.filter((party) => isAvailableForRole(party, role))
|
||||
},
|
||||
findAvailable(id, role) {
|
||||
return parties.find((party) => party.id === id && isAvailableForRole(party, role))
|
||||
},
|
||||
async load() {
|
||||
parties.splice(0, parties.length)
|
||||
parties.push(...(await getMerchantPartnerCandidates()).map(mapPartner))
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import test from 'node:test'
|
||||
|
||||
const storeSource = readFileSync(new URL('./firstLegOrders.ts', import.meta.url), 'utf8')
|
||||
const apiSource = readFileSync(new URL('../api/firstLeg.ts', import.meta.url), 'utf8')
|
||||
|
||||
test('declares the documented merchant warehouse and first-leg endpoints', () => {
|
||||
assert.match(apiSource, /url: '\/merchant\/v1\/warehouses'/)
|
||||
assert.match(apiSource, /url: '\/merchant\/v1\/orders\/first-leg'/)
|
||||
assert.match(apiSource, /`\/merchant\/v1\/orders\/first-leg\/\$\{id\}`/)
|
||||
assert.match(apiSource, /`\/merchant\/v1\/orders\/first-leg\/\$\{id\}\/submit`/)
|
||||
assert.match(apiSource, /`\/merchant\/v1\/warehouses\/\$\{id\}`/)
|
||||
})
|
||||
|
||||
test('maps transport and status fields instead of treating container mode as transport mode', () => {
|
||||
assert.match(storeSource, /order\.transportMode === 'SEA'.*order\.containerMode === 'FULL_CONTAINER' \? 'FCL' : 'LCL'/s)
|
||||
assert.match(storeSource, /draft\.transportMode === 'ROAD'\) return 'TRUCK'/)
|
||||
assert.match(storeSource, /status === 'SUBMITTED'\) return 'PENDING_REVIEW'/)
|
||||
assert.match(storeSource, /status === 'REJECTED'\) return 'PENDING_REVIEW'/)
|
||||
assert.match(storeSource, /status === 'PROCESSING'\) return 'IN_TRANSIT'/)
|
||||
})
|
||||
|
||||
test('uses real API data without falling back to demo warehouses or orders', () => {
|
||||
assert.match(storeSource, /orders\.value = \[\]/)
|
||||
assert.match(storeSource, /warehouses\.value = \[\]/)
|
||||
assert.match(storeSource, /Promise\.all\(\[getMerchantFirstLegOrders\(\), getMerchantWarehouses\(\)\]\)/)
|
||||
assert.doesNotMatch(storeSource, /DEMO_PLATFORM_RECEIVING_WAREHOUSES|initialOrders/)
|
||||
})
|
||||
|
||||
test('sends backend-required channel, customs, destination and cargo fields', () => {
|
||||
for (const field of ['pickupMethod', 'channelCode', 'channelName', 'taxMode', 'customsInspection', 'destinationType', 'packageType']) {
|
||||
assert.match(storeSource, new RegExp(field))
|
||||
}
|
||||
assert.match(storeSource, /containerMode: draft\.transportMode === 'FCL' \? 'FULL_CONTAINER'/)
|
||||
assert.match(storeSource, /customerId: draft\.shipperPartyId/)
|
||||
})
|
||||
|
||||
test('does not expose the out-of-scope cancellation write', () => {
|
||||
assert.doesNotMatch(storeSource, /cancelMerchant|function cancel|\/cancel/)
|
||||
assert.doesNotMatch(apiSource, /\/cancel/)
|
||||
})
|
||||
|
||||
test('sends an idempotency key for create and submit writes', () => {
|
||||
assert.match(apiSource, /'Idempotency-Key': createIdempotencyKey\('first-leg-create'\)/)
|
||||
assert.match(apiSource, /'Idempotency-Key': createIdempotencyKey\(`first-leg-submit-\$\{id\}`\)/)
|
||||
})
|
||||
|
||||
test('does not expose the contradictory backend rejected state in the client model', () => {
|
||||
assert.match(storeSource, /status === 'REJECTED'\) return 'PENDING_REVIEW'/)
|
||||
assert.match(storeSource, /item\.toStatus === 'SUBMITTED' \|\| item\.toStatus === 'REJECTED' \? 'SUBMITTED'/)
|
||||
})
|
||||
|
||||
test('maps backend warehouse snapshots and fulfillment courier fields', () => {
|
||||
assert.match(storeSource, /order\.receivingWarehouseAddress/)
|
||||
assert.match(storeSource, /order\.expressCompany \?\? ''/)
|
||||
assert.match(storeSource, /order\.expressTrackingNo \?\? ''/)
|
||||
assert.match(storeSource, /getMerchantWarehouseDetail\(id\)/)
|
||||
assert.match(storeSource, /receivingCapability\.cutoffTime/)
|
||||
})
|
||||
|
||||
test('keeps failed order loads distinct from empty results', () => {
|
||||
assert.match(storeSource, /const loadError = ref\(''\)/)
|
||||
assert.match(storeSource, /loadError\.value = error instanceof Error/)
|
||||
assert.match(storeSource, /return \{ orders, warehouses, loading, loadedFromApi, loadError/)
|
||||
})
|
||||
@@ -0,0 +1,257 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import {
|
||||
createMerchantFirstLegOrder,
|
||||
getMerchantFirstLegOrder,
|
||||
getMerchantFirstLegOrders,
|
||||
getMerchantWarehouseDetail,
|
||||
getMerchantWarehouses,
|
||||
submitMerchantFirstLegOrder,
|
||||
updateMerchantFirstLegOrder,
|
||||
type ApiFirstLegStatus,
|
||||
type FirstLegOrderPartyPayload,
|
||||
type FirstLegOrderSaveRequest,
|
||||
type MerchantFirstLegOrder,
|
||||
type MerchantFirstLegOrderDetail,
|
||||
type MerchantWarehouse,
|
||||
} from '@/api/firstLeg'
|
||||
import type { MerchantTenantStatus } from '@/api/merchantIam'
|
||||
import type { PlatformReceivingWarehouse, PlatformReceivingWarehouseSnapshot } from '@chongchong/shared'
|
||||
import type { FirstLegPartySnapshot } from '@/data/firstLegParties'
|
||||
import type { FirstLegOrder, FirstLegOrderDraft, FirstLegOrderTimelineItem } from '@/types/firstLegOrder'
|
||||
import { canClientEditFirstLegOrder } from '@/utils/firstLegOrder'
|
||||
|
||||
const countryCodes: Readonly<Record<string, string>> = {
|
||||
中国: 'CN', 美国: 'US', 德国: 'DE', 英国: 'GB', 加拿大: 'CA', 日本: 'JP', 澳大利亚: 'AU',
|
||||
}
|
||||
|
||||
function clientStatus(status: ApiFirstLegStatus): FirstLegOrder['status'] {
|
||||
if (status === 'SUBMITTED') return 'PENDING_REVIEW'
|
||||
// 后端联调任务曾出现 REJECTED，但一期已确认订单不设驳回状态；兼容旧数据时仍按待审核展示。
|
||||
if (status === 'REJECTED') return 'PENDING_REVIEW'
|
||||
if (status === 'APPROVED' || status === 'ACCEPTED') return 'ACCEPTED'
|
||||
if (status === 'PROCESSING') return 'IN_TRANSIT'
|
||||
return status
|
||||
}
|
||||
|
||||
function clientTransport(order: MerchantFirstLegOrder): FirstLegOrder['transportMode'] {
|
||||
if (order.transportMode === 'SEA') return order.containerMode === 'FULL_CONTAINER' ? 'FCL' : 'LCL'
|
||||
if (order.transportMode === 'AIR') return 'AIR'
|
||||
return 'ROAD'
|
||||
}
|
||||
|
||||
function apiTransport(draft: FirstLegOrderDraft): FirstLegOrderSaveRequest['transportMode'] {
|
||||
if (draft.transportMode === 'AIR') return 'AIR'
|
||||
if (draft.transportMode === 'ROAD') return 'TRUCK'
|
||||
return 'SEA'
|
||||
}
|
||||
|
||||
function partyPayload(snapshot: FirstLegPartySnapshot): FirstLegOrderPartyPayload {
|
||||
return {
|
||||
companyName: snapshot.name,
|
||||
contactName: snapshot.contactName,
|
||||
phone: snapshot.phone,
|
||||
email: snapshot.email || undefined,
|
||||
countryCode: countryCodes[snapshot.countryRegion] ?? snapshot.countryRegion.toUpperCase().slice(0, 2),
|
||||
province: snapshot.province || undefined,
|
||||
city: snapshot.city,
|
||||
addressLine: snapshot.address,
|
||||
postalCode: snapshot.postalCode || undefined,
|
||||
}
|
||||
}
|
||||
|
||||
function savePayload(draft: FirstLegOrderDraft, warehouse: PlatformReceivingWarehouse, customerName: string): FirstLegOrderSaveRequest {
|
||||
if (!draft.shipperPartySnapshot || !draft.consigneePartySnapshot) throw new Error('请完整填写收发货信息')
|
||||
return {
|
||||
// 后端把 customerId 作为订单主往来单位校验并以服务端名称覆盖 customerName；
|
||||
// 当前商户下单以所选发货单位作为主往来单位，收发货详情仍分别保存订单快照。
|
||||
customerId: draft.shipperPartyId,
|
||||
customerName,
|
||||
transportMode: apiTransport(draft),
|
||||
tradeTerm: draft.tradeTerm || undefined,
|
||||
destinationCountryCode: draft.destinationCountryCode.trim().toUpperCase(),
|
||||
destinationWarehouseName: draft.destinationWarehouseName,
|
||||
expectedShipDate: draft.expectedDepartureDate || undefined,
|
||||
customerRemark: draft.customerRemark || undefined,
|
||||
sender: partyPayload(draft.shipperPartySnapshot),
|
||||
receiver: partyPayload(draft.consigneePartySnapshot),
|
||||
cargoes: draft.items.map((item) => ({
|
||||
cargoName: item.cargoNameCn,
|
||||
cargoNameEn: item.cargoNameEn || undefined,
|
||||
hsCode: item.hsCode || undefined,
|
||||
packageType: item.packageType,
|
||||
packageCount: item.packageCount,
|
||||
grossWeightKg: item.grossWeightKg,
|
||||
volumeCbm: item.volumeCbm,
|
||||
declaredValue: item.declaredValue || undefined,
|
||||
currency: item.currency || undefined,
|
||||
dangerousGoods: item.dangerousGoods,
|
||||
cargoRemark: item.remark || undefined,
|
||||
skuNo: item.sku || undefined,
|
||||
upcNo: item.upc || undefined,
|
||||
totalQuantity: item.pieces,
|
||||
})),
|
||||
pickupMethod: draft.pickupMethod,
|
||||
receivingWarehouseId: warehouse.id,
|
||||
receivingWarehouseName: warehouse.name,
|
||||
channelCode: draft.channelCode,
|
||||
channelName: draft.channelName,
|
||||
taxMode: draft.taxMode,
|
||||
containerMode: draft.transportMode === 'FCL' ? 'FULL_CONTAINER' : draft.transportMode === 'LCL' ? 'LCL' : undefined,
|
||||
customsInspection: draft.customsInspection,
|
||||
destinationType: draft.destinationType,
|
||||
amazonWarehouseCode: draft.amazonWarehouseCode || undefined,
|
||||
shipmentId: draft.shipmentId || undefined,
|
||||
referenceId: draft.referenceNo || undefined,
|
||||
}
|
||||
}
|
||||
|
||||
function warehouseSnapshot(warehouse?: PlatformReceivingWarehouse): PlatformReceivingWarehouseSnapshot | null {
|
||||
return warehouse ? { id: warehouse.id, code: warehouse.code, name: warehouse.name, province: warehouse.province, city: warehouse.city, address: warehouse.address } : null
|
||||
}
|
||||
|
||||
function orderWarehouseSnapshot(order: MerchantFirstLegOrder, warehouse?: PlatformReceivingWarehouse): PlatformReceivingWarehouseSnapshot | null {
|
||||
if (order.receivingWarehouseAddress) {
|
||||
return {
|
||||
id: String(order.receivingWarehouseId),
|
||||
code: warehouse?.code ?? '',
|
||||
name: order.receivingWarehouseName,
|
||||
province: warehouse?.province ?? '',
|
||||
city: warehouse?.city ?? '',
|
||||
address: order.receivingWarehouseAddress,
|
||||
}
|
||||
}
|
||||
return warehouseSnapshot(warehouse)
|
||||
}
|
||||
|
||||
function partySnapshot(detail: MerchantFirstLegOrderDetail, type: 'SENDER' | 'RECEIVER'): FirstLegPartySnapshot | null {
|
||||
const party = detail.parties.find((item) => item.partyType === type)
|
||||
if (!party) return null
|
||||
return {
|
||||
id: String(party.id), code: type, name: party.companyName, role: type === 'SENDER' ? 'SHIPPER' : 'CONSIGNEE',
|
||||
contactName: party.contactName, phone: party.phone, email: party.email ?? '', countryRegion: party.countryCode,
|
||||
province: party.province ?? '', city: party.city, postalCode: party.postalCode ?? '', address: party.addressLine,
|
||||
}
|
||||
}
|
||||
|
||||
function timeline(detail: MerchantFirstLegOrderDetail): FirstLegOrderTimelineItem[] {
|
||||
return detail.statusHistory.map((item) => ({
|
||||
id: String(item.id),
|
||||
event: item.toStatus === 'SUBMITTED' || item.toStatus === 'REJECTED' ? 'SUBMITTED' : item.toStatus === 'CANCELLED' ? 'CANCELLED' : item.toStatus === 'COMPLETED' ? 'COMPLETED' : item.toStatus === 'ACCEPTED' || item.toStatus === 'APPROVED' ? 'ACCEPTED' : 'IN_TRANSIT',
|
||||
title: item.toStatus === 'REJECTED' ? '平台要求补充订单信息' : item.action || `状态更新为 ${item.toStatus}`,
|
||||
description: item.reason ?? '',
|
||||
operatorName: item.operatorName ?? '',
|
||||
occurredAt: item.occurredAt,
|
||||
}))
|
||||
}
|
||||
|
||||
function mapOrder(order: MerchantFirstLegOrder, warehouses: PlatformReceivingWarehouse[], detail?: MerchantFirstLegOrderDetail): FirstLegOrder {
|
||||
const warehouse = warehouses.find((item) => item.id === String(order.receivingWarehouseId))
|
||||
const shipper = detail ? partySnapshot(detail, 'SENDER') : null
|
||||
const consignee = detail ? partySnapshot(detail, 'RECEIVER') : null
|
||||
return {
|
||||
id: String(order.id), orderNo: order.orderNo, referenceNo: order.referenceId ?? '', transportMode: clientTransport(order),
|
||||
businessType: 'EXPORT', origin: shipper?.city ?? '', destination: order.destinationWarehouseName || order.destinationCountryCode,
|
||||
receivingWarehouseId: String(order.receivingWarehouseId), receivingWarehouseName: order.receivingWarehouseName,
|
||||
receivingWarehouseSnapshot: orderWarehouseSnapshot(order, warehouse), expectedDepartureDate: order.expectedShipDate ?? '', etd: '', eta: '',
|
||||
shipperPartyId: shipper?.id ?? '', shipperPartySnapshot: shipper, shipper: shipper?.name ?? '',
|
||||
consigneePartyId: consignee?.id ?? '', consigneePartySnapshot: consignee, consignee: consignee?.name ?? '',
|
||||
expressCompanyName: order.expressCompany ?? '', trackingNumber: order.expressTrackingNo ?? '', priority: 'NORMAL', customerRemark: order.customerRemark ?? '', operatorName: '',
|
||||
status: clientStatus(order.status), version: order.version ?? 0,
|
||||
items: (detail?.cargoes ?? []).map((item) => ({
|
||||
id: String(item.id), sku: item.skuNo ?? '', upc: item.upcNo ?? '', cargoNameCn: item.cargoName, cargoNameEn: item.cargoNameEn ?? '',
|
||||
pieces: item.totalQuantity ?? item.packageCount, packageCount: item.packageCount, grossWeightKg: item.grossWeightKg,
|
||||
volumeCbm: item.volumeCbm, containerType: '', containerCount: 0, remark: item.cargoRemark ?? '',
|
||||
packageType: item.packageType, hsCode: item.hsCode ?? '', declaredValue: item.declaredValue ?? 0,
|
||||
currency: item.currency ?? 'USD', dangerousGoods: item.dangerousGoods ?? false,
|
||||
})),
|
||||
timeline: detail ? timeline(detail) : [], createdAt: order.createdAt, updatedAt: order.updatedAt,
|
||||
tradeTerm: order.tradeTerm ?? '', destinationCountryCode: order.destinationCountryCode,
|
||||
destinationWarehouseName: order.destinationWarehouseName, pickupMethod: order.pickupMethod, channelCode: order.channelCode,
|
||||
channelName: order.channelName, taxMode: order.taxMode, customsInspection: order.customsInspection,
|
||||
destinationType: order.destinationType, amazonWarehouseCode: order.amazonWarehouseCode ?? '', shipmentId: order.shipmentId ?? '',
|
||||
}
|
||||
}
|
||||
|
||||
function mapWarehouse(item: MerchantWarehouse): PlatformReceivingWarehouse {
|
||||
return {
|
||||
id: String(item.id), code: item.warehouseCode, name: item.warehouseName, province: '',
|
||||
city: '', address: '', contactName: item.contactName ?? '', contactPhone: item.contactPhone ?? '',
|
||||
businessHours: '', status: item.status, remark: item.remark ?? '', updatedAt: item.updatedAt ?? '',
|
||||
}
|
||||
}
|
||||
|
||||
export const useFirstLegOrdersStore = defineStore('client-first-leg-orders', () => {
|
||||
const orders = ref<FirstLegOrder[]>([])
|
||||
const warehouses = ref<PlatformReceivingWarehouse[]>([])
|
||||
const loading = ref(false)
|
||||
const loadedFromApi = ref(false)
|
||||
const loadError = ref('')
|
||||
const activeCount = computed(() => orders.value.filter((item) => ['PENDING_REVIEW', 'ACCEPTED', 'BOOKED', 'IN_TRANSIT'].includes(item.status)).length)
|
||||
const pendingCount = computed(() => orders.value.filter((item) => item.status === 'PENDING_REVIEW').length)
|
||||
|
||||
function getById(id: string) { return orders.value.find((item) => item.id === id) }
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
loadedFromApi.value = true
|
||||
loadError.value = ''
|
||||
orders.value = []
|
||||
warehouses.value = []
|
||||
try {
|
||||
const [orderPage, warehousePage] = await Promise.all([getMerchantFirstLegOrders(), getMerchantWarehouses()])
|
||||
warehouses.value = warehousePage.records.filter((item) => item.status === 'ACTIVE').map(mapWarehouse)
|
||||
orders.value = orderPage.records.map((item) => mapOrder(item, warehouses.value))
|
||||
} catch (error) {
|
||||
loadError.value = error instanceof Error ? error.message : '订单与仓库数据加载失败'
|
||||
throw error
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
async function loadDetail(id: string) {
|
||||
const detail = await getMerchantFirstLegOrder(id)
|
||||
const mapped = mapOrder(detail.order, warehouses.value, detail)
|
||||
const index = orders.value.findIndex((item) => item.id === id)
|
||||
if (index >= 0) orders.value[index] = mapped
|
||||
else orders.value.unshift(mapped)
|
||||
return mapped
|
||||
}
|
||||
|
||||
async function loadWarehouseDetail(id: string) {
|
||||
const detail = await getMerchantWarehouseDetail(id)
|
||||
const mapped = mapWarehouse(detail.warehouse)
|
||||
const address = detail.addresses[0]
|
||||
const receivingCapability = detail.capabilities.find((item) => item.enabled && item.cutoffTime)
|
||||
if (address) {
|
||||
mapped.province = address.stateProvince ?? ''
|
||||
mapped.city = address.city ?? ''
|
||||
mapped.address = [address.district, address.addressLine1, address.addressLine2].filter(Boolean).join(' ')
|
||||
}
|
||||
if (receivingCapability?.cutoffTime) mapped.businessHours = `每日 ${receivingCapability.cutoffTime.slice(0, 5)} 前`
|
||||
const index = warehouses.value.findIndex((item) => item.id === id)
|
||||
if (index >= 0) warehouses.value[index] = mapped
|
||||
return mapped
|
||||
}
|
||||
|
||||
async function saveDraft(draft: FirstLegOrderDraft, customerName: string, id?: string) {
|
||||
const warehouse = warehouses.value.find((item) => item.id === draft.receivingWarehouseId)
|
||||
if (!warehouse) throw new Error('所选收货仓当前不可用')
|
||||
if (id) {
|
||||
const order = getById(id)
|
||||
if (!order || !canClientEditFirstLegOrder(order.status)) throw new Error('当前订单状态不允许编辑')
|
||||
await updateMerchantFirstLegOrder(id, savePayload(draft, warehouse, customerName))
|
||||
return loadDetail(id)
|
||||
}
|
||||
const createdId = await createMerchantFirstLegOrder(savePayload(draft, warehouse, customerName))
|
||||
return loadDetail(String(createdId))
|
||||
}
|
||||
|
||||
async function submit(draft: FirstLegOrderDraft, customerName: string, id?: string, companyAuditStatus: MerchantTenantStatus = 'ACTIVE') {
|
||||
if (companyAuditStatus !== 'ACTIVE') throw new Error('企业资料尚未审核通过，请先完善企业资料并等待平台审核')
|
||||
const order = await saveDraft(draft, customerName, id)
|
||||
await submitMerchantFirstLegOrder(order.id)
|
||||
return loadDetail(order.id)
|
||||
}
|
||||
|
||||
return { orders, warehouses, loading, loadedFromApi, loadError, activeCount, pendingCount, getById, load, loadDetail, loadWarehouseDetail, saveDraft, submit }
|
||||
})
|
||||
@@ -0,0 +1,113 @@
|
||||
import type {
|
||||
FirstLegOrderStatus,
|
||||
FirstLegTransportMode,
|
||||
PlatformReceivingWarehouseSnapshot,
|
||||
} from '@chongchong/shared'
|
||||
import type { FirstLegPartySnapshot } from '../data/firstLegParties.ts'
|
||||
|
||||
export type FirstLegBusinessType = 'EXPORT' | 'IMPORT'
|
||||
export type FirstLegPriority = 'NORMAL' | 'URGENT' | 'EXPEDITED'
|
||||
|
||||
export interface FirstLegCargoItem {
|
||||
id: string
|
||||
sku: string
|
||||
upc: string
|
||||
cargoNameCn: string
|
||||
cargoNameEn: string
|
||||
pieces: number
|
||||
packageCount: number
|
||||
grossWeightKg: number
|
||||
volumeCbm: number
|
||||
containerType: string
|
||||
containerCount: number
|
||||
remark: string
|
||||
packageType: string
|
||||
hsCode: string
|
||||
declaredValue: number
|
||||
currency: string
|
||||
dangerousGoods: boolean
|
||||
}
|
||||
|
||||
export interface FirstLegOrderTimelineItem {
|
||||
id: string
|
||||
event: 'DRAFT_SAVED' | 'SUBMITTED' | 'CANCELLED' | 'ACCEPTED' | 'BOOKED' | 'IN_TRANSIT' | 'COMPLETED'
|
||||
title: string
|
||||
description: string
|
||||
operatorName: string
|
||||
occurredAt: string
|
||||
}
|
||||
|
||||
export interface FirstLegOrder {
|
||||
id: string
|
||||
orderNo: string | null
|
||||
referenceNo: string
|
||||
transportMode: FirstLegTransportMode
|
||||
businessType: FirstLegBusinessType
|
||||
origin: string
|
||||
destination: string
|
||||
receivingWarehouseId: string
|
||||
receivingWarehouseName: string
|
||||
receivingWarehouseSnapshot: PlatformReceivingWarehouseSnapshot | null
|
||||
expectedDepartureDate: string
|
||||
etd: string
|
||||
eta: string
|
||||
shipperPartyId: string
|
||||
shipperPartySnapshot: FirstLegPartySnapshot | null
|
||||
shipper: string
|
||||
consigneePartyId: string
|
||||
consigneePartySnapshot: FirstLegPartySnapshot | null
|
||||
consignee: string
|
||||
expressCompanyName: string
|
||||
trackingNumber: string
|
||||
priority: FirstLegPriority
|
||||
customerRemark: string
|
||||
operatorName: string
|
||||
status: FirstLegOrderStatus
|
||||
version: number
|
||||
items: FirstLegCargoItem[]
|
||||
timeline: FirstLegOrderTimelineItem[]
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
tradeTerm: string
|
||||
destinationCountryCode: string
|
||||
destinationWarehouseName: string
|
||||
pickupMethod: 'SELF_EXPRESS' | 'PICKUP' | 'SELF_TRUCK'
|
||||
channelCode: string
|
||||
channelName: string
|
||||
taxMode: 'BUY_DECLARATION' | 'TAX_REFUND'
|
||||
customsInspection: boolean
|
||||
destinationType: 'FBA' | 'OVERSEAS' | 'PRIVATE'
|
||||
amazonWarehouseCode: string
|
||||
shipmentId: string
|
||||
}
|
||||
|
||||
export type FirstLegOrderDraft = Pick<
|
||||
FirstLegOrder,
|
||||
| 'referenceNo'
|
||||
| 'transportMode'
|
||||
| 'businessType'
|
||||
| 'origin'
|
||||
| 'destination'
|
||||
| 'receivingWarehouseId'
|
||||
| 'expectedDepartureDate'
|
||||
| 'shipperPartyId'
|
||||
| 'shipperPartySnapshot'
|
||||
| 'shipper'
|
||||
| 'consigneePartyId'
|
||||
| 'consigneePartySnapshot'
|
||||
| 'consignee'
|
||||
| 'priority'
|
||||
| 'customerRemark'
|
||||
| 'items'
|
||||
| 'tradeTerm'
|
||||
| 'destinationCountryCode'
|
||||
| 'destinationWarehouseName'
|
||||
| 'pickupMethod'
|
||||
| 'channelCode'
|
||||
| 'channelName'
|
||||
| 'taxMode'
|
||||
| 'customsInspection'
|
||||
| 'destinationType'
|
||||
| 'amazonWarehouseCode'
|
||||
| 'shipmentId'
|
||||
>
|
||||
@@ -0,0 +1,135 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import test from 'node:test'
|
||||
import { createFirstLegPartySnapshot } from '../data/firstLegParties.ts'
|
||||
import {
|
||||
canClientCancelFirstLegOrder,
|
||||
canClientEditFirstLegOrder,
|
||||
createEmptyCargoItem,
|
||||
getFirstLegStatusLabel,
|
||||
getFirstLegTransportModeLabel,
|
||||
summarizeFirstLegCargo,
|
||||
validateFirstLegOrderDraft,
|
||||
} from './firstLegOrder.ts'
|
||||
|
||||
const shipperParty = {
|
||||
id: 'CP001', code: 'SHIPPER-001', name: '测试发货企业', roles: ['SHIPPER'], contactName: '测试联系人',
|
||||
phone: '13800000000', email: 'shipper@example.test', countryRegion: '中国', province: '浙江省', city: '宁波市',
|
||||
postalCode: '315000', address: '测试发货地址', status: 'ACTIVE',
|
||||
}
|
||||
const consigneeParty = {
|
||||
id: 'CP002', code: 'CONSIGNEE-001', name: 'TEST CONSIGNEE LLC', roles: ['CONSIGNEE'], contactName: 'Test Receiver',
|
||||
phone: '+1 555 0100', email: 'receiver@example.test', countryRegion: '美国', province: 'California', city: 'Los Angeles',
|
||||
postalCode: '90001', address: '100 Test Logistics Ave', status: 'ACTIVE',
|
||||
}
|
||||
|
||||
function validDraft() {
|
||||
return {
|
||||
referenceNo: 'REF-001',
|
||||
transportMode: 'FCL',
|
||||
businessType: 'EXPORT',
|
||||
origin: '宁波',
|
||||
destination: '洛杉矶',
|
||||
receivingWarehouseId: 'WH005',
|
||||
expectedDepartureDate: '2026-08-08',
|
||||
shipperPartyId: 'CP001',
|
||||
shipperPartySnapshot: createFirstLegPartySnapshot(shipperParty, 'SHIPPER'),
|
||||
shipper: shipperParty.name,
|
||||
consigneePartyId: 'CP003',
|
||||
consigneePartySnapshot: createFirstLegPartySnapshot(consigneeParty, 'CONSIGNEE'),
|
||||
consignee: consigneeParty.name,
|
||||
priority: 'NORMAL',
|
||||
customerRemark: '',
|
||||
tradeTerm: 'FOB',
|
||||
destinationCountryCode: 'US',
|
||||
destinationWarehouseName: 'ONT8',
|
||||
pickupMethod: 'SELF_EXPRESS',
|
||||
channelCode: 'SEA-US-FBA',
|
||||
channelName: '美国海运渠道',
|
||||
taxMode: 'BUY_DECLARATION',
|
||||
customsInspection: false,
|
||||
destinationType: 'FBA',
|
||||
amazonWarehouseCode: 'ONT8',
|
||||
shipmentId: 'FBA-001',
|
||||
items: [{ ...createEmptyCargoItem('cargo-1'), sku: 'SKU-001', upc: '012345678905', cargoNameCn: '家居用品', pieces: 100, grossWeightKg: 1200, volumeCbm: 3.5, containerType: '40HQ', containerCount: 1 }],
|
||||
}
|
||||
}
|
||||
|
||||
test('uses the confirmed status and transport labels', () => {
|
||||
assert.equal(getFirstLegStatusLabel('BOOKED'), '已订舱')
|
||||
assert.equal(getFirstLegStatusLabel('IN_TRANSIT'), '运输中')
|
||||
assert.equal(getFirstLegTransportModeLabel('FCL'), '海运整箱 FCL')
|
||||
})
|
||||
|
||||
test('only allows draft orders to be edited in the confirmed phase-one flow', () => {
|
||||
assert.equal(canClientEditFirstLegOrder('DRAFT'), true)
|
||||
assert.equal(canClientEditFirstLegOrder('PENDING_REVIEW'), false)
|
||||
assert.equal(canClientCancelFirstLegOrder('DRAFT'), true)
|
||||
assert.equal(canClientCancelFirstLegOrder('PENDING_REVIEW'), true)
|
||||
assert.equal(canClientCancelFirstLegOrder('ACCEPTED'), false)
|
||||
assert.equal(canClientCancelFirstLegOrder('BOOKED'), false)
|
||||
})
|
||||
|
||||
test('validates the confirmed minimum submission fields', () => {
|
||||
assert.deepEqual(validateFirstLegOrderDraft(validDraft()), [])
|
||||
|
||||
const invalid = validDraft()
|
||||
invalid.origin = ''
|
||||
invalid.receivingWarehouseId = ''
|
||||
invalid.items[0].grossWeightKg = 0
|
||||
invalid.items[0].containerType = ''
|
||||
invalid.items[0].containerCount = 0
|
||||
|
||||
const errors = validateFirstLegOrderDraft(invalid)
|
||||
assert.ok(errors.includes('请填写起运地'))
|
||||
assert.ok(errors.includes('请选择平台收货仓'))
|
||||
assert.ok(errors.includes('第 1 条货物毛重必须大于 0'))
|
||||
assert.ok(errors.includes('第 1 条货物需要填写箱型和柜量'))
|
||||
})
|
||||
|
||||
test('requires enabled-party snapshots and order addresses before submission', () => {
|
||||
const draft = validDraft()
|
||||
draft.shipperPartyId = ''
|
||||
draft.shipperPartySnapshot = null
|
||||
draft.consigneePartySnapshot.address = ''
|
||||
|
||||
const errors = validateFirstLegOrderDraft(draft)
|
||||
assert.ok(errors.includes('请选择发货单位'))
|
||||
assert.ok(errors.includes('请填写本单收货地址'))
|
||||
})
|
||||
|
||||
test('requires FBA reference, warehouse, shipment, SKU and UPC fields', () => {
|
||||
const draft = validDraft()
|
||||
draft.referenceNo = ''
|
||||
draft.amazonWarehouseCode = ''
|
||||
draft.shipmentId = ''
|
||||
draft.items[0].sku = ''
|
||||
draft.items[0].upc = ''
|
||||
|
||||
const errors = validateFirstLegOrderDraft(draft)
|
||||
assert.ok(errors.includes('FBA 订单请填写客户参考号'))
|
||||
assert.ok(errors.includes('FBA 订单请填写 Amazon 仓库编码'))
|
||||
assert.ok(errors.includes('FBA 订单请填写 Shipment ID'))
|
||||
assert.ok(errors.includes('第 1 条货物缺少客户 SKU'))
|
||||
assert.ok(errors.includes('第 1 条货物缺少 UPC'))
|
||||
})
|
||||
|
||||
test('does not require container details for non-FCL cargo', () => {
|
||||
const draft = validDraft()
|
||||
draft.transportMode = 'AIR'
|
||||
draft.items[0].containerType = ''
|
||||
draft.items[0].containerCount = 0
|
||||
|
||||
assert.deepEqual(validateFirstLegOrderDraft(draft), [])
|
||||
})
|
||||
|
||||
test('summarizes cargo values from line items', () => {
|
||||
const first = validDraft().items[0]
|
||||
const second = { ...first, id: 'cargo-2', pieces: 40, packageCount: 4, grossWeightKg: 300, volumeCbm: 1.25 }
|
||||
|
||||
assert.deepEqual(summarizeFirstLegCargo([first, second]), {
|
||||
pieces: 140,
|
||||
packageCount: 5,
|
||||
grossWeightKg: 1500,
|
||||
volumeCbm: 4.75,
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,114 @@
|
||||
import {
|
||||
FIRST_LEG_ORDER_STATUSES,
|
||||
FIRST_LEG_TRANSPORT_MODES,
|
||||
type FirstLegOrderStatus,
|
||||
type FirstLegTransportMode,
|
||||
} from '@chongchong/shared'
|
||||
import type { FirstLegCargoItem, FirstLegOrderDraft } from '../types/firstLegOrder.ts'
|
||||
|
||||
const statusLabels = new Map<FirstLegOrderStatus, string>(
|
||||
FIRST_LEG_ORDER_STATUSES.map((item) => [item.code, item.label]),
|
||||
)
|
||||
|
||||
const transportModeLabels = new Map<FirstLegTransportMode, string>(
|
||||
FIRST_LEG_TRANSPORT_MODES.map((item) => [item.code, item.label]),
|
||||
)
|
||||
|
||||
export function getFirstLegStatusLabel(status: FirstLegOrderStatus) {
|
||||
return statusLabels.get(status) ?? status
|
||||
}
|
||||
|
||||
export function getFirstLegTransportModeLabel(mode: FirstLegTransportMode) {
|
||||
return transportModeLabels.get(mode) ?? mode
|
||||
}
|
||||
|
||||
export function getFirstLegStatusTone(status: FirstLegOrderStatus): 'success' | 'warning' | 'info' | 'danger' {
|
||||
if (status === 'COMPLETED') return 'success'
|
||||
if (status === 'DRAFT' || status === 'PENDING_REVIEW') return 'warning'
|
||||
if (status === 'CANCELLED') return 'danger'
|
||||
return 'info'
|
||||
}
|
||||
|
||||
export function canClientEditFirstLegOrder(status: FirstLegOrderStatus) {
|
||||
return status === 'DRAFT'
|
||||
}
|
||||
|
||||
export function canClientCancelFirstLegOrder(status: FirstLegOrderStatus) {
|
||||
return status === 'DRAFT' || status === 'PENDING_REVIEW'
|
||||
}
|
||||
|
||||
export function createEmptyCargoItem(id = `cargo-${Date.now()}`): FirstLegCargoItem {
|
||||
return {
|
||||
id,
|
||||
sku: '',
|
||||
upc: '',
|
||||
cargoNameCn: '',
|
||||
cargoNameEn: '',
|
||||
pieces: 1,
|
||||
packageCount: 1,
|
||||
grossWeightKg: 0,
|
||||
volumeCbm: 0,
|
||||
containerType: '',
|
||||
containerCount: 0,
|
||||
remark: '',
|
||||
packageType: 'CARTON',
|
||||
hsCode: '',
|
||||
declaredValue: 0,
|
||||
currency: 'USD',
|
||||
dangerousGoods: false,
|
||||
}
|
||||
}
|
||||
|
||||
export function validateFirstLegOrderDraft(draft: FirstLegOrderDraft) {
|
||||
const errors: string[] = []
|
||||
|
||||
if (!draft.origin.trim()) errors.push('请填写起运地')
|
||||
if (!draft.destination.trim()) errors.push('请填写目的地')
|
||||
if (!/^[A-Za-z]{2}$/.test(draft.destinationCountryCode.trim())) errors.push('请输入两位英文字母的目的国代码')
|
||||
if (!draft.destinationWarehouseName.trim()) errors.push('请填写目的仓名称')
|
||||
if (!draft.channelCode.trim() || !draft.channelName.trim()) errors.push('请填写渠道编码和渠道名称')
|
||||
if (!draft.receivingWarehouseId) errors.push('请选择平台收货仓')
|
||||
if (!draft.shipperPartyId || !draft.shipperPartySnapshot || !draft.shipper.trim()) errors.push('请选择发货单位')
|
||||
if (draft.shipperPartySnapshot && !draft.shipperPartySnapshot.contactName.trim()) errors.push('请填写发货联系人')
|
||||
if (draft.shipperPartySnapshot && !draft.shipperPartySnapshot.phone.trim()) errors.push('请填写发货联系电话')
|
||||
if (draft.shipperPartySnapshot && !draft.shipperPartySnapshot.address.trim()) errors.push('请填写本单发货地址')
|
||||
if (!draft.consigneePartyId || !draft.consigneePartySnapshot || !draft.consignee.trim()) errors.push('请选择收货单位')
|
||||
if (draft.consigneePartySnapshot && !draft.consigneePartySnapshot.contactName.trim()) errors.push('请填写收货联系人')
|
||||
if (draft.consigneePartySnapshot && !draft.consigneePartySnapshot.phone.trim()) errors.push('请填写收货联系电话')
|
||||
if (draft.consigneePartySnapshot && !draft.consigneePartySnapshot.address.trim()) errors.push('请填写本单收货地址')
|
||||
if (draft.items.length === 0) errors.push('请至少添加一条货物明细')
|
||||
|
||||
if (draft.destinationType === 'FBA') {
|
||||
if (!draft.referenceNo.trim()) errors.push('FBA 订单请填写客户参考号')
|
||||
if (!draft.amazonWarehouseCode.trim()) errors.push('FBA 订单请填写 Amazon 仓库编码')
|
||||
if (!draft.shipmentId.trim()) errors.push('FBA 订单请填写 Shipment ID')
|
||||
}
|
||||
|
||||
draft.items.forEach((item, index) => {
|
||||
const line = `第 ${index + 1} 条货物`
|
||||
if (!item.cargoNameCn.trim()) errors.push(`${line}缺少中文品名`)
|
||||
if (!item.packageType.trim()) errors.push(`${line}缺少包装类型`)
|
||||
if (draft.destinationType === 'FBA' && !item.sku.trim()) errors.push(`${line}缺少客户 SKU`)
|
||||
if (draft.destinationType === 'FBA' && !item.upc.trim()) errors.push(`${line}缺少 UPC`)
|
||||
if (!Number.isInteger(item.pieces) || item.pieces <= 0) errors.push(`${line}件数必须为正整数`)
|
||||
if (item.grossWeightKg <= 0) errors.push(`${line}毛重必须大于 0`)
|
||||
if (item.volumeCbm <= 0) errors.push(`${line}体积必须大于 0`)
|
||||
if (draft.transportMode === 'FCL' && (!item.containerType || item.containerCount <= 0)) {
|
||||
errors.push(`${line}需要填写箱型和柜量`)
|
||||
}
|
||||
})
|
||||
|
||||
return errors
|
||||
}
|
||||
|
||||
export function summarizeFirstLegCargo(items: FirstLegCargoItem[]) {
|
||||
return items.reduce(
|
||||
(summary, item) => ({
|
||||
pieces: summary.pieces + item.pieces,
|
||||
packageCount: summary.packageCount + item.packageCount,
|
||||
grossWeightKg: summary.grossWeightKg + item.grossWeightKg,
|
||||
volumeCbm: summary.volumeCbm + item.volumeCbm,
|
||||
}),
|
||||
{ pieces: 0, packageCount: 0, grossWeightKg: 0, volumeCbm: 0 },
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="一键导入" description="批量导入头程订单" /></template>
|
||||
@@ -0,0 +1,186 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import test from 'node:test'
|
||||
|
||||
const source = readFileSync(new URL('./FirstLegOrdersView.vue', import.meta.url), 'utf8')
|
||||
const routerSource = readFileSync(new URL('../router/index.ts', import.meta.url), 'utf8')
|
||||
const editorShellSource = readFileSync(new URL('../components/first-leg/FirstLegOrderEditorShell.vue', import.meta.url), 'utf8')
|
||||
|
||||
test('routes the confirmed first-leg path to the implemented order view', () => {
|
||||
assert.match(routerSource, /path: 'orders\/first-leg'.*FirstLegOrdersView\.vue/)
|
||||
})
|
||||
|
||||
test('opens order creation as a dedicated protected page while keeping draft editing in a drawer', () => {
|
||||
assert.match(routerSource, /path: 'orders\/first-leg\/create'.*name: 'first-leg-order-create'.*permission: 'order:first-leg:create'/)
|
||||
assert.match(source, /router\.push\(\{ name: 'first-leg-order-create' \}\)/)
|
||||
assert.match(source, /const isCreatePage = computed\(\(\) => route\.name === 'first-leg-order-create'\)/)
|
||||
assert.match(source, /<FirstLegOrderEditorShell[^>]*:page="isCreatePage"/)
|
||||
assert.match(editorShellSource, /<section v-if="page" class="first-leg-editor-page">/)
|
||||
assert.match(editorShellSource, /<el-drawer[\s\S]*v-else/)
|
||||
assert.match(editorShellSource, /返回订单列表/)
|
||||
})
|
||||
|
||||
test('exposes real list, draft, submit, and detail workflow entries without cancellation', () => {
|
||||
assert.match(source, /function openCreate\(\)/)
|
||||
assert.match(source, /async function saveDraft\(\)/)
|
||||
assert.match(source, /function submitOrder\(\)/)
|
||||
assert.match(source, /async function openDetail\(order: FirstLegOrder\)/)
|
||||
assert.match(source, /Promise\.allSettled\(\[/)
|
||||
assert.match(source, /store\.load\(\),\s+firstLegPartySource\.load\(\)/)
|
||||
assert.match(source, /tenantStore\.loadCompanyContext\(\)/)
|
||||
assert.match(source, /await store\.loadDetail\(order\.id\)/)
|
||||
assert.doesNotMatch(source, /cancelOrder|取消订单/)
|
||||
})
|
||||
|
||||
test('blocks order submission before company approval while preserving draft actions', () => {
|
||||
assert.match(source, /companyApproved/)
|
||||
assert.match(source, /企业资料待审核，当前仅可保存订单草稿/)
|
||||
assert.match(source, /暂时无法提交订单/)
|
||||
assert.match(source, /router\.push\('\/company\/profile'\)/)
|
||||
assert.match(source, /auth\.hasPermission\('order:first-leg:submit'\)/)
|
||||
})
|
||||
|
||||
test('renders dynamic cargo lines and responsive drawers', () => {
|
||||
assert.match(source, /v-for="\(item, index\) in form\.items"/)
|
||||
assert.match(source, /function addCargoItem\(\)/)
|
||||
assert.match(source, /function removeCargoItem\(index: number\)/)
|
||||
assert.match(source, /:global\(\.first-leg-editor\).*width: 100% !important/)
|
||||
assert.match(source, /class="mobile-order-list"/)
|
||||
assert.match(source, /\.desktop-order-table \{ display: none; \}/)
|
||||
})
|
||||
|
||||
test('keeps primary mobile order actions touch sized', () => {
|
||||
assert.match(source, /\.editor-actions :deep\(\.el-button\) \{ min-height: 44px;/)
|
||||
})
|
||||
|
||||
test('uses the shared query toolbar and data table without metric cards', () => {
|
||||
assert.match(source, /import QueryToolbar, \{ type QueryField, type QueryModel \}/)
|
||||
assert.match(source, /import DataTable, \{ type DataTableColumn \}/)
|
||||
assert.match(source, /const filters = ref<QueryModel>/)
|
||||
assert.match(source, /<QueryToolbar v-model="filters" class="first-leg-query-toolbar" :fields="queryFields" ariaLabel="头程订单查询" @search="searchOrders" \/>/)
|
||||
assert.match(source, /async function searchOrders\(model: QueryModel\)/)
|
||||
assert.match(source, /await store\.load\(\)/)
|
||||
assert.match(source, /<DataTable v-model:page="tablePage" v-model:page-size="tablePageSize" :data="pagedOrders" :columns="orderColumns"/)
|
||||
assert.match(source, /\{ key: 'actions', label: '操作', width: 180, fixed: 'left', slotName: 'actions' \}/)
|
||||
assert.doesNotMatch(source, /order-metrics|订单概览/)
|
||||
})
|
||||
|
||||
test('keeps the first viewport compact and moves create into the table toolbar', () => {
|
||||
assert.match(source, /class="order-table-toolbar"/)
|
||||
assert.match(source, /<strong>订单列表<\/strong><span>共 \{\{ filteredOrders\.length \}\} 条<\/span>/)
|
||||
assert.match(source, /class="order-table-toolbar"[\s\S]*order:first-leg:create[\s\S]*创建订单[\s\S]*class="order-eligibility is-pending"/)
|
||||
assert.doesNotMatch(source, /<QueryToolbar[\s\S]*?<template #actions>/)
|
||||
assert.match(source, /client-main:has\(> \.first-leg-page:not\(\.is-create-route\)\) > \.client-page-heading > div\) \{ position: absolute; width: 1px; height: 1px;/)
|
||||
})
|
||||
|
||||
test('keeps desktop query actions on the first row and only shows the qualification notice before approval', () => {
|
||||
assert.match(source, /\.first-leg-query-toolbar \{ flex-wrap: nowrap; \}/)
|
||||
assert.match(source, /query-toolbar__filters\) \{ display: grid; min-width: 0; flex: 1 1 auto;/)
|
||||
assert.match(source, /query-toolbar__actions\) \{ align-self: flex-start; flex-wrap: nowrap; margin-left: auto;/)
|
||||
assert.match(source, /v-if="!companyApproved && !supportingDataErrors\.some/)
|
||||
assert.doesNotMatch(source, /企业资料已审核，可正常提交订单/)
|
||||
assert.doesNotMatch(source, /order-eligibility\.is-approved/)
|
||||
})
|
||||
|
||||
test('does not expose arbitrary status mutation controls to customers', () => {
|
||||
assert.doesNotMatch(source, /setStatusForPreview/)
|
||||
assert.doesNotMatch(source, /状态更新|更新状态/)
|
||||
})
|
||||
|
||||
test('requires an enabled platform receiving warehouse in the order form', () => {
|
||||
assert.match(source, /computed\(\(\) => store\.warehouses\)/)
|
||||
assert.match(source, /availableWarehouses\.value\.length === 0/)
|
||||
assert.match(source, /label="平台收货仓"[^>]*required/)
|
||||
assert.match(source, /v-model="form\.receivingWarehouseId"/)
|
||||
assert.match(source, /selectedWarehouse\.businessHours/)
|
||||
assert.match(source, /class="selected-warehouse" aria-label="所选收货仓详情"/)
|
||||
assert.doesNotMatch(source, /class="selected-warehouse"[^>]*>[\s\S]*?<strong>\{\{ selectedWarehouse\.name \}\}<\/strong>/)
|
||||
assert.match(source, /first-leg-editor \.el-drawer__header\) \{[^}]*margin-bottom: 0;[^}]*border-bottom: 1px solid var\(--border\)/)
|
||||
assert.match(source, /first-leg-editor \.el-drawer__body\) \{[^}]*min-height: 0;[^}]*padding: 18px 22px 32px;[^}]*overscroll-behavior: contain/)
|
||||
assert.match(source, /first-leg-editor \.el-drawer__footer\) \{[^}]*border-top: 1px solid var\(--border\);[^}]*background: #fff/)
|
||||
assert.match(source, /detailOrder\.receivingWarehouseSnapshot\?\.name/)
|
||||
assert.match(source, /detailOrder\.receivingWarehouseSnapshot\.code/)
|
||||
assert.match(source, /loadSelectedWarehouse\(detailedOrder\.receivingWarehouseId\)/)
|
||||
})
|
||||
|
||||
test('collects the backend-required first-leg fields', () => {
|
||||
for (const model of ['destinationCountryCode', 'destinationWarehouseName', 'channelCode', 'pickupMethod', 'taxMode', 'destinationType', 'packageType', 'upc']) {
|
||||
assert.match(source, new RegExp(`v-model="(?:form|item)\\.${model}"`))
|
||||
}
|
||||
assert.match(source, /form\.channelName = channel\?\.name/)
|
||||
})
|
||||
|
||||
test('distills order creation into the confirmed prototype sections without fake pricing', () => {
|
||||
assert.match(source, /<h3>下单信息<\/h3>/)
|
||||
assert.match(source, /<h3>发货与目的地<\/h3>/)
|
||||
assert.match(source, /<h3>货物明细<\/h3>/)
|
||||
assert.match(source, /class="segmented-options"/)
|
||||
assert.match(source, /class="cargo-primary-grid"/)
|
||||
assert.match(source, /title="更多申报信息"/)
|
||||
assert.doesNotMatch(source, /费用预估|查看最新报价|cost-estimate/)
|
||||
assert.doesNotMatch(source, /v-model="form\.(?:businessType|origin|destination|priority|tradeTerm)"/)
|
||||
})
|
||||
|
||||
test('shows field-level validation and concise guidance for required order inputs', () => {
|
||||
assert.match(source, /ref="orderFormRef"[^>]*:model="form" :rules="orderFormRules"/)
|
||||
assert.match(source, /prop="shipperPartySnapshot\.contactName" required/)
|
||||
assert.match(source, /prop="consigneePartySnapshot\.address" required/)
|
||||
assert.match(source, /:prop="`items\.\$\{index\}\.cargoNameCn`" required/)
|
||||
assert.match(source, /:prop="`items\.\$\{index\}\.grossWeightKg`" required/)
|
||||
assert.match(source, /label="UPC".*required.*v-model="item\.upc"/)
|
||||
assert.match(source, /placeholder="例如：蓝牙音箱"/)
|
||||
assert.match(source, /\.order-form :deep\(\.el-form-item__error\).*position: static/)
|
||||
})
|
||||
|
||||
test('selects enabled counterparties and stores editable order snapshots', () => {
|
||||
assert.match(source, /firstLegPartySource\.listAvailable\('SHIPPER'\)/)
|
||||
assert.match(source, /firstLegPartySource\.findAvailable\(id, role\)/)
|
||||
assert.match(source, /firstLegPartySource\.load\(\)/)
|
||||
assert.match(source, /v-model="form\.shipperPartyId"/)
|
||||
assert.match(source, /v-model="form\.consigneePartyId"/)
|
||||
assert.match(source, /form\.shipperPartySnapshot\.contactName/)
|
||||
assert.match(source, /form\.consigneePartySnapshot\.address/)
|
||||
assert.match(source, /保存为本订单快照/)
|
||||
assert.match(source, /form\.shipperPartySnapshot\.name\} · 历史快照/)
|
||||
assert.match(source, /form\.consigneePartySnapshot\.name\} · 历史快照/)
|
||||
})
|
||||
|
||||
test('shows fulfillment courier information as read-only client detail', () => {
|
||||
assert.match(source, /履约快递信息/)
|
||||
assert.match(source, /detailOrder\.expressCompanyName/)
|
||||
assert.match(source, /detailOrder\.trackingNumber/)
|
||||
assert.match(source, /客户端仅只读展示/)
|
||||
assert.doesNotMatch(source, /v-model="form\.expressCompanyName"/)
|
||||
assert.doesNotMatch(source, /v-model="form\.trackingNumber"/)
|
||||
})
|
||||
|
||||
test('protects unsaved drafts and exposes recoverable load failures', () => {
|
||||
assert.match(source, /onBeforeRouteLeave/)
|
||||
assert.match(source, /beforeunload/)
|
||||
assert.match(source, /confirmDiscardChanges/)
|
||||
assert.match(source, /:before-close="requestCloseEditor"/)
|
||||
assert.match(source, /store\.loadError/)
|
||||
assert.match(source, /订单数据加载失败/)
|
||||
assert.match(source, /订单详情加载失败/)
|
||||
assert.match(source, /部分订单配套数据加载失败/)
|
||||
assert.match(source, /往来单位加载失败/)
|
||||
assert.match(source, /企业资料加载失败/)
|
||||
assert.match(source, /@click="loadPageData"/)
|
||||
assert.match(source, /@click="retryDetail"/)
|
||||
})
|
||||
|
||||
test('copies reactive order drafts into plain request data', () => {
|
||||
assert.match(source, /function cloneDraft\(draft: FirstLegOrderDraft\)/)
|
||||
assert.match(source, /items: draft\.items\.map\(\(item\) => \(\{ \.\.\.item \}\)\)/)
|
||||
assert.match(source, /store\.saveDraft\(cloneDraft\(form\)/)
|
||||
assert.match(source, /store\.submit\(cloneDraft\(form\)/)
|
||||
assert.doesNotMatch(source, /structuredClone\((?:form|order\.)/)
|
||||
})
|
||||
|
||||
test('loads complete order detail before editing and rejects an unavailable historical warehouse', () => {
|
||||
assert.match(source, /async function openEdit\(order: FirstLegOrder\)/)
|
||||
assert.match(source, /const detailedOrder = await store\.loadDetail\(order\.id\)/)
|
||||
assert.match(source, /draftFromOrder\(detailedOrder\)/)
|
||||
assert.match(source, /draft\.receivingWarehouseId = ''/)
|
||||
assert.match(source, /原平台收货仓当前不可用，请重新选择可用收货仓/)
|
||||
})
|
||||
@@ -0,0 +1,925 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormItemRule, type FormRules } from 'element-plus'
|
||||
import { AlertTriangle, Box, Eye, FilePlus2, MapPin, PackageCheck, Pencil, Plus, Send, Trash2 } from '@lucide/vue'
|
||||
import { FIRST_LEG_ORDER_STATUSES, FIRST_LEG_TRANSPORT_MODES, type FirstLegOrderStatus } from '@chongchong/shared'
|
||||
import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
|
||||
import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
|
||||
import FirstLegOrderEditorShell from '@/components/first-leg/FirstLegOrderEditorShell.vue'
|
||||
import { useFirstLegOrdersStore } from '@/stores/firstLegOrders'
|
||||
import { useTenantAdministrationStore } from '@/stores/tenantAdministration'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { createFirstLegPartySnapshot, type FirstLegPartyRole } from '@/data/firstLegParties'
|
||||
import { firstLegPartySource } from '@/data/firstLegPartySource'
|
||||
import type { FirstLegOrder, FirstLegOrderDraft } from '@/types/firstLegOrder'
|
||||
import {
|
||||
canClientEditFirstLegOrder,
|
||||
createEmptyCargoItem,
|
||||
getFirstLegStatusLabel,
|
||||
getFirstLegStatusTone,
|
||||
getFirstLegTransportModeLabel,
|
||||
summarizeFirstLegCargo,
|
||||
validateFirstLegOrderDraft,
|
||||
} from '@/utils/firstLegOrder'
|
||||
|
||||
const store = useFirstLegOrdersStore()
|
||||
const tenantStore = useTenantAdministrationStore()
|
||||
const auth = useAuthStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const isCreatePage = computed(() => route.name === 'first-leg-order-create')
|
||||
const companyApproved = computed(() => tenantStore.company.auditStatus === 'ACTIVE')
|
||||
const canCreateOrder = computed(() => auth.hasPermission('order:first-leg:create'))
|
||||
const canEditOrder = computed(() => auth.hasPermission('order:first-leg:edit'))
|
||||
const availableWarehouses = computed(() => store.warehouses)
|
||||
const availableShippers = ref(firstLegPartySource.listAvailable('SHIPPER'))
|
||||
const availableConsignees = ref(firstLegPartySource.listAvailable('CONSIGNEE'))
|
||||
const filters = ref<QueryModel>({ keyword: '', status: '', transportMode: '', createdRange: [] })
|
||||
const appliedFilters = ref<QueryModel>({ ...filters.value })
|
||||
const queryFields: QueryField[] = [
|
||||
{ key: 'keyword', type: 'input', placeholder: '订单号、参考号、路线或品名', props: { 'aria-label': '订单关键词' } },
|
||||
{ key: 'status', type: 'select', placeholder: '全部状态', options: FIRST_LEG_ORDER_STATUSES.map((item) => ({ label: item.label, value: item.code })), props: { 'aria-label': '订单状态' } },
|
||||
{ key: 'transportMode', type: 'select', placeholder: '全部运输方式', options: FIRST_LEG_TRANSPORT_MODES.map((item) => ({ label: item.label, value: item.code })), props: { 'aria-label': '运输方式' } },
|
||||
{ key: 'createdRange', type: 'daterange', placeholder: '订单创建日期', props: { 'aria-label': '订单创建日期' } },
|
||||
]
|
||||
const channelOptions = [
|
||||
{ code: 'SEA-US-GENERAL', name: '美线普货专线' },
|
||||
{ code: 'SEA-US-SENSITIVE', name: '美线敏感货专线' },
|
||||
{ code: 'SEA-US-EXPRESS', name: '美线快线' },
|
||||
{ code: 'SEA-US-FBA', name: '美线 FBA 直送' },
|
||||
]
|
||||
const orderColumns: DataTableColumn[] = [
|
||||
{ key: 'actions', label: '操作', width: 180, fixed: 'left', slotName: 'actions' },
|
||||
{ key: 'order', label: '订单', minWidth: 190, slotName: 'order' },
|
||||
{ key: 'route', label: '运输路线', minWidth: 190, slotName: 'route' },
|
||||
{ key: 'warehouse', label: '收货仓', prop: 'receivingWarehouseName', minWidth: 120 },
|
||||
{ key: 'cargo', label: '货物', minWidth: 150, slotName: 'cargo' },
|
||||
{ key: 'status', label: '状态', width: 120, slotName: 'status' },
|
||||
{ key: 'operator', label: '负责人', width: 110, slotName: 'operator' },
|
||||
{ key: 'updatedAt', label: '更新时间', width: 155, slotName: 'updatedAt' },
|
||||
]
|
||||
const tablePage = ref(1)
|
||||
const tablePageSize = ref(10)
|
||||
const editorOpen = ref(false)
|
||||
const orderFormRef = ref<FormInstance>()
|
||||
const detailOpen = ref(false)
|
||||
const editingId = ref<string>()
|
||||
const openingEditor = ref(false)
|
||||
const detailId = ref<string>()
|
||||
const saving = ref(false)
|
||||
const detailLoading = ref(false)
|
||||
const detailError = ref('')
|
||||
const supportingDataLoading = ref(false)
|
||||
const supportingDataErrors = ref<string[]>([])
|
||||
const editorBaseline = ref('')
|
||||
let cargoSequence = 0
|
||||
|
||||
const orderFormRules: FormRules = {
|
||||
transportMode: [{ required: true, message: '请选择运输方式', trigger: 'change' }],
|
||||
businessType: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
|
||||
origin: [{ required: true, message: '请输入起运地', trigger: 'blur' }],
|
||||
destination: [{ required: true, message: '请输入目的地', trigger: 'blur' }],
|
||||
receivingWarehouseId: [{ required: true, message: '请选择平台收货仓', trigger: 'change' }],
|
||||
destinationCountryCode: [
|
||||
{ required: true, message: '请输入目的国代码', trigger: 'blur' },
|
||||
{ pattern: /^[A-Za-z]{2}$/, message: '请输入两位英文字母，例如 US', trigger: 'blur' },
|
||||
],
|
||||
destinationWarehouseName: [{ required: true, message: '请输入目的仓名称', trigger: 'blur' }],
|
||||
channelCode: [{ required: true, message: '请输入渠道编码', trigger: 'blur' }],
|
||||
channelName: [{ required: true, message: '请输入渠道名称', trigger: 'blur' }],
|
||||
pickupMethod: [{ required: true, message: '请选择提货方式', trigger: 'change' }],
|
||||
taxMode: [{ required: true, message: '请选择报关模式', trigger: 'change' }],
|
||||
destinationType: [{ required: true, message: '请选择目的仓类型', trigger: 'change' }],
|
||||
shipperPartyId: [{ required: true, message: '请选择发货单位', trigger: 'change' }],
|
||||
consigneePartyId: [{ required: true, message: '请选择收货单位', trigger: 'change' }],
|
||||
}
|
||||
|
||||
function requiredTextRules(message: string): FormItemRule[] {
|
||||
return [{ required: true, message, trigger: 'blur' }]
|
||||
}
|
||||
|
||||
function requiredSelectRules(message: string): FormItemRule[] {
|
||||
return [{ required: true, message, trigger: 'change' }]
|
||||
}
|
||||
|
||||
function positiveNumberRules(message: string, integer = false): FormItemRule[] {
|
||||
return [{ type: integer ? 'integer' : 'number', min: integer ? 1 : 0.001, message, trigger: 'change' }]
|
||||
}
|
||||
|
||||
function formatDateTime(value: string) {
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return value || '-'
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
})
|
||||
}
|
||||
|
||||
function emptyDraft(): FirstLegOrderDraft {
|
||||
return {
|
||||
referenceNo: '',
|
||||
transportMode: 'FCL',
|
||||
businessType: 'EXPORT',
|
||||
origin: '',
|
||||
destination: '',
|
||||
receivingWarehouseId: '',
|
||||
expectedDepartureDate: '',
|
||||
shipperPartyId: '',
|
||||
shipperPartySnapshot: null,
|
||||
shipper: '',
|
||||
consigneePartyId: '',
|
||||
consigneePartySnapshot: null,
|
||||
consignee: '',
|
||||
priority: 'NORMAL',
|
||||
customerRemark: '',
|
||||
tradeTerm: 'FOB',
|
||||
destinationCountryCode: 'US',
|
||||
destinationWarehouseName: '',
|
||||
pickupMethod: 'SELF_EXPRESS',
|
||||
channelCode: 'SEA-US-FBA',
|
||||
channelName: '美线 FBA 直送',
|
||||
taxMode: 'BUY_DECLARATION',
|
||||
customsInspection: false,
|
||||
destinationType: 'FBA',
|
||||
amazonWarehouseCode: '',
|
||||
shipmentId: '',
|
||||
items: [createEmptyCargoItem(`new-cargo-${++cargoSequence}`)],
|
||||
}
|
||||
}
|
||||
|
||||
const form = reactive<FirstLegOrderDraft>(emptyDraft())
|
||||
const serializedDraft = computed(() => JSON.stringify(form))
|
||||
const editorDirty = computed(() => (editorOpen.value || isCreatePage.value) && serializedDraft.value !== editorBaseline.value)
|
||||
|
||||
const filteredOrders = computed(() => store.orders.filter((order) => {
|
||||
const keywordValue = appliedFilters.value.keyword
|
||||
const statusValue = appliedFilters.value.status
|
||||
const transportModeValue = appliedFilters.value.transportMode
|
||||
const createdRangeValue = appliedFilters.value.createdRange
|
||||
const keyword = typeof keywordValue === 'string' ? keywordValue.trim().toLowerCase() : ''
|
||||
const status = typeof statusValue === 'string' ? statusValue as FirstLegOrderStatus | '' : ''
|
||||
const transportMode = typeof transportModeValue === 'string' ? transportModeValue : ''
|
||||
const createdRange = Array.isArray(createdRangeValue) ? createdRangeValue.filter((value): value is string => typeof value === 'string') : []
|
||||
const matchesKeyword = !keyword || [order.orderNo, order.referenceNo, order.origin, order.destination, order.items.map((item) => item.cargoNameCn).join(' ')]
|
||||
.filter(Boolean)
|
||||
.some((value) => String(value).toLowerCase().includes(keyword))
|
||||
const matchesStatus = !status || order.status === status
|
||||
const matchesMode = !transportMode || order.transportMode === transportMode
|
||||
const matchesDate = createdRange.length !== 2 || (order.createdAt.slice(0, 10) >= createdRange[0] && order.createdAt.slice(0, 10) <= createdRange[1])
|
||||
return matchesKeyword && matchesStatus && matchesMode && matchesDate
|
||||
}))
|
||||
const pagedOrders = computed(() => {
|
||||
const start = (tablePage.value - 1) * tablePageSize.value
|
||||
return filteredOrders.value.slice(start, start + tablePageSize.value)
|
||||
})
|
||||
|
||||
const detailOrder = computed(() => detailId.value ? store.getById(detailId.value) : undefined)
|
||||
const detailSummary = computed(() => detailOrder.value ? summarizeFirstLegCargo(detailOrder.value.items) : null)
|
||||
const selectedWarehouse = computed(() => availableWarehouses.value.find((item) => item.id === form.receivingWarehouseId))
|
||||
const hasActiveFilters = computed(() => {
|
||||
const values = appliedFilters.value
|
||||
return Boolean(
|
||||
(typeof values.keyword === 'string' && values.keyword.trim())
|
||||
|| values.status
|
||||
|| values.transportMode
|
||||
|| (Array.isArray(values.createdRange) && values.createdRange.length),
|
||||
)
|
||||
})
|
||||
const emptyDescription = computed(() => hasActiveFilters.value ? '没有符合筛选条件的头程订单' : '还没有头程订单')
|
||||
|
||||
async function loadPageData() {
|
||||
supportingDataLoading.value = true
|
||||
supportingDataErrors.value = []
|
||||
availableShippers.value = []
|
||||
availableConsignees.value = []
|
||||
|
||||
const companyRequest = auth.hasPermission('company:profile:view')
|
||||
? tenantStore.loadCompanyContext()
|
||||
: Promise.resolve()
|
||||
const [ordersResult, partiesResult, companyResult] = await Promise.allSettled([
|
||||
store.load(),
|
||||
firstLegPartySource.load(),
|
||||
companyRequest,
|
||||
])
|
||||
|
||||
if (partiesResult.status === 'fulfilled') {
|
||||
availableShippers.value = firstLegPartySource.listAvailable('SHIPPER')
|
||||
availableConsignees.value = firstLegPartySource.listAvailable('CONSIGNEE')
|
||||
} else {
|
||||
supportingDataErrors.value.push(`往来单位加载失败：${errorMessage(partiesResult.reason)}`)
|
||||
}
|
||||
if (companyResult.status === 'rejected') {
|
||||
supportingDataErrors.value.push(`企业资料加载失败：${errorMessage(companyResult.reason)}`)
|
||||
}
|
||||
if (ordersResult.status === 'rejected' && !store.loadError) {
|
||||
supportingDataErrors.value.push(`订单与仓库加载失败：${errorMessage(ordersResult.reason)}`)
|
||||
}
|
||||
supportingDataLoading.value = false
|
||||
}
|
||||
|
||||
function errorMessage(error: unknown) {
|
||||
return error instanceof Error ? error.message : '服务暂时不可用'
|
||||
}
|
||||
|
||||
function handleBeforeUnload(event: BeforeUnloadEvent) {
|
||||
if (!editorDirty.value) return
|
||||
event.preventDefault()
|
||||
event.returnValue = ''
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('beforeunload', handleBeforeUnload)
|
||||
void loadPageData()
|
||||
})
|
||||
|
||||
watch(isCreatePage, (isCreate, wasCreate) => {
|
||||
if (!isCreate || wasCreate) return
|
||||
editingId.value = undefined
|
||||
replaceForm(emptyDraft())
|
||||
resetEditorValidation()
|
||||
}, { immediate: true })
|
||||
|
||||
onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnload))
|
||||
|
||||
onBeforeRouteLeave(async () => {
|
||||
if (!editorDirty.value) return true
|
||||
return confirmDiscardChanges()
|
||||
})
|
||||
|
||||
function markEditorClean() {
|
||||
editorBaseline.value = serializedDraft.value
|
||||
}
|
||||
|
||||
function resetEditorValidation() {
|
||||
void nextTick(() => orderFormRef.value?.clearValidate())
|
||||
}
|
||||
|
||||
function cloneDraft(draft: FirstLegOrderDraft): FirstLegOrderDraft {
|
||||
return {
|
||||
...draft,
|
||||
shipperPartySnapshot: draft.shipperPartySnapshot ? { ...draft.shipperPartySnapshot } : null,
|
||||
consigneePartySnapshot: draft.consigneePartySnapshot ? { ...draft.consigneePartySnapshot } : null,
|
||||
items: draft.items.map((item) => ({ ...item })),
|
||||
}
|
||||
}
|
||||
|
||||
function replaceForm(draft: FirstLegOrderDraft) {
|
||||
Object.assign(form, cloneDraft(draft))
|
||||
markEditorClean()
|
||||
}
|
||||
|
||||
function draftFromOrder(order: FirstLegOrder): FirstLegOrderDraft {
|
||||
return {
|
||||
referenceNo: order.referenceNo,
|
||||
transportMode: order.transportMode,
|
||||
businessType: order.businessType,
|
||||
origin: order.origin,
|
||||
destination: order.destination,
|
||||
receivingWarehouseId: order.receivingWarehouseId,
|
||||
expectedDepartureDate: order.expectedDepartureDate,
|
||||
shipperPartyId: order.shipperPartyId,
|
||||
shipperPartySnapshot: order.shipperPartySnapshot ? { ...order.shipperPartySnapshot } : null,
|
||||
shipper: order.shipper,
|
||||
consigneePartyId: order.consigneePartyId,
|
||||
consigneePartySnapshot: order.consigneePartySnapshot ? { ...order.consigneePartySnapshot } : null,
|
||||
consignee: order.consignee,
|
||||
priority: order.priority,
|
||||
customerRemark: order.customerRemark,
|
||||
tradeTerm: order.tradeTerm,
|
||||
destinationCountryCode: order.destinationCountryCode,
|
||||
destinationWarehouseName: order.destinationWarehouseName,
|
||||
pickupMethod: order.pickupMethod,
|
||||
channelCode: order.channelCode,
|
||||
channelName: order.channelName,
|
||||
taxMode: order.taxMode,
|
||||
customsInspection: order.customsInspection,
|
||||
destinationType: order.destinationType,
|
||||
amazonWarehouseCode: order.amazonWarehouseCode,
|
||||
shipmentId: order.shipmentId,
|
||||
items: order.items.map((item) => ({ ...item })),
|
||||
}
|
||||
}
|
||||
|
||||
function selectParty(role: FirstLegPartyRole, id: string) {
|
||||
const party = firstLegPartySource.findAvailable(id, role)
|
||||
if (!party) return
|
||||
const snapshot = createFirstLegPartySnapshot(party, role)
|
||||
if (role === 'SHIPPER') {
|
||||
form.shipperPartyId = party.id
|
||||
form.shipperPartySnapshot = snapshot
|
||||
form.shipper = party.name
|
||||
form.origin = [snapshot.province, snapshot.city].filter(Boolean).join(' ') || snapshot.countryRegion || snapshot.name
|
||||
} else {
|
||||
form.consigneePartyId = party.id
|
||||
form.consigneePartySnapshot = snapshot
|
||||
form.consignee = party.name
|
||||
form.destination = [snapshot.province, snapshot.city].filter(Boolean).join(' ') || snapshot.countryRegion || snapshot.name
|
||||
if (/^[A-Za-z]{2}$/.test(snapshot.countryRegion)) form.destinationCountryCode = snapshot.countryRegion.toUpperCase()
|
||||
}
|
||||
}
|
||||
|
||||
function clearParty(role: FirstLegPartyRole) {
|
||||
if (role === 'SHIPPER') {
|
||||
form.shipperPartyId = ''
|
||||
form.shipperPartySnapshot = null
|
||||
form.shipper = ''
|
||||
form.origin = ''
|
||||
} else {
|
||||
form.consigneePartyId = ''
|
||||
form.consigneePartySnapshot = null
|
||||
form.consignee = ''
|
||||
form.destination = ''
|
||||
}
|
||||
}
|
||||
|
||||
function selectChannel(code: string) {
|
||||
const channel = channelOptions.find((item) => item.code === code)
|
||||
form.channelName = channel?.name ?? ''
|
||||
}
|
||||
|
||||
function syncAmazonWarehouse(value: string) {
|
||||
if (form.destinationType === 'FBA') form.destinationWarehouseName = value.trim()
|
||||
}
|
||||
|
||||
function selectShipper(id: string) {
|
||||
selectParty('SHIPPER', id)
|
||||
}
|
||||
|
||||
function selectConsignee(id: string) {
|
||||
selectParty('CONSIGNEE', id)
|
||||
}
|
||||
|
||||
function clearShipper() {
|
||||
clearParty('SHIPPER')
|
||||
}
|
||||
|
||||
function clearConsignee() {
|
||||
clearParty('CONSIGNEE')
|
||||
}
|
||||
|
||||
async function loadSelectedWarehouse(id: string | number | boolean | undefined) {
|
||||
const warehouseId = typeof id === 'string' ? id : typeof id === 'number' ? String(id) : ''
|
||||
if (!warehouseId) return
|
||||
try {
|
||||
await store.loadWarehouseDetail(warehouseId)
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '仓库地址与收货时间加载失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function openCreate() {
|
||||
if (availableWarehouses.value.length === 0) {
|
||||
ElMessage.warning('当前没有可用的平台收货仓，请联系平台维护仓库后再创建订单')
|
||||
return
|
||||
}
|
||||
editingId.value = undefined
|
||||
replaceForm(emptyDraft())
|
||||
resetEditorValidation()
|
||||
await router.push({ name: 'first-leg-order-create' })
|
||||
}
|
||||
|
||||
async function openEdit(order: FirstLegOrder) {
|
||||
if (openingEditor.value || !canEditOrder.value || !canClientEditFirstLegOrder(order.status)) return
|
||||
openingEditor.value = true
|
||||
try {
|
||||
const detailedOrder = await store.loadDetail(order.id)
|
||||
const draft = draftFromOrder(detailedOrder)
|
||||
const warehouseAvailable = availableWarehouses.value.some((item) => item.id === detailedOrder.receivingWarehouseId)
|
||||
if (!warehouseAvailable) {
|
||||
draft.receivingWarehouseId = ''
|
||||
ElMessage.warning('原平台收货仓当前不可用，请重新选择可用收货仓')
|
||||
}
|
||||
editingId.value = detailedOrder.id
|
||||
replaceForm(draft)
|
||||
if (warehouseAvailable) void loadSelectedWarehouse(detailedOrder.receivingWarehouseId)
|
||||
detailOpen.value = false
|
||||
editorOpen.value = true
|
||||
resetEditorValidation()
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '订单详情加载失败，暂时无法编辑')
|
||||
} finally {
|
||||
openingEditor.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function openDetail(order: FirstLegOrder) {
|
||||
detailId.value = order.id
|
||||
detailOpen.value = true
|
||||
detailLoading.value = true
|
||||
detailError.value = ''
|
||||
try {
|
||||
await store.loadDetail(order.id)
|
||||
} catch (error) {
|
||||
detailError.value = error instanceof Error ? error.message : '订单详情加载失败'
|
||||
ElMessage.error(detailError.value)
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function retryDetail() {
|
||||
const order = detailId.value ? store.getById(detailId.value) : undefined
|
||||
if (order) await openDetail(order)
|
||||
}
|
||||
|
||||
async function confirmDiscardChanges() {
|
||||
try {
|
||||
await ElMessageBox.confirm('当前订单还有未保存的修改。离开后这些内容将丢失。', '放弃未保存的修改？', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '放弃修改',
|
||||
cancelButtonText: '继续编辑',
|
||||
})
|
||||
return true
|
||||
} catch (error) {
|
||||
if (error === 'cancel' || error === 'close') return false
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
async function requestCloseEditor(done: () => void) {
|
||||
if (saving.value) return
|
||||
if (!editorDirty.value || await confirmDiscardChanges()) done()
|
||||
}
|
||||
|
||||
function closeEditor() {
|
||||
void requestCloseEditor(() => {
|
||||
editorOpen.value = false
|
||||
if (isCreatePage.value) {
|
||||
markEditorClean()
|
||||
void router.push({ name: 'first-leg-orders' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addCargoItem() {
|
||||
form.items.push(createEmptyCargoItem(`new-cargo-${++cargoSequence}`))
|
||||
resetEditorValidation()
|
||||
}
|
||||
|
||||
function removeCargoItem(index: number) {
|
||||
if (form.items.length === 1) {
|
||||
ElMessage.warning('订单至少需要保留一条货物明细')
|
||||
return
|
||||
}
|
||||
form.items.splice(index, 1)
|
||||
resetEditorValidation()
|
||||
}
|
||||
|
||||
async function validateEditorForm() {
|
||||
let fieldsValid = false
|
||||
try {
|
||||
fieldsValid = await orderFormRef.value?.validate() ?? false
|
||||
} catch {
|
||||
fieldsValid = false
|
||||
}
|
||||
if (!fieldsValid) {
|
||||
ElMessage.warning('请检查并完善表单中标红的必填信息')
|
||||
return false
|
||||
}
|
||||
|
||||
const errors = validateFirstLegOrderDraft(form)
|
||||
if (errors.length > 0) {
|
||||
ElMessage.warning(errors[0])
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
async function saveDraft() {
|
||||
if (saving.value) return
|
||||
if (!await validateEditorForm()) return
|
||||
saving.value = true
|
||||
try {
|
||||
const order = await store.saveDraft(cloneDraft(form), tenantStore.company.companyName, editingId.value)
|
||||
editingId.value = order.id
|
||||
markEditorClean()
|
||||
editorOpen.value = false
|
||||
if (isCreatePage.value) await router.push({ name: 'first-leg-orders' })
|
||||
ElMessage.success('订单草稿已保存')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '草稿保存失败')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitOrder() {
|
||||
if (saving.value) return
|
||||
if (!companyApproved.value) {
|
||||
try {
|
||||
await ElMessageBox.confirm('企业资料审核通过后才能提交订单。您可以继续保存草稿，或前往企业资料核对并补充信息。', '暂时无法提交订单', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '前往企业资料',
|
||||
cancelButtonText: '继续编辑草稿',
|
||||
})
|
||||
markEditorClean()
|
||||
editorOpen.value = false
|
||||
await router.push('/company/profile')
|
||||
} catch (error) {
|
||||
if (error === 'cancel' || error === 'close') return
|
||||
throw error
|
||||
}
|
||||
return
|
||||
}
|
||||
if (!await validateEditorForm()) return
|
||||
|
||||
try {
|
||||
saving.value = true
|
||||
const order = await store.submit(cloneDraft(form), tenantStore.company.companyName, editingId.value, tenantStore.company.auditStatus)
|
||||
markEditorClean()
|
||||
editorOpen.value = false
|
||||
if (isCreatePage.value) await router.push({ name: 'first-leg-orders' })
|
||||
detailId.value = order.id
|
||||
detailOpen.value = true
|
||||
ElMessage.success('订单已提交，等待平台审核')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '订单提交失败')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function searchOrders(model: QueryModel) {
|
||||
const createdRange = model.createdRange
|
||||
appliedFilters.value = {
|
||||
...model,
|
||||
createdRange: Array.isArray(createdRange) ? createdRange.filter((value): value is string => typeof value === 'string') : [],
|
||||
}
|
||||
tablePage.value = 1
|
||||
try {
|
||||
await store.load()
|
||||
} catch {
|
||||
// Store keeps the recoverable error state rendered below the query toolbar.
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="first-leg-page" :class="{ 'is-create-route': isCreatePage }">
|
||||
<template v-if="!isCreatePage">
|
||||
<QueryToolbar v-model="filters" class="first-leg-query-toolbar" :fields="queryFields" ariaLabel="头程订单查询" @search="searchOrders" />
|
||||
|
||||
<div class="client-card order-table-card">
|
||||
<div class="order-table-toolbar">
|
||||
<div><strong>订单列表</strong><span>共 {{ filteredOrders.length }} 条</span></div>
|
||||
<el-button v-if="auth.hasPermission('order:first-leg:create')" type="primary" :disabled="availableWarehouses.length === 0" @click="openCreate"><FilePlus2 :size="17" />创建订单</el-button>
|
||||
</div>
|
||||
<div v-if="!companyApproved && !supportingDataErrors.some((message) => message.startsWith('企业资料'))" class="order-eligibility is-pending" role="status">
|
||||
<AlertTriangle :size="20" />
|
||||
<div><strong>{{ canCreateOrder ? '企业资料待审核，当前仅可保存订单草稿' : '企业资料待审核，当前订单为只读' }}</strong><span>{{ canCreateOrder ? '平台审核通过后即可提交；您仍可创建、编辑和保存草稿。' : '您当前拥有只读权限，可以继续查看订单进展。' }}</span></div>
|
||||
<el-button v-if="!companyApproved && auth.hasPermission('company:profile:view')" link type="primary" @click="router.push('/company/profile')">查看企业资料</el-button>
|
||||
</div>
|
||||
<div v-if="supportingDataErrors.length" class="supporting-data-error" role="alert">
|
||||
<AlertTriangle :size="20" />
|
||||
<div><strong>部分订单配套数据加载失败</strong><span v-for="message in supportingDataErrors" :key="message">{{ message }}</span></div>
|
||||
<el-button :loading="supportingDataLoading || store.loading" @click="loadPageData">重新加载</el-button>
|
||||
</div>
|
||||
<div v-if="store.loadError" class="order-load-state" role="alert">
|
||||
<AlertTriangle :size="24" />
|
||||
<div><strong>订单数据加载失败</strong><span>{{ store.loadError }}</span></div>
|
||||
<el-button :loading="store.loading" @click="loadPageData">重新加载</el-button>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="desktop-order-table">
|
||||
<DataTable v-model:page="tablePage" v-model:page-size="tablePageSize" :data="pagedOrders" :columns="orderColumns" :loading="store.loading" :total="filteredOrders.length" :page-sizes="[10, 20, 50]" row-key="id" empty-text="暂无头程订单">
|
||||
<template #actions="{ row }">
|
||||
<div class="order-row-actions">
|
||||
<el-button link type="primary" @click="openDetail(row as FirstLegOrder)"><Eye :size="15" />详情</el-button>
|
||||
<el-button v-if="canEditOrder && canClientEditFirstLegOrder((row as FirstLegOrder).status)" link type="primary" :loading="openingEditor" @click="openEdit(row as FirstLegOrder)"><Pencil :size="15" />编辑</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #order="{ row }">
|
||||
<button class="order-number-link" type="button" @click="openDetail(row as FirstLegOrder)">{{ (row as FirstLegOrder).orderNo || '未提交草稿' }}</button>
|
||||
<span class="order-reference">{{ (row as FirstLegOrder).referenceNo || '无客户参考号' }}</span>
|
||||
</template>
|
||||
<template #route="{ row }"><strong>{{ (row as FirstLegOrder).origin }} → {{ (row as FirstLegOrder).destination }}</strong><span class="order-reference">{{ getFirstLegTransportModeLabel((row as FirstLegOrder).transportMode) }}</span></template>
|
||||
<template #cargo="{ row }">{{ (row as FirstLegOrder).items[0]?.cargoNameCn || '-' }}<span v-if="(row as FirstLegOrder).items.length > 1" class="order-reference">等 {{ (row as FirstLegOrder).items.length }} 项</span></template>
|
||||
<template #status="{ row }"><el-tag :type="getFirstLegStatusTone((row as FirstLegOrder).status)" effect="light">{{ getFirstLegStatusLabel((row as FirstLegOrder).status) }}</el-tag></template>
|
||||
<template #operator="{ row }">{{ (row as FirstLegOrder).operatorName || '-' }}</template>
|
||||
<template #updatedAt="{ row }">{{ formatDateTime((row as FirstLegOrder).updatedAt) }}</template>
|
||||
<template #empty>
|
||||
<el-empty :description="emptyDescription">
|
||||
<el-button v-if="auth.hasPermission('order:first-leg:create')" type="primary" :disabled="availableWarehouses.length === 0" @click="openCreate"><Plus :size="16" />{{ availableWarehouses.length ? '创建第一笔订单' : '暂无可用收货仓' }}</el-button>
|
||||
</el-empty>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
<div v-loading="store.loading" class="mobile-order-surface">
|
||||
<div v-if="filteredOrders.length" class="mobile-order-list">
|
||||
<article v-for="order in filteredOrders" :key="order.id" class="mobile-order-card">
|
||||
<header><button type="button" @click="openDetail(order)">{{ order.orderNo || '未提交草稿' }}</button><el-tag :type="getFirstLegStatusTone(order.status)" effect="light">{{ getFirstLegStatusLabel(order.status) }}</el-tag></header>
|
||||
<span class="order-reference">{{ order.referenceNo || '无客户参考号' }}</span>
|
||||
<dl><div><dt>运输路线</dt><dd>{{ order.origin }} → {{ order.destination }}</dd></div><div><dt>收货仓</dt><dd>{{ order.receivingWarehouseName }}</dd></div><div><dt>货物</dt><dd>{{ order.items[0]?.cargoNameCn || '-' }}<span v-if="order.items.length > 1">等 {{ order.items.length }} 项</span></dd></div><div><dt>负责人</dt><dd>{{ order.operatorName || '-' }}</dd></div></dl>
|
||||
<footer><span>更新于 {{ formatDateTime(order.updatedAt) }}</span><div><el-button link type="primary" @click="openDetail(order)"><Eye :size="15" />详情</el-button><el-button v-if="canEditOrder && canClientEditFirstLegOrder(order.status)" link type="primary" :loading="openingEditor" @click="openEdit(order)"><Pencil :size="15" />编辑</el-button></div></footer>
|
||||
</article>
|
||||
</div>
|
||||
<el-empty v-else :description="emptyDescription">
|
||||
<el-button v-if="auth.hasPermission('order:first-leg:create')" type="primary" :disabled="availableWarehouses.length === 0" @click="openCreate"><Plus :size="16" />{{ availableWarehouses.length ? '创建第一笔订单' : '暂无可用收货仓' }}</el-button>
|
||||
</el-empty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="isCreatePage && supportingDataErrors.length" class="supporting-data-error" role="alert">
|
||||
<AlertTriangle :size="20" />
|
||||
<div><strong>下单配套数据加载失败</strong><span v-for="message in supportingDataErrors" :key="message">{{ message }}</span></div>
|
||||
<el-button :loading="supportingDataLoading || store.loading" @click="loadPageData">重新加载</el-button>
|
||||
</div>
|
||||
<el-alert v-if="isCreatePage && !supportingDataLoading && availableWarehouses.length === 0" title="当前没有可用的平台收货仓" description="请联系平台维护并启用收货仓后再创建订单。" type="warning" :closable="false" show-icon />
|
||||
|
||||
<FirstLegOrderEditorShell v-model="editorOpen" :page="isCreatePage" :title="editingId ? '编辑订单草稿' : '创建头程订单'" :before-close="requestCloseEditor" @back="closeEditor">
|
||||
<el-form ref="orderFormRef" v-loading="isCreatePage && (supportingDataLoading || store.loading)" :model="form" :rules="orderFormRules" label-position="top" class="order-form prototype-order-form" scroll-to-error>
|
||||
<section class="order-form-section prototype-section">
|
||||
<div class="order-section-heading"><div><h3>下单信息</h3><p>选择送货方式、收货仓和运输渠道。</p></div></div>
|
||||
<div class="order-form-grid">
|
||||
<el-form-item label="取货方式" prop="pickupMethod" required class="form-span-full"><el-radio-group v-model="form.pickupMethod" class="segmented-options"><el-radio-button value="SELF_EXPRESS">自送货 · 快递</el-radio-button><el-radio-button value="PICKUP">我司提货</el-radio-button><el-radio-button value="SELF_TRUCK">自送货 · 卡车</el-radio-button></el-radio-group></el-form-item>
|
||||
<el-form-item label="平台收货仓" prop="receivingWarehouseId" required class="form-span-full"><el-radio-group v-model="form.receivingWarehouseId" class="warehouse-options" @change="loadSelectedWarehouse"><el-radio-button v-for="warehouse in availableWarehouses" :key="warehouse.id" :value="warehouse.id">{{ warehouse.city ? `${warehouse.name} · ${warehouse.city}` : warehouse.name }}</el-radio-button></el-radio-group></el-form-item>
|
||||
<el-form-item label="渠道" prop="channelCode" required><el-select v-model="form.channelCode" placeholder="请选择运输渠道" @change="selectChannel"><el-option v-if="form.channelCode && !channelOptions.some((channel) => channel.code === form.channelCode)" :label="form.channelName || form.channelCode" :value="form.channelCode" /><el-option v-for="channel in channelOptions" :key="channel.code" :label="channel.name" :value="channel.code" /></el-select></el-form-item>
|
||||
<el-form-item label="买单 / 退税" prop="taxMode" required><el-radio-group v-model="form.taxMode"><el-radio value="BUY_DECLARATION">买单报关</el-radio><el-radio value="TAX_REFUND">退税报关</el-radio></el-radio-group></el-form-item>
|
||||
<el-form-item label="运输方式" prop="transportMode" required><el-radio-group v-model="form.transportMode"><el-radio v-for="item in FIRST_LEG_TRANSPORT_MODES" :key="item.code" :value="item.code">{{ item.label }}</el-radio></el-radio-group></el-form-item>
|
||||
<el-form-item label="是否商检" prop="customsInspection" required><el-radio-group v-model="form.customsInspection"><el-radio :value="true">是</el-radio><el-radio :value="false">否</el-radio></el-radio-group></el-form-item>
|
||||
<el-form-item label="期望出货日期"><el-date-picker v-model="form.expectedDepartureDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择期望出货日期" /></el-form-item>
|
||||
<el-form-item label="订单备注"><el-input v-model="form.customerRemark" maxlength="1000" placeholder="选填，例如：入仓前请电话联系" /></el-form-item>
|
||||
</div>
|
||||
<div v-if="selectedWarehouse" class="selected-warehouse" aria-label="所选收货仓详情"><MapPin :size="17" /><div><span>{{ selectedWarehouse.address ? `${selectedWarehouse.province}${selectedWarehouse.city} · ${selectedWarehouse.address}` : '仓库地址详情暂不可用' }}</span><small>{{ selectedWarehouse.businessHours ? `收货时间：${selectedWarehouse.businessHours}` : '收货时间暂不可用' }}</small></div></div>
|
||||
</section>
|
||||
|
||||
<section class="order-form-section prototype-section destination-section">
|
||||
<div class="order-section-heading"><div><h3>发货与目的地</h3><p>单位信息会保存为本订单快照，后续主数据变更不会影响本单。</p></div></div>
|
||||
<el-form-item label="目的仓类型" prop="destinationType" required><el-radio-group v-model="form.destinationType" class="segmented-options"><el-radio-button value="FBA">FBA 仓</el-radio-button><el-radio-button value="OVERSEAS">海外仓</el-radio-button><el-radio-button value="PRIVATE">私人仓</el-radio-button></el-radio-group></el-form-item>
|
||||
<div class="party-select-grid">
|
||||
<div class="party-panel">
|
||||
<h4>发货信息</h4>
|
||||
<el-alert v-if="availableShippers.length === 0" title="暂无可用发货单位" description="请先在平台往来单位中启用“发货单位”类型。" type="warning" :closable="false" show-icon />
|
||||
<el-form-item label="发货单位" prop="shipperPartyId" required><el-select v-model="form.shipperPartyId" filterable clearable placeholder="请选择发货单位" @change="selectShipper" @clear="clearShipper"><el-option v-if="form.shipperPartySnapshot && !availableShippers.some((party) => party.id === form.shipperPartyId)" :label="`${form.shipperPartySnapshot.name} · 历史快照`" :value="form.shipperPartyId" disabled /><el-option v-for="party in availableShippers" :key="party.id" :label="`${party.name} · ${party.code}`" :value="party.id" /></el-select></el-form-item>
|
||||
<div v-if="form.shipperPartySnapshot" class="party-contact-grid">
|
||||
<el-form-item label="联系人" prop="shipperPartySnapshot.contactName" required :rules="requiredTextRules('请输入发货联系人姓名')"><el-input v-model="form.shipperPartySnapshot.contactName" maxlength="50" placeholder="请输入联系人" /></el-form-item>
|
||||
<el-form-item label="联系电话" prop="shipperPartySnapshot.phone" required :rules="requiredTextRules('请输入发货联系电话')"><el-input v-model="form.shipperPartySnapshot.phone" maxlength="30" placeholder="请输入联系电话" /></el-form-item>
|
||||
<el-form-item label="发货地址" prop="shipperPartySnapshot.address" required :rules="requiredTextRules('请输入本单实际发货地址')" class="form-span-full"><el-input v-model="form.shipperPartySnapshot.address" maxlength="300" placeholder="请输入本单实际发货地址" /></el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="party-panel">
|
||||
<h4>目的地信息</h4>
|
||||
<el-alert v-if="availableConsignees.length === 0" title="暂无可用收货单位" description="请先在平台往来单位中启用“收货单位”类型。" type="warning" :closable="false" show-icon />
|
||||
<el-form-item label="收货单位" prop="consigneePartyId" required><el-select v-model="form.consigneePartyId" filterable clearable placeholder="请选择收货单位" @change="selectConsignee" @clear="clearConsignee"><el-option v-if="form.consigneePartySnapshot && !availableConsignees.some((party) => party.id === form.consigneePartyId)" :label="`${form.consigneePartySnapshot.name} · 历史快照`" :value="form.consigneePartyId" disabled /><el-option v-for="party in availableConsignees" :key="party.id" :label="`${party.name} · ${party.code}`" :value="party.id" /></el-select></el-form-item>
|
||||
<div v-if="form.consigneePartySnapshot" class="party-contact-grid">
|
||||
<el-form-item label="收件人" prop="consigneePartySnapshot.contactName" required :rules="requiredTextRules('请输入收货联系人姓名')"><el-input v-model="form.consigneePartySnapshot.contactName" maxlength="50" placeholder="请输入收件人姓名" /></el-form-item>
|
||||
<el-form-item label="联系电话" prop="consigneePartySnapshot.phone" required :rules="requiredTextRules('请输入收货联系电话')"><el-input v-model="form.consigneePartySnapshot.phone" maxlength="30" placeholder="请输入收件人电话" /></el-form-item>
|
||||
<el-form-item label="收件地址" prop="consigneePartySnapshot.address" required :rules="requiredTextRules('请输入本单实际收货地址')" class="form-span-full"><el-input v-model="form.consigneePartySnapshot.address" maxlength="300" placeholder="请输入收件详细地址" /></el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="destination-fields">
|
||||
<el-form-item label="目的国代码" prop="destinationCountryCode" required><el-input v-model="form.destinationCountryCode" maxlength="2" placeholder="例如：US" /></el-form-item>
|
||||
<el-form-item v-if="form.destinationType === 'FBA'" label="亚马逊仓代码" prop="amazonWarehouseCode" required :rules="requiredTextRules('请输入 Amazon 仓库编码')"><el-input v-model="form.amazonWarehouseCode" maxlength="32" placeholder="例如：ONT8" @input="syncAmazonWarehouse" /></el-form-item>
|
||||
<el-form-item v-else label="目的仓名称" prop="destinationWarehouseName" required><el-input v-model="form.destinationWarehouseName" maxlength="128" placeholder="请输入海外仓或私人仓名称" /></el-form-item>
|
||||
<el-form-item v-if="form.destinationType === 'FBA'" label="货件编号" prop="shipmentId" required :rules="requiredTextRules('请输入 Shipment ID')"><el-input v-model="form.shipmentId" maxlength="64" placeholder="Shipment ID" /></el-form-item>
|
||||
<el-form-item label="跟踪编号" prop="referenceNo" :required="form.destinationType === 'FBA'" :rules="form.destinationType === 'FBA' ? requiredTextRules('FBA 订单请输入 Reference ID') : undefined"><el-input v-model="form.referenceNo" maxlength="100" :placeholder="form.destinationType === 'FBA' ? 'Reference ID' : '选填，贵司内部跟踪编号'" /></el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="order-form-section prototype-section cargo-section">
|
||||
<div class="order-section-heading"><div><h3>货物明细</h3><p>先填写常用字段，申报和整柜信息可按需展开。</p></div><el-button @click="addCargoItem"><Plus :size="16" />添加货物</el-button></div>
|
||||
<article v-for="(item, index) in form.items" :key="item.id" class="cargo-entry">
|
||||
<header><strong>货物 {{ index + 1 }}</strong><el-button link type="danger" :aria-label="`删除货物 ${index + 1}`" @click="removeCargoItem(index)"><Trash2 :size="16" />删除</el-button></header>
|
||||
<div class="cargo-primary-grid">
|
||||
<el-form-item label="SKU" :prop="`items.${index}.sku`" :required="form.destinationType === 'FBA'" :rules="form.destinationType === 'FBA' ? requiredTextRules('FBA 货物请输入客户 SKU') : undefined"><el-input v-model="item.sku" placeholder="SKU NO." /></el-form-item>
|
||||
<el-form-item label="中文品名" :prop="`items.${index}.cargoNameCn`" required :rules="requiredTextRules('请输入中文品名')"><el-input v-model="item.cargoNameCn" placeholder="例如：蓝牙音箱" /></el-form-item>
|
||||
<el-form-item label="英文品名"><el-input v-model="item.cargoNameEn" placeholder="Bluetooth speakers" /></el-form-item>
|
||||
<el-form-item v-if="form.destinationType === 'FBA'" label="UPC" :prop="`items.${index}.upc`" required :rules="requiredTextRules('FBA 货物请输入 UPC')"><el-input v-model="item.upc" maxlength="32" placeholder="UPC NO." /></el-form-item>
|
||||
<el-form-item label="包装类型" :prop="`items.${index}.packageType`" required :rules="requiredSelectRules('请选择包装类型')"><el-select v-model="item.packageType"><el-option label="纸箱" value="CARTON" /><el-option label="托盘" value="PALLET" /><el-option label="木箱" value="WOODEN_CASE" /></el-select></el-form-item>
|
||||
<el-form-item label="总数量" :prop="`items.${index}.pieces`" required :rules="positiveNumberRules('件数必须为大于 0 的整数', true)"><el-input-number v-model="item.pieces" :min="1" controls-position="right" /></el-form-item>
|
||||
<el-form-item label="箱数"><el-input-number v-model="item.packageCount" :min="0" controls-position="right" /></el-form-item>
|
||||
<el-form-item label="总毛重 kg" :prop="`items.${index}.grossWeightKg`" required :rules="positiveNumberRules('毛重必须大于 0')"><el-input-number v-model="item.grossWeightKg" :min="0" :precision="2" controls-position="right" /></el-form-item>
|
||||
<el-form-item label="总体积 m³" :prop="`items.${index}.volumeCbm`" required :rules="positiveNumberRules('体积必须大于 0')"><el-input-number v-model="item.volumeCbm" :min="0" :precision="3" controls-position="right" /></el-form-item>
|
||||
</div>
|
||||
<el-collapse class="cargo-more"><el-collapse-item title="更多申报信息"><div class="cargo-secondary-grid">
|
||||
<el-form-item label="HS Code"><el-input v-model="item.hsCode" maxlength="20" placeholder="例如：8518210000" /></el-form-item>
|
||||
<el-form-item label="申报货值"><el-input-number v-model="item.declaredValue" :min="0" :precision="2" controls-position="right" /></el-form-item>
|
||||
<el-form-item label="币种"><el-input v-model="item.currency" maxlength="3" placeholder="例如：USD" /></el-form-item>
|
||||
<el-form-item label="危险品"><el-switch v-model="item.dangerousGoods" /></el-form-item>
|
||||
<template v-if="form.transportMode === 'FCL'"><el-form-item label="箱型" :prop="`items.${index}.containerType`" required :rules="requiredSelectRules('请选择箱型')"><el-select v-model="item.containerType"><el-option v-for="type in ['20GP', '40GP', '40HQ']" :key="type" :label="type" :value="type" /></el-select></el-form-item><el-form-item label="柜量" :prop="`items.${index}.containerCount`" required :rules="positiveNumberRules('柜量必须为大于 0 的整数', true)"><el-input-number v-model="item.containerCount" :min="0" controls-position="right" /></el-form-item></template>
|
||||
<el-form-item label="货物备注" class="form-span-full"><el-input v-model="item.remark" maxlength="300" placeholder="选填，例如：注意防潮" /></el-form-item>
|
||||
</div></el-collapse-item></el-collapse>
|
||||
</article>
|
||||
<p class="cargo-tip">FBA 货物必须填写 SKU、UPC、货件编号和跟踪编号；提交前请核对重量与体积。</p>
|
||||
</section>
|
||||
</el-form>
|
||||
<template #footer><div class="editor-actions"><el-button :disabled="saving" @click="closeEditor">返回</el-button><el-button v-if="editingId ? canEditOrder : canCreateOrder" :loading="saving" @click="saveDraft">保存草稿</el-button><el-button v-if="auth.hasPermission('order:first-leg:submit')" type="primary" :loading="saving" @click="submitOrder"><Send :size="16" />{{ companyApproved ? '提交订单' : '提交前需完成资料审核' }}</el-button></div></template>
|
||||
</FirstLegOrderEditorShell>
|
||||
|
||||
<el-drawer v-model="detailOpen" class="first-leg-detail" title="订单详情" size="680px">
|
||||
<div v-loading="detailLoading" class="order-detail-content">
|
||||
<div v-if="detailError" class="order-load-state is-compact" role="alert">
|
||||
<AlertTriangle :size="24" />
|
||||
<div><strong>订单详情加载失败</strong><span>{{ detailError }}</span></div>
|
||||
<el-button :loading="detailLoading" @click="retryDetail">重新加载</el-button>
|
||||
</div>
|
||||
<template v-else-if="detailOrder">
|
||||
<div class="order-detail-heading">
|
||||
<div><span>{{ getFirstLegTransportModeLabel(detailOrder.transportMode) }}</span><h2>{{ detailOrder.orderNo || '未提交草稿' }}</h2><p>{{ detailOrder.origin }} → {{ detailOrder.destination }}</p></div>
|
||||
<el-tag :type="getFirstLegStatusTone(detailOrder.status)" effect="light">{{ getFirstLegStatusLabel(detailOrder.status) }}</el-tag>
|
||||
</div>
|
||||
<dl class="order-detail-grid">
|
||||
<div><dt>客户参考号</dt><dd>{{ detailOrder.referenceNo || '-' }}</dd></div><div><dt>运输方式</dt><dd>{{ getFirstLegTransportModeLabel(detailOrder.transportMode) }}</dd></div>
|
||||
<div><dt>发货方</dt><dd>{{ detailOrder.shipperPartySnapshot?.name || detailOrder.shipper }}<span v-if="detailOrder.shipperPartySnapshot" class="detail-subline">{{ detailOrder.shipperPartySnapshot.code }} · {{ detailOrder.shipperPartySnapshot.contactName || '未填写联系人' }} · {{ detailOrder.shipperPartySnapshot.phone || '未填写电话' }}<br />{{ detailOrder.shipperPartySnapshot.countryRegion }} {{ detailOrder.shipperPartySnapshot.province }} {{ detailOrder.shipperPartySnapshot.city }} {{ detailOrder.shipperPartySnapshot.address }}</span></dd></div>
|
||||
<div><dt>收货方</dt><dd>{{ detailOrder.consigneePartySnapshot?.name || detailOrder.consignee }}<span v-if="detailOrder.consigneePartySnapshot" class="detail-subline">{{ detailOrder.consigneePartySnapshot.code }} · {{ detailOrder.consigneePartySnapshot.contactName || '未填写联系人' }} · {{ detailOrder.consigneePartySnapshot.phone || '未填写电话' }}<br />{{ detailOrder.consigneePartySnapshot.countryRegion }} {{ detailOrder.consigneePartySnapshot.province }} {{ detailOrder.consigneePartySnapshot.city }} {{ detailOrder.consigneePartySnapshot.address }}</span></dd></div>
|
||||
<div><dt>平台收货仓</dt><dd>{{ detailOrder.receivingWarehouseSnapshot?.name || detailOrder.receivingWarehouseName }}<span v-if="detailOrder.receivingWarehouseSnapshot" class="detail-subline">{{ detailOrder.receivingWarehouseSnapshot.code }} · {{ detailOrder.receivingWarehouseSnapshot.province }}{{ detailOrder.receivingWarehouseSnapshot.city }}{{ detailOrder.receivingWarehouseSnapshot.address }}</span></dd></div><div><dt>负责人</dt><dd>{{ detailOrder.operatorName || '未提供' }}</dd></div>
|
||||
<div><dt>期望出发</dt><dd>{{ detailOrder.expectedDepartureDate || '-' }}</dd></div><div><dt>ETD / ETA</dt><dd>{{ detailOrder.etd || '-' }} / {{ detailOrder.eta || '-' }}</dd></div>
|
||||
</dl>
|
||||
<section class="detail-section">
|
||||
<h3>履约快递信息</h3>
|
||||
<div v-if="detailOrder.expressCompanyName || detailOrder.trackingNumber" class="express-information"><PackageCheck :size="20" /><div><span>快递公司</span><strong>{{ detailOrder.expressCompanyName || '待平台补充' }}</strong></div><div><span>快递单号</span><strong>{{ detailOrder.trackingNumber || '待平台补充' }}</strong></div></div>
|
||||
<div v-else class="express-empty"><PackageCheck :size="20" /><div><strong>平台尚未维护快递信息</strong><span>快递公司和快递单号由平台后台维护，客户端仅只读展示。</span></div></div>
|
||||
</section>
|
||||
<section class="detail-section"><h3>货物汇总</h3><div v-if="detailSummary" class="cargo-summary"><div><Box :size="18" /><span>明细</span><strong>{{ detailOrder.items.length }} 项</strong></div><div><span>件数</span><strong>{{ detailSummary.pieces }}</strong></div><div><span>毛重</span><strong>{{ detailSummary.grossWeightKg.toLocaleString() }} kg</strong></div><div><span>体积</span><strong>{{ detailSummary.volumeCbm }} m³</strong></div></div><ul class="cargo-detail-list"><li v-for="item in detailOrder.items" :key="item.id"><strong>{{ item.cargoNameCn }}</strong><span>{{ item.sku || '无 SKU' }} · {{ item.pieces }} 件 · {{ item.grossWeightKg }} kg</span></li></ul></section>
|
||||
<section class="detail-section"><h3>处理时间线</h3><el-timeline><el-timeline-item v-for="item in [...detailOrder.timeline].reverse()" :key="item.id" :timestamp="item.occurredAt" placement="top"><strong>{{ item.title }}</strong><p>{{ item.description || '-' }}</p><span>{{ item.operatorName || '未提供' }}</span></el-timeline-item></el-timeline></section>
|
||||
</template>
|
||||
</div>
|
||||
<template #footer><div v-if="detailOrder" class="editor-actions"><el-button @click="detailOpen = false">关闭</el-button><el-button v-if="canEditOrder && canClientEditFirstLegOrder(detailOrder.status)" :loading="openingEditor" @click="openEdit(detailOrder)"><Pencil :size="16" />编辑草稿</el-button></div></template>
|
||||
</el-drawer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.first-leg-page { display: flex; flex-direction: column; gap: 14px; }
|
||||
:global(.client-main:has(> .first-leg-page:not(.is-create-route)) > .client-page-heading) { margin-bottom: 0; }
|
||||
:global(.client-main:has(> .first-leg-page:not(.is-create-route)) > .client-page-heading > div) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
|
||||
.first-leg-query-toolbar { flex-wrap: nowrap; }
|
||||
.first-leg-query-toolbar :deep(.query-toolbar__filters) { display: grid; min-width: 0; flex: 1 1 auto; grid-template-columns: minmax(160px, 1.4fr) minmax(100px, .72fr) minmax(100px, .72fr) minmax(190px, 1.15fr); }
|
||||
.first-leg-query-toolbar :deep(.query-toolbar__filters .el-input), .first-leg-query-toolbar :deep(.query-toolbar__filters .el-select), .first-leg-query-toolbar :deep(.query-toolbar__filters .el-date-editor) { width: 100%; }
|
||||
.first-leg-query-toolbar :deep(.query-toolbar__actions) { align-self: flex-start; flex-wrap: nowrap; margin-left: auto; }
|
||||
.order-eligibility { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid; }
|
||||
.order-eligibility svg { flex: 0 0 20px; margin-top: 1px; }
|
||||
.order-eligibility div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
|
||||
.order-eligibility strong { color: var(--navy); font-size: 13px; }
|
||||
.order-eligibility span { color: var(--muted); font-size: 11px; line-height: 1.55; }
|
||||
.order-eligibility.is-pending { border-color: #e5d2a5; background: #fff9eb; color: #9a6a12; }
|
||||
.supporting-data-error { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #e5d2a5; background: #fff9eb; color: #9a6a12; }
|
||||
.supporting-data-error > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
|
||||
.supporting-data-error strong { color: var(--navy); font-size: 13px; }
|
||||
.supporting-data-error span { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.55; }
|
||||
.order-row-actions, .editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
|
||||
.order-table-card { padding: 0; overflow: hidden; }
|
||||
.order-table-toolbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
|
||||
.order-table-toolbar > div { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
|
||||
.order-table-toolbar strong { color: var(--navy); font-size: 14px; }
|
||||
.order-table-toolbar span { color: var(--muted); font-size: 11px; }
|
||||
.order-table-card > .order-eligibility, .order-table-card > .supporting-data-error { border-width: 0 0 1px; }
|
||||
.order-load-state { display: grid; min-height: 220px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 28px; color: #9a5a09; }
|
||||
.order-load-state > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
|
||||
.order-load-state strong { color: var(--navy); font-size: 14px; }
|
||||
.order-load-state span { overflow-wrap: anywhere; color: var(--muted); font-size: 12px; line-height: 1.55; }
|
||||
.order-load-state.is-compact { min-height: 180px; }
|
||||
.order-detail-content { min-height: 180px; }
|
||||
.mobile-order-surface { display: none; min-height: 220px; }
|
||||
.mobile-order-list { display: none; }
|
||||
.order-number-link { display: block; padding: 0; border: 0; background: none; color: var(--primary); cursor: pointer; font-weight: 700; text-align: left; }
|
||||
.order-number-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
|
||||
.order-reference { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; }
|
||||
:global(.first-leg-editor .el-drawer__header) { flex: 0 0 auto; min-height: 58px; margin-bottom: 0; padding: 17px 22px; border-bottom: 1px solid var(--border); }
|
||||
:global(.first-leg-editor .el-drawer__body) { min-height: 0; padding: 18px 22px 32px; overscroll-behavior: contain; }
|
||||
:global(.first-leg-editor .el-drawer__footer) { flex: 0 0 auto; padding: 12px 22px; border-top: 1px solid var(--border); background: #fff; }
|
||||
.order-form { width: min(100%, 1000px); margin: 0 auto; padding: 0 0 12px; }
|
||||
.order-form :deep(.el-form-item__error) { position: static; padding-top: 6px; overflow-wrap: anywhere; line-height: 1.45; }
|
||||
.order-form-section + .order-form-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
|
||||
.order-form-section h3 { margin: 0 0 16px; color: var(--navy); font-size: 16px; }
|
||||
.order-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
|
||||
.order-form-grid > *, .destination-fields > *, .party-contact-grid > *, .cargo-primary-grid > *, .cargo-secondary-grid > * { min-width: 0; }
|
||||
.order-form :deep(.el-select), .order-form :deep(.el-date-editor), .order-form :deep(.el-input-number) { width: 100%; }
|
||||
.form-span-full { grid-column: 1 / -1; }
|
||||
.prototype-section { padding: 2px 2px 0; }
|
||||
.segmented-options { display: flex; width: min(100%, 620px); }
|
||||
.segmented-options :deep(.el-radio-button) { flex: 1; }
|
||||
.segmented-options :deep(.el-radio-button__inner) { width: 100%; min-height: 42px; padding: 11px 16px; }
|
||||
.warehouse-options { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.warehouse-options :deep(.el-radio-button__inner) { min-height: 40px; border: 1px solid var(--border); border-radius: 6px !important; box-shadow: none !important; }
|
||||
.warehouse-options :deep(.el-radio-button.is-active .el-radio-button__inner) { border-color: var(--primary); }
|
||||
.selected-warehouse { display: flex; align-items: flex-start; gap: 10px; margin-top: 0; padding: 11px 13px; border: 1px solid #d9def8; background: #f6f7fe; color: var(--primary); }
|
||||
.selected-warehouse svg { flex: 0 0 17px; margin-top: 2px; }
|
||||
.selected-warehouse div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
|
||||
.selected-warehouse span, .selected-warehouse small { color: var(--muted); font-size: 11px; line-height: 1.5; }
|
||||
.order-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
|
||||
.order-section-heading h3 { margin-bottom: 5px; }
|
||||
.order-section-heading p { margin: 0; color: var(--muted); font-size: 11px; }
|
||||
.party-select-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
|
||||
.party-panel { min-width: 0; padding: 16px; border: 1px solid var(--border); background: #fbfcfc; }
|
||||
.party-panel h4 { margin: 0 0 14px; color: var(--navy); font-size: 14px; }
|
||||
.party-panel :deep(.el-alert) { margin-bottom: 14px; }
|
||||
.party-contact-grid, .destination-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
|
||||
.destination-fields { margin-top: 16px; }
|
||||
.cargo-entry { padding: 16px; border: 1px solid var(--border); background: #fbfcfc; }
|
||||
.cargo-entry + .cargo-entry { margin-top: 12px; }
|
||||
.cargo-entry > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
|
||||
.cargo-primary-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); column-gap: 12px; }
|
||||
.cargo-secondary-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); column-gap: 12px; padding-top: 6px; }
|
||||
.cargo-more { border-top: 1px solid var(--border); border-bottom: 0; }
|
||||
.cargo-more :deep(.el-collapse-item__header), .cargo-more :deep(.el-collapse-item__wrap) { background: transparent; }
|
||||
.cargo-more :deep(.el-collapse-item__content) { padding-bottom: 0; }
|
||||
.cargo-tip { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
|
||||
.order-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
|
||||
.order-detail-heading span { color: var(--muted); font-size: 11px; }
|
||||
.order-detail-heading h2 { margin: 6px 0; font-size: 21px; }
|
||||
.order-detail-heading p { margin: 0; color: var(--muted); }
|
||||
.order-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 18px 0; border: 1px solid var(--border); }
|
||||
.order-detail-grid div { padding: 13px; border-bottom: 1px solid var(--border); }
|
||||
.order-detail-grid div:nth-child(odd) { border-right: 1px solid var(--border); }
|
||||
.order-detail-grid dt { color: var(--muted); font-size: 11px; }
|
||||
.order-detail-grid dd { margin: 5px 0 0; font-size: 13px; font-weight: 600; }
|
||||
.detail-subline { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
|
||||
.detail-section { margin-top: 22px; }
|
||||
.detail-section h3 { margin: 0 0 12px; font-size: 15px; }
|
||||
.express-information { display: grid; grid-template-columns: auto repeat(2, minmax(0, 1fr)); align-items: center; gap: 16px; padding: 15px 16px; background: #f2f7f6; color: var(--primary); }
|
||||
.express-information > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
|
||||
.express-information span { color: var(--muted); font-size: 11px; }
|
||||
.express-information strong { overflow-wrap: anywhere; color: var(--navy); font-size: 13px; }
|
||||
.express-empty { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border: 1px dashed #cbd5da; color: var(--muted); }
|
||||
.express-empty svg { flex: 0 0 20px; color: var(--primary); }
|
||||
.express-empty div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
|
||||
.express-empty strong { color: var(--navy); font-size: 13px; }
|
||||
.express-empty span { font-size: 11px; line-height: 1.5; }
|
||||
.cargo-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); }
|
||||
.cargo-summary div { display: flex; min-height: 74px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border-right: 1px solid var(--border); }
|
||||
.cargo-summary div:last-child { border-right: 0; }
|
||||
.cargo-summary span { color: var(--muted); font-size: 11px; }
|
||||
.cargo-detail-list { margin: 10px 0 0; padding: 0; list-style: none; }
|
||||
.cargo-detail-list li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
|
||||
.cargo-detail-list span, :deep(.el-timeline-item__content p), :deep(.el-timeline-item__content > span) { color: var(--muted); }
|
||||
:deep(.el-timeline-item__content p) { margin: 5px 0; font-size: 12px; }
|
||||
:deep(.el-timeline-item__content > span) { font-size: 11px; }
|
||||
@media (max-width: 1280px) {
|
||||
.desktop-order-table { display: none; }
|
||||
.mobile-order-surface { display: block; }
|
||||
.mobile-order-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
|
||||
.mobile-order-card { min-width: 0; padding: 14px; border: 1px solid var(--border); background: #fff; }
|
||||
.mobile-order-card header, .mobile-order-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.mobile-order-card header button { min-width: 0; overflow: hidden; padding: 0; border: 0; background: none; color: var(--primary); font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.mobile-order-card header button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
|
||||
.mobile-order-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
|
||||
.mobile-order-card dl div { min-width: 0; }
|
||||
.mobile-order-card dt, .mobile-order-card footer > span { color: var(--muted); font-size: 10px; }
|
||||
.mobile-order-card dd { overflow: hidden; margin: 4px 0 0; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.mobile-order-card dd span { margin-left: 4px; color: var(--muted); font-weight: 400; }
|
||||
.mobile-order-card footer { align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
|
||||
.mobile-order-card footer > div { display: flex; }
|
||||
}
|
||||
@media (min-width: 721px) and (max-width: 1050px) {
|
||||
.first-leg-query-toolbar :deep(.query-toolbar__filters) { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.first-leg-query-toolbar { flex-wrap: wrap; }
|
||||
.first-leg-query-toolbar :deep(.query-toolbar__filters) { display: flex; }
|
||||
:global(.client-main:has(> .first-leg-page:not(.is-create-route)) > .client-page-heading) { margin-bottom: 10px; }
|
||||
.order-table-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
|
||||
.order-table-toolbar > div { justify-content: space-between; }
|
||||
.order-table-toolbar .el-button { width: 100%; min-height: 40px; }
|
||||
.order-eligibility { flex-wrap: wrap; }
|
||||
.order-eligibility .el-button { width: 100%; min-height: 44px; }
|
||||
.order-form-grid, .order-detail-grid, .party-select-grid, .party-contact-grid, .destination-fields, .cargo-primary-grid, .cargo-secondary-grid { grid-template-columns: 1fr; }
|
||||
.segmented-options { width: 100%; align-items: stretch; flex-direction: column; }
|
||||
.segmented-options :deep(.el-radio-button__inner) { border: 1px solid var(--border); border-radius: 6px !important; box-shadow: none !important; }
|
||||
.warehouse-options { display: grid; width: 100%; grid-template-columns: 1fr; }
|
||||
.warehouse-options :deep(.el-radio-button), .warehouse-options :deep(.el-radio-button__inner) { width: 100%; }
|
||||
:global(.first-leg-editor .el-drawer__header) { min-height: 56px; padding: 15px 20px; }
|
||||
:global(.first-leg-editor .el-drawer__body) { padding: 16px 20px 28px; }
|
||||
:global(.first-leg-editor .el-drawer__footer) { padding: 10px 20px; }
|
||||
.form-span-full { grid-column: auto; }
|
||||
.editor-actions :deep(.el-button) { min-height: 44px; }
|
||||
.desktop-order-table { display: none; }
|
||||
.order-load-state { min-height: 240px; grid-template-columns: 1fr; justify-items: start; }
|
||||
.supporting-data-error { grid-template-columns: auto minmax(0, 1fr); }
|
||||
.supporting-data-error .el-button { grid-column: 1 / -1; width: 100%; min-height: 44px; }
|
||||
.order-load-state .el-button { width: 100%; min-height: 44px; }
|
||||
.mobile-order-list { grid-template-columns: 1fr; }
|
||||
.mobile-order-card { padding: 14px; border: 1px solid var(--border); background: #fff; }
|
||||
.mobile-order-card header, .mobile-order-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.mobile-order-card header button { padding: 0; border: 0; background: none; color: var(--primary); font-weight: 750; }
|
||||
.mobile-order-card header button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
|
||||
.mobile-order-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
|
||||
.mobile-order-card dl div { min-width: 0; }
|
||||
.mobile-order-card dt, .mobile-order-card footer > span { color: var(--muted); font-size: 10px; }
|
||||
.mobile-order-card dd { overflow: hidden; margin: 4px 0 0; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.mobile-order-card dd span { margin-left: 4px; color: var(--muted); font-weight: 400; }
|
||||
.mobile-order-card footer { align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
|
||||
.mobile-order-card footer > div { display: flex; }
|
||||
.order-detail-grid div:nth-child(odd) { border-right: 0; }
|
||||
.express-information { grid-template-columns: auto 1fr; }
|
||||
.express-information > div:last-child { grid-column: 2; }
|
||||
.cargo-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.cargo-summary div:nth-child(2) { border-right: 0; }
|
||||
.cargo-summary div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
|
||||
.cargo-detail-list li { flex-direction: column; }
|
||||
:global(.first-leg-editor), :global(.first-leg-detail) { width: 100% !important; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.editor-actions { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.editor-actions :deep(.el-button) { width: 100%; min-width: 0; margin-left: 0; }
|
||||
.editor-actions :deep(.el-button:nth-child(3)) { grid-column: 1 / -1; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="快速下单" description="快速创建头程订单" /></template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="派送订单列表" description="查询海外仓派送订单" /></template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="入库订单列表" description="查询海外仓入库订单" /></template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="我的订单" description="统一查询各类业务订单" /></template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="贴标申请" description="提交海外仓贴标申请" /></template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="退货入库" description="登记海外仓退货入库" /></template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="退货出库" description="创建海外仓退货出库单" /></template>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import PrototypeFeatureView from '@/views/prototype/PrototypeFeatureView.vue'
|
||||
</script>
|
||||
|
||||
<template><PrototypeFeatureView title="退货换标" description="提交退货换标申请" /></template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ArrowLeft, ShieldX } from '@lucide/vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { getFirstAccessiblePath } from '@/navigation/clientNavigation'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const firstAccessiblePath = computed(() => getFirstAccessiblePath(auth.permissionCodes))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="forbidden-state client-card" aria-labelledby="forbidden-title">
|
||||
<div class="forbidden-icon"><ShieldX :size="30" /></div>
|
||||
<span class="section-label">403 · ACCESS DENIED</span>
|
||||
<h2 id="forbidden-title">当前账号无权访问此页面</h2>
|
||||
<p>页面权限由企业管理员分配。如需处理这项业务，请联系企业管理员调整您的角色权限。</p>
|
||||
<el-button type="primary" @click="router.replace(firstAccessiblePath)"><ArrowLeft :size="16" />返回可访问页面</el-button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.forbidden-state { display: grid; min-height: 420px; place-items: center; align-content: center; padding: 48px 24px; text-align: center; }
|
||||
.forbidden-icon { display: grid; width: 64px; height: 64px; margin-bottom: 18px; place-items: center; background: #f4e9e8; color: #a2413b; }
|
||||
.forbidden-state h2 { margin: 10px 0 8px; color: var(--navy); font-size: clamp(22px, 3vw, 30px); }
|
||||
.forbidden-state p { max-width: 520px; margin: 0 0 24px; color: var(--muted); line-height: 1.75; }
|
||||
@media (max-width: 720px) { .forbidden-state { min-height: 360px; } .forbidden-state :deep(.el-button) { min-height: 44px; } }
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import test from 'node:test'
|
||||
|
||||
const source = readFileSync(new URL('./merchantIam.ts', import.meta.url), 'utf8')
|
||||
const storeSource = readFileSync(new URL('../stores/tenantAdministration.ts', import.meta.url), 'utf8')
|
||||
const authSource = readFileSync(new URL('../stores/auth.ts', import.meta.url), 'utf8')
|
||||
|
||||
test('declares the documented merchant role and member endpoints', () => {
|
||||
assert.match(source, /url: '\/merchant\/v1\/iam\/roles'/)
|
||||
assert.match(source, /method: 'PUT', url: `\/merchant\/v1\/iam\/roles\/\$\{roleId\}`/)
|
||||
assert.match(source, /method: 'PUT', url: `\/merchant\/v1\/iam\/roles\/\$\{roleId\}\/status`/)
|
||||
assert.match(source, /method: 'DELETE', url: `\/merchant\/v1\/iam\/roles\/\$\{roleId\}`/)
|
||||
assert.match(source, /url: '\/merchant\/v1\/iam\/roles\/permissions'/)
|
||||
assert.match(source, /url: '\/merchant\/v1\/iam\/members'/)
|
||||
assert.match(source, /url: '\/merchant\/v1\/iam\/members\/roles'/)
|
||||
assert.match(source, /url: `\/merchant\/v1\/iam\/members\/\$\{membershipId\}`/)
|
||||
assert.match(source, /url: `\/merchant\/v1\/iam\/members\/\$\{membershipId\}\/status`/)
|
||||
assert.match(source, /url: `\/merchant\/v1\/iam\/members\/\$\{membershipId\}\/password`/)
|
||||
assert.match(source, /url: '\/merchant\/v1\/iam\/profile'/)
|
||||
})
|
||||
|
||||
test('supports tenant profile updates and authenticated qualification downloads', () => {
|
||||
assert.match(source, /method: 'PUT', url: '\/merchant\/v1\/iam\/tenant\/profile'/)
|
||||
assert.match(source, /apiBlobRequest\(\{ method: 'GET', url \}\)/)
|
||||
assert.match(source, /url\.startsWith\('\/merchant\/v1\/files\/qualifications\/'\)/)
|
||||
assert.match(storeSource, /await updateTenantProfile/)
|
||||
})
|
||||
|
||||
test('uses membershipId and full replacement arrays in authorization writes', () => {
|
||||
assert.match(source, /data: \{ roleId, permissionIds \}/)
|
||||
assert.match(source, /data: \{ membershipId, roleIds \}/)
|
||||
assert.doesNotMatch(source, /data: \{ userId, roleIds \}/)
|
||||
})
|
||||
|
||||
test('starts empty and only loads server role and member records', () => {
|
||||
assert.match(storeSource, /const members = ref<TenantMember\[]>\(\[\]\)/)
|
||||
assert.match(storeSource, /const roles = ref<TenantRole\[]>\(\[\]\)/)
|
||||
assert.match(storeSource, /async function loadRoles\(\) \{\s+roles\.value = \[\]/)
|
||||
assert.match(storeSource, /async function loadMembers\(\) \{\s+members\.value = \[\]/)
|
||||
assert.doesNotMatch(storeSource, /initialRoles|initialMembers|示例贸易|演示大道/)
|
||||
assert.match(storeSource, /await createMerchantRole/)
|
||||
assert.match(storeSource, /await updateMerchantRole/)
|
||||
assert.match(storeSource, /await changeMerchantRoleStatus/)
|
||||
assert.match(storeSource, /await deleteMerchantRole/)
|
||||
assert.match(storeSource, /await createMerchantMember/)
|
||||
assert.match(storeSource, /await updateMerchantMember/)
|
||||
assert.match(storeSource, /await changeMerchantMemberStatus/)
|
||||
assert.match(storeSource, /await resetMerchantMemberPassword/)
|
||||
})
|
||||
|
||||
test('shares the merchant permission map and preserves resources not rendered by the role editor', () => {
|
||||
assert.match(storeSource, /export const FRONTEND_TO_MERCHANT_PERMISSION_CODES/)
|
||||
assert.match(storeSource, /'order:first-leg:cancel': \['merchant:order:cancel'\]/)
|
||||
assert.match(authSource, /FRONTEND_TO_MERCHANT_PERMISSION_CODES/)
|
||||
assert.match(authSource, /Object\.entries\(FRONTEND_TO_MERCHANT_PERMISSION_CODES\)/)
|
||||
assert.match(storeSource, /const preservedPermissionIds = role\.permissionIds\.filter/)
|
||||
assert.match(storeSource, /const nextPermissionIds = \[\.\.\.new Set\(\[\.\.\.preservedPermissionIds, \.\.\.selectedPermissionIds\]\)\]/)
|
||||
assert.match(storeSource, /await replaceMerchantRolePermissions\(id, nextPermissionIds\)/)
|
||||
})
|
||||
@@ -0,0 +1,205 @@
|
||||
import { apiBlobRequest, apiRequest } from '@/api/http'
|
||||
|
||||
export type MerchantTenantStatus = 'PROFILE_REQUIRED' | 'PENDING' | 'ACTIVE' | 'REJECTED' | 'DISABLED'
|
||||
export type QualificationStatus = 'PENDING' | 'APPROVED' | 'REJECTED'
|
||||
|
||||
export interface MerchantTenantProfile {
|
||||
id: number | string
|
||||
tenantCode: string
|
||||
tenantName: string
|
||||
status: MerchantTenantStatus
|
||||
legalName: string
|
||||
unifiedSocialCreditCode: string | null
|
||||
contactName: string
|
||||
contactPhone: string
|
||||
contactEmail: string | null
|
||||
}
|
||||
|
||||
export interface UpdateMerchantTenantProfileRequest {
|
||||
tenantName: string
|
||||
legalName: string
|
||||
contactName: string
|
||||
contactPhone: string
|
||||
contactEmail: string
|
||||
}
|
||||
|
||||
export interface MerchantQualification {
|
||||
id: number | string
|
||||
tenantId: number | string
|
||||
qualificationType: 'BUSINESS_LICENSE'
|
||||
certificateNo: string | null
|
||||
documentUrl: string
|
||||
status: QualificationStatus
|
||||
reviewComment: string | null
|
||||
}
|
||||
|
||||
export interface MerchantPermissionResource {
|
||||
id: number | string
|
||||
tenantId: number | string
|
||||
appCode: 'MERCHANT'
|
||||
permissionType: 'MENU' | 'BUTTON'
|
||||
parentId: number | string
|
||||
permissionCode: string
|
||||
permissionName: string
|
||||
routePath: string | null
|
||||
httpMethod: string | null
|
||||
sortNo: number
|
||||
status: 'ACTIVE' | string
|
||||
}
|
||||
|
||||
export interface QualificationUploadResult {
|
||||
qualificationId: number | string
|
||||
reviewId: number | string
|
||||
tenantStatus: 'PENDING'
|
||||
documentUrl: string
|
||||
}
|
||||
|
||||
export interface MerchantRole {
|
||||
id: number | string
|
||||
tenantId: number | string
|
||||
appCode: 'MERCHANT'
|
||||
roleCode: string
|
||||
roleName: string
|
||||
roleType: 'SYSTEM' | 'CUSTOM' | string
|
||||
status: 'ACTIVE' | 'INACTIVE' | string
|
||||
description: string | null
|
||||
permissionIds: Array<number | string>
|
||||
}
|
||||
|
||||
export interface CreateMerchantRoleRequest {
|
||||
roleCode: string
|
||||
roleName: string
|
||||
description: string
|
||||
}
|
||||
|
||||
export interface UpdateMerchantRoleRequest {
|
||||
roleName: string
|
||||
description: string
|
||||
}
|
||||
|
||||
export interface MerchantMember {
|
||||
membershipId: number | string
|
||||
userId: number | string
|
||||
authUserId: number | string
|
||||
displayName: string
|
||||
phone: string | null
|
||||
email: string | null
|
||||
memberType: 'OWNER' | string
|
||||
memberNo: string
|
||||
status: 'ACTIVE' | 'INACTIVE' | string
|
||||
roleIds: Array<number | string>
|
||||
}
|
||||
|
||||
export interface MerchantPersonalProfile {
|
||||
userId: number | string
|
||||
authUserId: number | string
|
||||
username: string
|
||||
displayName: string
|
||||
phone: string | null
|
||||
email: string | null
|
||||
}
|
||||
|
||||
export interface CreateMerchantMemberRequest {
|
||||
username: string
|
||||
password: string
|
||||
displayName: string
|
||||
phone: string
|
||||
email: string
|
||||
memberType: 'EMPLOYEE'
|
||||
memberNo: string
|
||||
roleIds: Array<number | string>
|
||||
}
|
||||
|
||||
export interface UpdateMerchantMemberRequest {
|
||||
displayName: string
|
||||
phone: string
|
||||
email: string
|
||||
memberType: string
|
||||
memberNo: string
|
||||
roleIds: Array<number | string>
|
||||
}
|
||||
|
||||
export function getTenantProfile() {
|
||||
return apiRequest<MerchantTenantProfile>({ method: 'GET', url: '/merchant/v1/iam/tenant/profile' })
|
||||
}
|
||||
|
||||
export function updateTenantProfile(payload: UpdateMerchantTenantProfileRequest) {
|
||||
return apiRequest<MerchantTenantProfile>({ method: 'PUT', url: '/merchant/v1/iam/tenant/profile', data: payload })
|
||||
}
|
||||
|
||||
export function getTenantQualifications() {
|
||||
return apiRequest<MerchantQualification[]>({ method: 'GET', url: '/merchant/v1/iam/tenant/qualifications' })
|
||||
}
|
||||
|
||||
export function getMerchantPermissionResources() {
|
||||
return apiRequest<MerchantPermissionResource[]>({ method: 'GET', url: '/merchant/v1/iam/permissions' })
|
||||
}
|
||||
|
||||
export function getMerchantPersonalProfile() {
|
||||
return apiRequest<MerchantPersonalProfile>({ method: 'GET', url: '/merchant/v1/iam/profile' })
|
||||
}
|
||||
|
||||
export function updateMerchantPersonalProfile(payload: Pick<MerchantPersonalProfile, 'displayName' | 'phone' | 'email'>) {
|
||||
return apiRequest<MerchantPersonalProfile>({ method: 'PUT', url: '/merchant/v1/iam/profile', data: payload })
|
||||
}
|
||||
|
||||
export function uploadBusinessLicense(file: File, certificateNo?: string) {
|
||||
const data = new FormData()
|
||||
data.append('file', file)
|
||||
if (certificateNo) data.append('certificateNo', certificateNo)
|
||||
return apiRequest<QualificationUploadResult>({ method: 'POST', url: '/merchant/v1/files/qualifications', data })
|
||||
}
|
||||
|
||||
export function downloadQualificationImage(documentUrl: string) {
|
||||
const url = documentUrl.startsWith('/api/') ? documentUrl.slice(4) : documentUrl
|
||||
if (!url.startsWith('/merchant/v1/files/qualifications/')) throw new Error('资质文件地址无效')
|
||||
return apiBlobRequest({ method: 'GET', url })
|
||||
}
|
||||
|
||||
export function getMerchantRoles() {
|
||||
return apiRequest<MerchantRole[]>({ method: 'GET', url: '/merchant/v1/iam/roles' })
|
||||
}
|
||||
|
||||
export function createMerchantRole(payload: CreateMerchantRoleRequest) {
|
||||
return apiRequest<MerchantRole>({ method: 'POST', url: '/merchant/v1/iam/roles', data: payload })
|
||||
}
|
||||
|
||||
export function updateMerchantRole(roleId: number | string, payload: UpdateMerchantRoleRequest) {
|
||||
return apiRequest<MerchantRole>({ method: 'PUT', url: `/merchant/v1/iam/roles/${roleId}`, data: payload })
|
||||
}
|
||||
|
||||
export function changeMerchantRoleStatus(roleId: number | string, status: 'ACTIVE' | 'DISABLED') {
|
||||
return apiRequest<MerchantRole>({ method: 'PUT', url: `/merchant/v1/iam/roles/${roleId}/status`, data: { status } })
|
||||
}
|
||||
|
||||
export function deleteMerchantRole(roleId: number | string) {
|
||||
return apiRequest<void>({ method: 'DELETE', url: `/merchant/v1/iam/roles/${roleId}` })
|
||||
}
|
||||
|
||||
export function replaceMerchantRolePermissions(roleId: number | string, permissionIds: Array<number | string>) {
|
||||
return apiRequest<void>({ method: 'PUT', url: '/merchant/v1/iam/roles/permissions', data: { roleId, permissionIds } })
|
||||
}
|
||||
|
||||
export function getMerchantMembers() {
|
||||
return apiRequest<MerchantMember[]>({ method: 'GET', url: '/merchant/v1/iam/members' })
|
||||
}
|
||||
|
||||
export function createMerchantMember(payload: CreateMerchantMemberRequest) {
|
||||
return apiRequest<MerchantMember>({ method: 'POST', url: '/merchant/v1/iam/members', data: payload })
|
||||
}
|
||||
|
||||
export function updateMerchantMember(membershipId: number | string, payload: UpdateMerchantMemberRequest) {
|
||||
return apiRequest<MerchantMember>({ method: 'PUT', url: `/merchant/v1/iam/members/${membershipId}`, data: payload })
|
||||
}
|
||||
|
||||
export function changeMerchantMemberStatus(membershipId: number | string, status: 'ACTIVE' | 'DISABLED') {
|
||||
return apiRequest<MerchantMember>({ method: 'PUT', url: `/merchant/v1/iam/members/${membershipId}/status`, data: { status } })
|
||||
}
|
||||
|
||||
export function resetMerchantMemberPassword(membershipId: number | string, newPassword: string) {
|
||||
return apiRequest<void>({ method: 'PUT', url: `/merchant/v1/iam/members/${membershipId}/password`, data: { newPassword } })
|
||||
}
|
||||
|
||||
export function replaceMerchantMemberRoles(membershipId: number | string, roleIds: Array<number | string>) {
|
||||
return apiRequest<void>({ method: 'PUT', url: '/merchant/v1/iam/members/roles', data: { membershipId, roleIds } })
|
||||
}
|
||||
@@ -0,0 +1,387 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import {
|
||||
changeMerchantMemberStatus,
|
||||
changeMerchantRoleStatus,
|
||||
createMerchantMember,
|
||||
createMerchantRole,
|
||||
deleteMerchantRole,
|
||||
getMerchantMembers,
|
||||
getMerchantPermissionResources,
|
||||
getMerchantRoles,
|
||||
getTenantProfile,
|
||||
getTenantQualifications,
|
||||
resetMerchantMemberPassword,
|
||||
replaceMerchantRolePermissions,
|
||||
updateMerchantMember,
|
||||
updateMerchantRole,
|
||||
updateTenantProfile,
|
||||
type MerchantRole,
|
||||
type MerchantMember,
|
||||
type MerchantPermissionResource,
|
||||
type MerchantTenantStatus,
|
||||
} from '@/api/merchantIam'
|
||||
|
||||
export type TenantRecordStatus = 'ACTIVE' | 'INACTIVE'
|
||||
|
||||
export interface TenantCompanyProfile {
|
||||
companyName: string
|
||||
creditCode: string
|
||||
legalRepresentative: string
|
||||
contactName: string
|
||||
contactPhone: string
|
||||
contactEmail: string
|
||||
auditStatus: MerchantTenantStatus
|
||||
}
|
||||
|
||||
export interface TenantQualification {
|
||||
id: string
|
||||
type: string
|
||||
fileName: string
|
||||
status: 'VERIFIED' | 'PENDING' | 'REJECTED' | 'EXPIRED'
|
||||
expiresAt: string
|
||||
updatedAt: string
|
||||
documentUrl: string
|
||||
}
|
||||
|
||||
export interface TenantMember {
|
||||
id: string
|
||||
name: string
|
||||
account: string
|
||||
phone: string
|
||||
email: string
|
||||
roleIds: string[]
|
||||
status: TenantRecordStatus
|
||||
lastLoginAt: string
|
||||
isAdministrator: boolean
|
||||
}
|
||||
|
||||
export interface TenantRole {
|
||||
id: string
|
||||
name: string
|
||||
code: string
|
||||
description: string
|
||||
status: TenantRecordStatus
|
||||
builtin: boolean
|
||||
permissionIds: string[]
|
||||
permissionCodes: string[]
|
||||
}
|
||||
|
||||
export interface TenantPermissionItem {
|
||||
code: string
|
||||
label: string
|
||||
description: string
|
||||
}
|
||||
|
||||
export interface TenantPermissionGroup {
|
||||
key: string
|
||||
label: string
|
||||
items: TenantPermissionItem[]
|
||||
}
|
||||
|
||||
export const TENANT_PERMISSION_GROUPS: readonly TenantPermissionGroup[] = [
|
||||
{
|
||||
key: 'account',
|
||||
label: '个人账号',
|
||||
items: [{ code: 'account:profile:view', label: '维护我的信息', description: '查看并维护当前成员自己的资料和登录密码' }],
|
||||
},
|
||||
{
|
||||
key: 'dashboard',
|
||||
label: '业务总览',
|
||||
items: [{ code: 'dashboard:view', label: '查看总览', description: '查看企业统计和最近订单' }],
|
||||
},
|
||||
{
|
||||
key: 'orders',
|
||||
label: '头程订单',
|
||||
items: [
|
||||
{ code: 'order:first-leg:list', label: '查看订单', description: '查看本企业头程订单列表和详情' },
|
||||
{ code: 'order:first-leg:create', label: '创建订单', description: '新建并保存订单草稿' },
|
||||
{ code: 'order:first-leg:edit', label: '编辑订单', description: '编辑本企业尚未提交的订单草稿' },
|
||||
{ code: 'order:first-leg:submit', label: '提交订单', description: '提交草稿进入平台审核' },
|
||||
{ code: 'order:first-leg:cancel', label: '取消订单', description: '在允许的状态下取消订单' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'company',
|
||||
label: '企业资料',
|
||||
items: [
|
||||
{ code: 'company:profile:view', label: '查看资料', description: '查看企业、联系人和资质资料' },
|
||||
{ code: 'company:profile:edit', label: '编辑资料', description: '维护企业联系信息和业务地址' },
|
||||
{ code: 'company:qualification:upload', label: '更新资质', description: '上传或更新企业资质文件' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'members',
|
||||
label: '企业成员',
|
||||
items: [
|
||||
{ code: 'company:member:list', label: '查看成员', description: '查看本企业成员列表' },
|
||||
{ code: 'company:member:write', label: '维护成员', description: '新增、编辑、启停企业成员' },
|
||||
{ code: 'company:member:reset-password', label: '重置密码', description: '重置企业成员登录密码' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'roles',
|
||||
label: '角色与权限',
|
||||
items: [
|
||||
{ code: 'company:role:list', label: '查看角色', description: '查看本企业角色列表' },
|
||||
{ code: 'company:role:write', label: '维护角色', description: '新增、编辑、启停企业角色' },
|
||||
{ code: 'company:permission:list', label: '查看权限', description: '查看角色拥有的菜单和操作权限' },
|
||||
{ code: 'company:permission:assign', label: '分配权限', description: '为本企业角色分配菜单及操作权限' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const allPermissionCodes = TENANT_PERMISSION_GROUPS.flatMap((group) => group.items.map((item) => item.code))
|
||||
|
||||
export const FRONTEND_TO_MERCHANT_PERMISSION_CODES: Readonly<Record<string, readonly string[]>> = {
|
||||
'order:first-leg:list': ['merchant:order:list', 'merchant:order:view'],
|
||||
'order:first-leg:create': ['merchant:order:create'],
|
||||
'order:first-leg:edit': ['merchant:order:edit'],
|
||||
'order:first-leg:submit': ['merchant:order:submit'],
|
||||
'order:first-leg:cancel': ['merchant:order:cancel'],
|
||||
'company:profile:view': ['merchant:profile:view'],
|
||||
'company:profile:edit': ['merchant:profile:edit'],
|
||||
'company:qualification:upload': ['merchant:qualification:upload'],
|
||||
'company:member:list': ['merchant:member:list'],
|
||||
'company:member:write': ['merchant:member:create', 'merchant:member:edit', 'merchant:member:grant-role', 'merchant:member:status'],
|
||||
'company:member:reset-password': ['merchant:member:reset-password'],
|
||||
'company:role:list': ['merchant:role:list'],
|
||||
'company:role:write': ['merchant:role:create', 'merchant:role:edit', 'merchant:role:status', 'merchant:role:delete'],
|
||||
'company:permission:list': ['merchant:role:list'],
|
||||
'company:permission:assign': ['merchant:role:grant'],
|
||||
}
|
||||
|
||||
const mappedMerchantPermissionCodes = new Set(Object.values(FRONTEND_TO_MERCHANT_PERMISSION_CODES).flat())
|
||||
|
||||
const emptyCompany: TenantCompanyProfile = {
|
||||
companyName: '',
|
||||
creditCode: '',
|
||||
legalRepresentative: '',
|
||||
contactName: '',
|
||||
contactPhone: '',
|
||||
contactEmail: '',
|
||||
auditStatus: 'PROFILE_REQUIRED',
|
||||
}
|
||||
|
||||
export const useTenantAdministrationStore = defineStore('tenant-administration', () => {
|
||||
const company = ref<TenantCompanyProfile>({ ...emptyCompany })
|
||||
const qualifications = ref<TenantQualification[]>([])
|
||||
const members = ref<TenantMember[]>([])
|
||||
const roles = ref<TenantRole[]>([])
|
||||
const permissionResources = ref<MerchantPermissionResource[]>([])
|
||||
const activeMemberCount = computed(() => members.value.filter((member) => member.status === 'ACTIVE').length)
|
||||
|
||||
async function loadCompanyContext() {
|
||||
company.value = { ...emptyCompany }
|
||||
qualifications.value = []
|
||||
const [profile, qualificationRecords] = await Promise.all([
|
||||
getTenantProfile(),
|
||||
getTenantQualifications(),
|
||||
])
|
||||
company.value = {
|
||||
companyName: profile.tenantName,
|
||||
creditCode: profile.unifiedSocialCreditCode ?? '',
|
||||
legalRepresentative: profile.legalName,
|
||||
contactName: profile.contactName,
|
||||
contactPhone: profile.contactPhone,
|
||||
contactEmail: profile.contactEmail ?? '',
|
||||
auditStatus: profile.status,
|
||||
}
|
||||
qualifications.value = qualificationRecords.map((item) => ({
|
||||
id: String(item.id),
|
||||
type: item.qualificationType === 'BUSINESS_LICENSE' ? '营业执照' : item.qualificationType,
|
||||
fileName: item.documentUrl.split('/').pop() || '营业执照',
|
||||
status: item.status === 'APPROVED' ? 'VERIFIED' : item.status,
|
||||
expiresAt: '-',
|
||||
updatedAt: '-',
|
||||
documentUrl: item.documentUrl,
|
||||
}))
|
||||
}
|
||||
|
||||
function mapMerchantRole(role: MerchantRole): TenantRole {
|
||||
const grantedIds = (role.permissionIds ?? []).map(String)
|
||||
const grantedBackendCodes = new Set(permissionResources.value
|
||||
.filter((resource) => grantedIds.includes(String(resource.id)))
|
||||
.map((resource) => resource.permissionCode))
|
||||
const permissionCodes = Object.entries(FRONTEND_TO_MERCHANT_PERMISSION_CODES)
|
||||
.filter(([, backendCodes]) => backendCodes.some((code) => grantedBackendCodes.has(code)))
|
||||
.map(([frontendCode]) => frontendCode)
|
||||
return {
|
||||
id: String(role.id),
|
||||
name: role.roleName,
|
||||
code: role.roleCode,
|
||||
description: role.description ?? '暂无角色说明',
|
||||
status: role.status === 'ACTIVE' ? 'ACTIVE' : 'INACTIVE',
|
||||
builtin: role.roleType === 'SYSTEM',
|
||||
permissionIds: grantedIds,
|
||||
permissionCodes: role.roleType === 'SYSTEM' && role.roleCode === 'MERCHANT_OWNER' ? [...allPermissionCodes] : permissionCodes,
|
||||
}
|
||||
}
|
||||
|
||||
function mapMerchantMember(member: MerchantMember): TenantMember {
|
||||
return {
|
||||
id: String(member.membershipId),
|
||||
name: member.displayName || `企业成员 ${member.membershipId}`,
|
||||
account: member.memberNo || `用户 ${member.authUserId}`,
|
||||
phone: member.phone ?? '',
|
||||
email: member.email ?? '',
|
||||
roleIds: member.roleIds.map(String),
|
||||
status: member.status === 'ACTIVE' ? 'ACTIVE' : 'INACTIVE',
|
||||
lastLoginAt: '服务端未提供',
|
||||
isAdministrator: member.memberType === 'OWNER',
|
||||
}
|
||||
}
|
||||
|
||||
async function loadRoles() {
|
||||
roles.value = []
|
||||
permissionResources.value = []
|
||||
const [roleRecords, resources] = await Promise.all([getMerchantRoles(), getMerchantPermissionResources()])
|
||||
permissionResources.value = resources.filter((item) => item.status === 'ACTIVE')
|
||||
roles.value = roleRecords.map(mapMerchantRole)
|
||||
}
|
||||
|
||||
async function loadMembers() {
|
||||
members.value = []
|
||||
members.value = (await getMerchantMembers()).map(mapMerchantMember)
|
||||
}
|
||||
|
||||
async function updateCompany(payload: TenantCompanyProfile) {
|
||||
const updated = await updateTenantProfile({
|
||||
tenantName: payload.companyName.trim(),
|
||||
legalName: payload.legalRepresentative.trim(),
|
||||
contactName: payload.contactName.trim(),
|
||||
contactPhone: payload.contactPhone.trim(),
|
||||
contactEmail: payload.contactEmail.trim(),
|
||||
})
|
||||
company.value = {
|
||||
companyName: updated.tenantName,
|
||||
creditCode: updated.unifiedSocialCreditCode ?? '',
|
||||
legalRepresentative: updated.legalName,
|
||||
contactName: updated.contactName,
|
||||
contactPhone: updated.contactPhone,
|
||||
contactEmail: updated.contactEmail ?? '',
|
||||
auditStatus: updated.status,
|
||||
}
|
||||
}
|
||||
|
||||
async function createMember(payload: { name: string; account: string; password: string; phone: string; email: string; roleIds: string[]; memberNo: string }) {
|
||||
const created = await createMerchantMember({
|
||||
username: payload.account.trim(),
|
||||
password: payload.password,
|
||||
displayName: payload.name.trim(),
|
||||
phone: payload.phone.trim(),
|
||||
email: payload.email.trim(),
|
||||
memberType: 'EMPLOYEE',
|
||||
memberNo: payload.memberNo.trim(),
|
||||
roleIds: payload.roleIds,
|
||||
})
|
||||
members.value.unshift(mapMerchantMember(created))
|
||||
}
|
||||
|
||||
async function updateMember(id: string, payload: Pick<TenantMember, 'name' | 'phone' | 'email' | 'roleIds'> & { memberNo: string }) {
|
||||
const member = members.value.find((item) => item.id === id)
|
||||
if (!member) throw new Error('成员不存在')
|
||||
const updated = await updateMerchantMember(id, {
|
||||
displayName: payload.name.trim(),
|
||||
phone: payload.phone.trim(),
|
||||
email: payload.email.trim(),
|
||||
memberType: member.isAdministrator ? 'OWNER' : 'EMPLOYEE',
|
||||
memberNo: payload.memberNo.trim(),
|
||||
roleIds: payload.roleIds,
|
||||
})
|
||||
Object.assign(member, mapMerchantMember(updated))
|
||||
}
|
||||
|
||||
async function toggleMemberStatus(id: string) {
|
||||
const member = members.value.find((item) => item.id === id)
|
||||
if (!member) throw new Error('成员不存在')
|
||||
if (member.isAdministrator) throw new Error('企业管理员不能停用')
|
||||
const updated = await changeMerchantMemberStatus(id, member.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE')
|
||||
Object.assign(member, mapMerchantMember(updated))
|
||||
}
|
||||
|
||||
async function resetMemberPassword(id: string, newPassword: string) {
|
||||
await resetMerchantMemberPassword(id, newPassword)
|
||||
}
|
||||
|
||||
async function createRole(payload: Pick<TenantRole, 'name' | 'code' | 'description'>) {
|
||||
if (roles.value.some((role) => role.code === payload.code)) throw new Error('角色编码已存在')
|
||||
const created = await createMerchantRole({ roleCode: payload.code, roleName: payload.name, description: payload.description })
|
||||
roles.value.push(mapMerchantRole(created))
|
||||
}
|
||||
|
||||
async function updateRole(id: string, payload: Pick<TenantRole, 'name' | 'description'>) {
|
||||
const role = roles.value.find((item) => item.id === id)
|
||||
if (!role) throw new Error('角色不存在')
|
||||
if (role.builtin) throw new Error('内置角色不能编辑')
|
||||
const updated = await updateMerchantRole(id, { roleName: payload.name.trim(), description: payload.description.trim() })
|
||||
Object.assign(role, mapMerchantRole(updated))
|
||||
}
|
||||
|
||||
async function toggleRoleStatus(id: string) {
|
||||
const role = roles.value.find((item) => item.id === id)
|
||||
if (!role) throw new Error('角色不存在')
|
||||
if (role.builtin) throw new Error('内置角色不能停用')
|
||||
const updated = await changeMerchantRoleStatus(id, role.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE')
|
||||
Object.assign(role, mapMerchantRole(updated))
|
||||
}
|
||||
|
||||
async function deleteRole(id: string) {
|
||||
const role = roles.value.find((item) => item.id === id)
|
||||
if (!role) throw new Error('角色不存在')
|
||||
if (role.builtin) throw new Error('内置角色不能删除')
|
||||
if (members.value.some((member) => member.roleIds.includes(id))) throw new Error('该角色仍有成员使用，不能删除')
|
||||
await deleteMerchantRole(id)
|
||||
roles.value = roles.value.filter((item) => item.id !== id)
|
||||
}
|
||||
|
||||
async function setRolePermissions(id: string, permissionCodes: string[]) {
|
||||
const role = roles.value.find((item) => item.id === id)
|
||||
if (!role) throw new Error('角色不存在')
|
||||
if (role.builtin) throw new Error('内置管理员权限不能修改')
|
||||
const backendCodes = new Set(permissionCodes.flatMap((code) => FRONTEND_TO_MERCHANT_PERMISSION_CODES[code] ?? []))
|
||||
const selectedPermissionIds = permissionResources.value
|
||||
.filter((resource) => backendCodes.has(resource.permissionCode))
|
||||
.map((resource) => resource.id)
|
||||
const mappedResourceIds = new Set(permissionResources.value
|
||||
.filter((resource) => mappedMerchantPermissionCodes.has(resource.permissionCode))
|
||||
.map((resource) => String(resource.id)))
|
||||
// The endpoint replaces every ID, including MENU nodes this screen does not render.
|
||||
const preservedPermissionIds = role.permissionIds.filter((permissionId) => !mappedResourceIds.has(permissionId))
|
||||
const nextPermissionIds = [...new Set([...preservedPermissionIds, ...selectedPermissionIds])]
|
||||
await replaceMerchantRolePermissions(id, nextPermissionIds)
|
||||
role.permissionIds = nextPermissionIds.map(String)
|
||||
role.permissionCodes = [...new Set(permissionCodes)]
|
||||
}
|
||||
|
||||
function roleMemberCount(roleId: string) {
|
||||
return members.value.filter((member) => member.roleIds.includes(roleId)).length
|
||||
}
|
||||
|
||||
function roleNames(roleIds: readonly string[]) {
|
||||
return roleIds.map((id) => roles.value.find((role) => role.id === id)?.name).filter((name): name is string => Boolean(name))
|
||||
}
|
||||
|
||||
return {
|
||||
company,
|
||||
qualifications,
|
||||
members,
|
||||
roles,
|
||||
activeMemberCount,
|
||||
loadCompanyContext,
|
||||
loadRoles,
|
||||
loadMembers,
|
||||
updateCompany,
|
||||
createMember,
|
||||
updateMember,
|
||||
toggleMemberStatus,
|
||||
resetMemberPassword,
|
||||
createRole,
|
||||
updateRole,
|
||||
toggleRoleStatus,
|
||||
deleteRole,
|
||||
setRolePermissions,
|
||||
roleMemberCount,
|
||||
roleNames,
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,21 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import test from 'node:test'
|
||||
import { formatQualificationFileSize, QUALIFICATION_MAX_FILE_SIZE, validateQualificationFile } from './qualificationFile.ts'
|
||||
|
||||
test('accepts the backend-confirmed JPG and PNG formats up to 5MB', () => {
|
||||
assert.equal(validateQualificationFile({ name: '营业执照.jpeg', size: QUALIFICATION_MAX_FILE_SIZE, type: 'image/jpeg' }), '')
|
||||
assert.equal(validateQualificationFile({ name: '营业执照.PNG', size: 2048, type: 'image/png' }), '')
|
||||
})
|
||||
|
||||
test('rejects PDF, empty, mismatched, and oversized files', () => {
|
||||
assert.match(validateQualificationFile({ name: '营业执照.pdf', size: 1024, type: 'application/pdf' }), /格式不支持/)
|
||||
assert.match(validateQualificationFile({ name: '伪装图片.png', size: 1024, type: 'text/plain' }), /内容类型/)
|
||||
assert.match(validateQualificationFile({ name: '空文件.png', size: 0, type: 'image/png' }), /内容为空/)
|
||||
assert.match(validateQualificationFile({ name: '超大文件.jpg', size: QUALIFICATION_MAX_FILE_SIZE + 1, type: 'image/jpeg' }), /超过 5MB/)
|
||||
})
|
||||
|
||||
test('formats selected file sizes for review', () => {
|
||||
assert.equal(formatQualificationFileSize(512), '512 B')
|
||||
assert.equal(formatQualificationFileSize(1536), '1.5 KB')
|
||||
assert.equal(formatQualificationFileSize(2 * 1024 * 1024), '2.0 MB')
|
||||
})
|
||||
@@ -0,0 +1,25 @@
|
||||
export const QUALIFICATION_MAX_FILE_SIZE = 5 * 1024 * 1024
|
||||
|
||||
const allowedExtensions = new Set(['jpg', 'jpeg', 'png'])
|
||||
const allowedMimeTypes = new Set(['image/jpeg', 'image/png'])
|
||||
|
||||
export interface QualificationFileLike {
|
||||
name: string
|
||||
size: number
|
||||
type?: string
|
||||
}
|
||||
|
||||
export function validateQualificationFile(file: QualificationFileLike) {
|
||||
const extension = file.name.includes('.') ? file.name.split('.').pop()?.toLowerCase() ?? '' : ''
|
||||
if (!allowedExtensions.has(extension)) return '文件格式不支持，请选择 JPG 或 PNG 图片'
|
||||
if (file.type && !allowedMimeTypes.has(file.type)) return '文件内容类型与支持的资质格式不一致'
|
||||
if (file.size <= 0) return '文件内容为空，请重新选择'
|
||||
if (file.size > QUALIFICATION_MAX_FILE_SIZE) return '文件超过 5MB，请压缩后重新选择'
|
||||
return ''
|
||||
}
|
||||
|
||||
export function formatQualificationFileSize(bytes: number) {
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||||
return `${(bytes / 1024 / 1024).toFixed(1)} MB`
|
||||
}
|
||||
@@ -0,0 +1,443 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { FormInstance, FormRules, UploadFile, UploadInstance } from 'element-plus'
|
||||
import { Building2, CheckCircle2, Clock3, FileCheck2, FileText, Pencil, Trash2, Upload, UserRound } from '@lucide/vue'
|
||||
import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
|
||||
import { useTenantAdministrationStore, type TenantCompanyProfile, type TenantQualification } from '@/stores/tenantAdministration'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { formatQualificationFileSize, validateQualificationFile } from '@/utils/qualificationFile'
|
||||
import { downloadQualificationImage, uploadBusinessLicense } from '@/api/merchantIam'
|
||||
import { ApiError } from '@/api/http'
|
||||
|
||||
const store = useTenantAdministrationStore()
|
||||
const auth = useAuthStore()
|
||||
const companyApproved = computed(() => store.company.auditStatus === 'ACTIVE')
|
||||
const auditStatusCopy = computed(() => ({
|
||||
PROFILE_REQUIRED: { title: '请上传营业执照', detail: '营业执照提交审核前不能提交头程订单。' },
|
||||
PENDING: { title: '企业资料正在等待平台审核', detail: '审核期间仍可维护资料和保存订单草稿；审核通过前不能提交订单。' },
|
||||
ACTIVE: { title: '企业资料已审核，下单资格已开通', detail: '您可以创建、保存并提交头程订单。' },
|
||||
REJECTED: { title: '企业资料审核未通过', detail: '请根据平台反馈修正资料；当前后端暂不支持同一企业重新上传。' },
|
||||
DISABLED: { title: '企业账号已被平台停用', detail: '当前不能提交订单，请联系平台客服核实。' },
|
||||
})[store.company.auditStatus])
|
||||
const activeTab = ref('basic')
|
||||
const editing = ref(false)
|
||||
const qualificationOpen = ref(false)
|
||||
const previewOpen = ref(false)
|
||||
const previewRecord = ref<TenantQualification | null>(null)
|
||||
const previewUrl = ref('')
|
||||
const previewError = ref('')
|
||||
const previewLoading = ref(false)
|
||||
const profileFormRef = ref<FormInstance>()
|
||||
const qualificationFormRef = ref<FormInstance>()
|
||||
const uploadRef = ref<UploadInstance>()
|
||||
const qualificationPage = ref(1)
|
||||
const qualificationPageSize = ref(10)
|
||||
const selectedFileSize = ref(0)
|
||||
const selectedFileType = ref('')
|
||||
const qualificationFileError = ref('')
|
||||
const qualificationSubmitting = ref(false)
|
||||
const profileSubmitting = ref(false)
|
||||
const loading = ref(false)
|
||||
const loadError = ref('')
|
||||
const selectedFile = ref<File | null>(null)
|
||||
const draft = reactive<TenantCompanyProfile>({ ...store.company })
|
||||
const qualificationDraft = reactive({ type: '营业执照', fileName: '', certificateNo: '' })
|
||||
const canUploadQualification = computed(() => ['PROFILE_REQUIRED', 'REJECTED'].includes(store.company.auditStatus))
|
||||
const qualificationUploadDisabledReason = computed(() => {
|
||||
if (store.company.auditStatus === 'PENDING') return '企业资料正在审核，暂不能再次提交资质文件。'
|
||||
if (store.company.auditStatus === 'ACTIVE') return '当前企业已审核通过，资质替换请联系平台管理员处理。'
|
||||
if (store.company.auditStatus === 'DISABLED') return '企业账号已停用，暂不能提交资质文件。'
|
||||
return ''
|
||||
})
|
||||
const qualificationPanelHint = computed(() => canUploadQualification.value
|
||||
? '一期仅支持提交营业执照；提交后将进入平台审核。'
|
||||
: qualificationUploadDisabledReason.value)
|
||||
const profileFormRules: FormRules<TenantCompanyProfile> = {
|
||||
companyName: [{ required: true, whitespace: true, message: '请输入公司名称', trigger: 'blur' }],
|
||||
legalRepresentative: [{ required: true, whitespace: true, message: '请输入法人姓名', trigger: 'blur' }],
|
||||
contactName: [{ required: true, whitespace: true, message: '请输入联系人姓名', trigger: 'blur' }],
|
||||
contactPhone: [{ required: true, whitespace: true, message: '请输入联系电话', trigger: 'blur' }],
|
||||
contactEmail: [{ type: 'email', message: '请输入正确的联系邮箱', trigger: 'blur' }],
|
||||
}
|
||||
const qualificationFormRules: FormRules = {
|
||||
fileName: [{ required: true, message: '请选择营业执照图片', trigger: 'change' }],
|
||||
}
|
||||
const qualificationColumns: DataTableColumn[] = [
|
||||
{ key: 'actions', label: '操作', width: 90, fixed: 'left', slotName: 'actions' },
|
||||
{ key: 'type', prop: 'type', label: '文件类型', minWidth: 150 },
|
||||
{ key: 'fileName', prop: 'fileName', label: '文件名称', minWidth: 220, showOverflowTooltip: true },
|
||||
{ key: 'status', label: '状态', width: 110, slotName: 'status' },
|
||||
{ key: 'expiresAt', prop: 'expiresAt', label: '有效期', width: 130 },
|
||||
{ key: 'updatedAt', prop: 'updatedAt', label: '更新时间', minWidth: 160 },
|
||||
]
|
||||
const pagedQualifications = computed(() => {
|
||||
const start = (qualificationPage.value - 1) * qualificationPageSize.value
|
||||
return store.qualifications.slice(start, start + qualificationPageSize.value)
|
||||
})
|
||||
|
||||
async function loadCompanyContext() {
|
||||
loading.value = true
|
||||
loadError.value = ''
|
||||
try {
|
||||
await store.loadCompanyContext()
|
||||
Object.assign(draft, store.company)
|
||||
} catch (error) {
|
||||
loadError.value = error instanceof Error ? error.message : '企业资料加载失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => void loadCompanyContext())
|
||||
|
||||
function startEdit() {
|
||||
Object.assign(draft, store.company)
|
||||
profileFormRef.value?.clearValidate()
|
||||
editing.value = true
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
Object.assign(draft, store.company)
|
||||
editing.value = false
|
||||
profileFormRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
async function saveProfile() {
|
||||
if (profileSubmitting.value) return
|
||||
const valid = await profileFormRef.value?.validate().then(() => true).catch(() => false)
|
||||
if (!valid) return
|
||||
profileSubmitting.value = true
|
||||
try {
|
||||
await store.updateCompany({ ...draft })
|
||||
Object.assign(draft, store.company)
|
||||
editing.value = false
|
||||
ElMessage.success('企业资料已保存')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '企业资料保存失败')
|
||||
} finally {
|
||||
profileSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openQualificationDialog() {
|
||||
if (!canUploadQualification.value) {
|
||||
ElMessage.warning(qualificationUploadDisabledReason.value)
|
||||
return
|
||||
}
|
||||
resetQualificationDraft()
|
||||
qualificationOpen.value = true
|
||||
}
|
||||
|
||||
function handleFileChange(file: UploadFile) {
|
||||
const raw = file.raw
|
||||
if (!raw) {
|
||||
qualificationFileError.value = '未能读取所选文件，请重新选择'
|
||||
return
|
||||
}
|
||||
const error = validateQualificationFile({ name: raw.name, size: raw.size, type: raw.type })
|
||||
if (error) {
|
||||
qualificationFileError.value = error
|
||||
qualificationDraft.fileName = ''
|
||||
selectedFileSize.value = 0
|
||||
selectedFileType.value = ''
|
||||
selectedFile.value = null
|
||||
uploadRef.value?.clearFiles()
|
||||
return
|
||||
}
|
||||
qualificationFileError.value = ''
|
||||
selectedFile.value = raw
|
||||
qualificationDraft.fileName = raw.name
|
||||
selectedFileSize.value = raw.size
|
||||
selectedFileType.value = raw.type || raw.name.split('.').pop()?.toUpperCase() || '文件'
|
||||
}
|
||||
|
||||
function removeSelectedFile() {
|
||||
uploadRef.value?.clearFiles()
|
||||
qualificationDraft.fileName = ''
|
||||
selectedFileSize.value = 0
|
||||
selectedFileType.value = ''
|
||||
qualificationFileError.value = ''
|
||||
selectedFile.value = null
|
||||
}
|
||||
|
||||
function resetQualificationDraft() {
|
||||
uploadRef.value?.clearFiles()
|
||||
qualificationDraft.type = '营业执照'
|
||||
qualificationDraft.fileName = ''
|
||||
qualificationDraft.certificateNo = store.company.creditCode
|
||||
selectedFileSize.value = 0
|
||||
selectedFileType.value = ''
|
||||
qualificationFileError.value = ''
|
||||
selectedFile.value = null
|
||||
qualificationFormRef.value?.clearValidate()
|
||||
}
|
||||
|
||||
async function submitQualification() {
|
||||
if (qualificationSubmitting.value) return
|
||||
if (!canUploadQualification.value) {
|
||||
qualificationOpen.value = false
|
||||
await loadCompanyContext()
|
||||
ElMessage.warning(qualificationUploadDisabledReason.value)
|
||||
return
|
||||
}
|
||||
const valid = await qualificationFormRef.value?.validate().then(() => true).catch(() => false)
|
||||
if (!valid || !selectedFile.value) {
|
||||
qualificationFileError.value = '请选择营业执照图片'
|
||||
return
|
||||
}
|
||||
if (qualificationFileError.value) {
|
||||
ElMessage.warning(qualificationFileError.value)
|
||||
return
|
||||
}
|
||||
qualificationSubmitting.value = true
|
||||
try {
|
||||
await uploadBusinessLicense(selectedFile.value, qualificationDraft.certificateNo.trim() || undefined)
|
||||
await store.loadCompanyContext()
|
||||
qualificationOpen.value = false
|
||||
ElMessage.success('营业执照已提交审核')
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError && error.code === 'A0409') {
|
||||
await loadCompanyContext()
|
||||
qualificationOpen.value = false
|
||||
ElMessage.warning('企业资料正在审核，不能再次提交资质文件')
|
||||
return
|
||||
}
|
||||
ElMessage.error(error instanceof Error ? error.message : '营业执照上传失败')
|
||||
} finally {
|
||||
qualificationSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function previewQualification(record: TenantQualification) {
|
||||
if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
|
||||
previewRecord.value = record
|
||||
previewOpen.value = true
|
||||
previewUrl.value = ''
|
||||
previewError.value = ''
|
||||
if (!record.documentUrl) {
|
||||
previewError.value = '当前资质记录没有可查看的文件地址，请联系平台管理员处理。'
|
||||
return
|
||||
}
|
||||
previewLoading.value = true
|
||||
try {
|
||||
const blob = await downloadQualificationImage(record.documentUrl)
|
||||
previewUrl.value = URL.createObjectURL(blob)
|
||||
} catch (error) {
|
||||
previewError.value = error instanceof Error && error.message === '资质文件地址无效'
|
||||
? '当前资质文件尚未迁移到安全预览地址，请联系平台管理员处理。'
|
||||
: '资质文件加载失败，请稍后重试。'
|
||||
ElMessage.error(previewError.value)
|
||||
} finally {
|
||||
previewLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function closeQualificationPreview() {
|
||||
if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
|
||||
previewUrl.value = ''
|
||||
previewError.value = ''
|
||||
previewRecord.value = null
|
||||
}
|
||||
|
||||
function qualificationStatus(status: string) {
|
||||
return status === 'VERIFIED' ? '已验证' : status === 'PENDING' ? '待审核' : status === 'REJECTED' ? '已驳回' : '已过期'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-loading="loading" class="profile-page">
|
||||
<div v-if="loadError" class="client-card profile-load-error" role="alert">
|
||||
<div><strong>企业资料加载失败</strong><span>{{ loadError }}</span></div>
|
||||
<el-button :loading="loading" @click="loadCompanyContext">重新加载</el-button>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="company-audit-notice" :class="companyApproved ? 'is-approved' : 'is-pending'" role="status">
|
||||
<component :is="companyApproved ? CheckCircle2 : Clock3" :size="21" />
|
||||
<div><strong>{{ auditStatusCopy.title }}</strong><span>{{ auditStatusCopy.detail }}</span></div>
|
||||
</div>
|
||||
|
||||
<el-tabs v-model="activeTab" class="profile-tabs">
|
||||
<el-tab-pane name="basic">
|
||||
<template #label><span class="tab-label"><Building2 :size="16" />企业基本信息</span></template>
|
||||
<div class="client-card info-panel">
|
||||
<header class="info-panel-header"><h3>企业基本信息</h3><el-button v-if="auth.hasPermission('company:profile:edit')" type="primary" @click="startEdit"><Pencil :size="16" />编辑企业资料</el-button></header>
|
||||
<dl class="profile-grid">
|
||||
<div><dt>公司名称</dt><dd>{{ store.company.companyName || '-' }}</dd></div>
|
||||
<div><dt>统一社会信用代码</dt><dd>{{ store.company.creditCode || '-' }}</dd></div>
|
||||
<div><dt>法人姓名</dt><dd>{{ store.company.legalRepresentative || '-' }}</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane name="contact">
|
||||
<template #label><span class="tab-label"><UserRound :size="16" />联系信息</span></template>
|
||||
<div class="client-card info-panel">
|
||||
<header class="info-panel-header"><h3>联系信息</h3></header>
|
||||
<dl class="profile-grid">
|
||||
<div><dt>联系人</dt><dd>{{ store.company.contactName || '-' }}</dd></div>
|
||||
<div><dt>联系电话</dt><dd>{{ store.company.contactPhone || '-' }}</dd></div>
|
||||
<div><dt>联系邮箱</dt><dd>{{ store.company.contactEmail || '-' }}</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane name="qualification">
|
||||
<template #label><span class="tab-label"><FileCheck2 :size="16" />资质文件</span></template>
|
||||
<div class="client-card qualification-panel">
|
||||
<header>
|
||||
<div><h3>企业资质</h3><p>{{ qualificationPanelHint }}</p></div>
|
||||
<el-tooltip v-if="auth.hasPermission('company:qualification:upload')" :disabled="canUploadQualification" :content="qualificationUploadDisabledReason" placement="top">
|
||||
<span class="qualification-update-control"><el-button type="primary" :disabled="!canUploadQualification" @click="openQualificationDialog"><Upload :size="16" />更新资质</el-button></span>
|
||||
</el-tooltip>
|
||||
</header>
|
||||
<DataTable
|
||||
v-model:page="qualificationPage"
|
||||
v-model:page-size="qualificationPageSize"
|
||||
class="desktop-qualification-table"
|
||||
:columns="qualificationColumns"
|
||||
:data="pagedQualifications"
|
||||
:empty-text="'暂无企业资质记录'"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:total="store.qualifications.length"
|
||||
row-key="id"
|
||||
>
|
||||
<template #actions="{ row }"><el-button link type="primary" @click="previewQualification(row as TenantQualification)">查看</el-button></template>
|
||||
<template #status="{ row }"><el-tag :type="row.status === 'VERIFIED' ? 'success' : row.status === 'PENDING' ? 'warning' : 'danger'" effect="light">{{ qualificationStatus(row.status) }}</el-tag></template>
|
||||
</DataTable>
|
||||
<div class="mobile-qualification-list">
|
||||
<article v-for="record in store.qualifications" :key="record.id">
|
||||
<header><strong>{{ record.type }}</strong><el-tag :type="record.status === 'VERIFIED' ? 'success' : record.status === 'PENDING' ? 'warning' : 'danger'" effect="light">{{ qualificationStatus(record.status) }}</el-tag></header>
|
||||
<div class="qualification-file-name"><FileText :size="16" /><span>{{ record.fileName }}</span></div>
|
||||
<dl><div><dt>有效期</dt><dd>{{ record.expiresAt }}</dd></div><div><dt>更新时间</dt><dd>{{ record.updatedAt }}</dd></div></dl>
|
||||
<el-button link type="primary" @click="previewQualification(record)">查看文件信息</el-button>
|
||||
</article>
|
||||
<div v-if="store.qualifications.length === 0" class="client-empty">暂无企业资质记录。</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-drawer v-model="editing" title="编辑企业资料" size="min(620px, 94vw)" @closed="cancelEdit">
|
||||
<el-form ref="profileFormRef" :model="draft" :rules="profileFormRules" label-position="top" class="profile-form">
|
||||
<h3>企业基本信息</h3>
|
||||
<div class="form-grid-two">
|
||||
<el-form-item label="公司名称" prop="companyName" required><el-input v-model="draft.companyName" placeholder="请输入公司名称" /></el-form-item>
|
||||
<el-form-item label="统一社会信用代码"><el-input v-model="draft.creditCode" disabled /></el-form-item>
|
||||
<el-form-item label="法人姓名" prop="legalRepresentative" required><el-input v-model="draft.legalRepresentative" placeholder="请输入法定代表人姓名" /></el-form-item>
|
||||
</div>
|
||||
<h3>联系信息</h3>
|
||||
<div class="form-grid-two">
|
||||
<el-form-item label="联系人" prop="contactName" required><el-input v-model="draft.contactName" placeholder="请输入联系人姓名" /></el-form-item>
|
||||
<el-form-item label="联系电话" prop="contactPhone" required><el-input v-model="draft.contactPhone" placeholder="请输入联系电话" /></el-form-item>
|
||||
<el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="draft.contactEmail" placeholder="请输入联系邮箱（选填）" /></el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer><div class="drawer-actions"><el-button :disabled="profileSubmitting" @click="cancelEdit">取消</el-button><el-button type="primary" :loading="profileSubmitting" @click="saveProfile">保存修改</el-button></div></template>
|
||||
</el-drawer>
|
||||
|
||||
<el-dialog v-model="qualificationOpen" title="更新资质文件" width="min(520px, 92vw)" @closed="resetQualificationDraft">
|
||||
<el-form ref="qualificationFormRef" :model="qualificationDraft" :rules="qualificationFormRules" label-position="top">
|
||||
<el-form-item label="文件类型"><el-input v-model="qualificationDraft.type" disabled /></el-form-item>
|
||||
<el-form-item label="选择文件" prop="fileName" required :error="qualificationFileError">
|
||||
<el-upload ref="uploadRef" :auto-upload="false" :limit="1" :show-file-list="false" accept=".jpg,.jpeg,.png" @change="handleFileChange">
|
||||
<el-button><Upload :size="16" />选择文件</el-button>
|
||||
<template #tip><div class="upload-tip">仅支持 JPG、PNG，单张图片不超过 5MB。</div></template>
|
||||
</el-upload>
|
||||
<div v-if="qualificationDraft.fileName" class="selected-qualification-file" aria-live="polite">
|
||||
<FileText :size="20" />
|
||||
<div><strong>{{ qualificationDraft.fileName }}</strong><span>{{ selectedFileType }} · {{ formatQualificationFileSize(selectedFileSize) }}</span></div>
|
||||
<el-button link type="danger" aria-label="移除所选资质文件" @click="removeSelectedFile"><Trash2 :size="16" />移除</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码"><el-input v-model="qualificationDraft.certificateNo" maxlength="18" placeholder="建议填写 18 位统一社会信用代码" /></el-form-item>
|
||||
</el-form>
|
||||
<template #footer><el-button :disabled="qualificationSubmitting" @click="qualificationOpen = false">取消</el-button><el-button type="primary" :loading="qualificationSubmitting" @click="submitQualification">提交审核</el-button></template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="previewOpen" :title="`${previewRecord?.type || '资质文件'}详情`" width="min(560px, 92vw)" @closed="closeQualificationPreview">
|
||||
<div v-if="previewRecord" v-loading="previewLoading" class="document-preview">
|
||||
<img v-if="previewUrl" :src="previewUrl" :alt="`${previewRecord.type}预览`" class="qualification-preview-image" />
|
||||
<FileCheck2 :size="42" />
|
||||
<strong>{{ previewRecord.fileName }}</strong>
|
||||
<el-tag :type="previewRecord.status === 'VERIFIED' ? 'success' : previewRecord.status === 'PENDING' ? 'warning' : 'danger'" effect="light">{{ qualificationStatus(previewRecord.status) }}</el-tag>
|
||||
<dl><div><dt>文件类型</dt><dd>{{ previewRecord.type }}</dd></div><div><dt>有效期</dt><dd>{{ previewRecord.expiresAt }}</dd></div><div><dt>更新时间</dt><dd>{{ previewRecord.updatedAt }}</dd></div></dl>
|
||||
<p v-if="previewError" class="document-preview-error" role="alert">{{ previewError }}</p>
|
||||
<span v-else>{{ previewUrl ? '文件通过当前商户会话临时加载，关闭弹窗后立即释放。' : '当前文件暂不可预览。' }}</span>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-page { display: flex; flex-direction: column; gap: 16px; }
|
||||
.profile-load-error { display: flex; min-height: 180px; align-items: center; justify-content: center; gap: 22px; text-align: left; }
|
||||
.profile-load-error > div { display: flex; max-width: 560px; flex-direction: column; gap: 6px; }
|
||||
.profile-load-error span { color: var(--muted); font-size: 12px; line-height: 1.6; }
|
||||
.company-audit-notice { display: flex; align-items: flex-start; gap: 12px; padding: 15px 17px; border: 1px solid; }
|
||||
.company-audit-notice svg { flex: 0 0 21px; margin-top: 1px; }
|
||||
.company-audit-notice div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
|
||||
.company-audit-notice strong { color: var(--navy); font-size: 13px; }
|
||||
.company-audit-notice span { color: var(--muted); font-size: 12px; line-height: 1.6; }
|
||||
.company-audit-notice.is-approved { border-color: #bcd9d2; background: #eff8f5; color: #20745f; }
|
||||
.qualification-preview-image { display: block; max-width: 100%; max-height: 360px; margin: 0 auto 14px; object-fit: contain; }
|
||||
.company-audit-notice.is-pending { border-color: #e5d2a5; background: #fff9eb; color: #9a6a12; }
|
||||
.qualification-panel header p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
|
||||
.profile-tabs :deep(.el-tabs__header) { margin-bottom: 14px; padding: 0 16px; border: 1px solid var(--border); background: #fff; }
|
||||
.profile-tabs :deep(.el-tabs__nav-wrap::after) { display: none; }
|
||||
.tab-label { display: inline-flex; align-items: center; gap: 7px; }
|
||||
.info-panel { padding: 0; }
|
||||
.info-panel-header { min-height: 66px; padding: 14px 22px; border-bottom: 1px solid var(--border); }
|
||||
.info-panel-header h3 { margin: 0; font-size: 15px; }
|
||||
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
|
||||
.profile-grid > div { min-height: 86px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
|
||||
.profile-grid > div:nth-child(odd) { border-right: 1px solid var(--border); }
|
||||
.profile-grid dt { color: var(--muted); font-size: 11px; }
|
||||
.profile-grid dd { margin: 9px 0 0; color: var(--navy); font-size: 14px; font-weight: 650; }
|
||||
.profile-grid .full-row { grid-column: 1 / -1; border-right: 0; }
|
||||
.qualification-panel { padding: 0; overflow: hidden; }
|
||||
.qualification-panel > header { padding: 20px 22px; border-bottom: 1px solid var(--border); }
|
||||
.qualification-panel h3 { margin: 0; }
|
||||
.qualification-update-control { display: inline-flex; }
|
||||
.mobile-qualification-list { display: none; }
|
||||
.profile-form h3 { margin: 4px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-size: 15px; }
|
||||
.profile-form h3:not(:first-child) { margin-top: 22px; }
|
||||
.form-grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
|
||||
.form-grid-two .full-row { grid-column: 1 / -1; }
|
||||
.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; }
|
||||
.upload-tip { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.55; }
|
||||
.selected-qualification-file { display: flex; width: 100%; min-width: 0; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid #cfe1dd; background: #f3f8f7; color: var(--primary); }
|
||||
.selected-qualification-file > svg { flex: 0 0 20px; }
|
||||
.selected-qualification-file > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
|
||||
.selected-qualification-file strong { overflow: hidden; color: var(--navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.selected-qualification-file span { color: var(--muted); font-size: 10px; }
|
||||
.document-preview { display: grid; min-height: 260px; place-items: center; align-content: center; gap: 12px; border: 1px dashed #b8c8c5; background: #f6faf9; color: var(--primary); }
|
||||
.document-preview > strong { max-width: min(420px, calc(100% - 32px)); overflow-wrap: anywhere; color: var(--navy); text-align: center; }
|
||||
.document-preview dl { display: grid; width: min(420px, calc(100% - 32px)); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
|
||||
.document-preview dl div { min-width: 0; padding: 12px; text-align: center; }
|
||||
.document-preview dt { color: var(--muted); font-size: 10px; }
|
||||
.document-preview dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--navy); font-size: 12px; font-weight: 650; }
|
||||
.document-preview > span { max-width: 440px; padding: 0 16px; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; }
|
||||
.document-preview-error { max-width: 440px; margin: 0; padding: 0 16px; color: #9a5a09; font-size: 11px; line-height: 1.6; text-align: center; }
|
||||
@media (max-width: 720px) {
|
||||
.profile-grid, .form-grid-two { grid-template-columns: 1fr; }
|
||||
.profile-grid > div:nth-child(odd) { border-right: 0; }
|
||||
.qualification-panel > header { align-items: flex-start; gap: 12px; }
|
||||
.qualification-panel > header .el-button { flex: 0 0 auto; }
|
||||
.desktop-qualification-table { display: none; }
|
||||
.mobile-qualification-list { display: grid; gap: 10px; padding: 10px; }
|
||||
.mobile-qualification-list article { min-width: 0; padding: 14px; border: 1px solid var(--border); background: #fff; }
|
||||
.mobile-qualification-list article > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.qualification-file-name { display: flex; min-width: 0; align-items: center; gap: 8px; margin: 14px 0; color: var(--primary); }
|
||||
.qualification-file-name svg { flex: 0 0 16px; }
|
||||
.qualification-file-name span { min-width: 0; overflow: hidden; color: var(--navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.mobile-qualification-list dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 10px; padding-top: 12px; border-top: 1px solid var(--border); }
|
||||
.mobile-qualification-list dt { color: var(--muted); font-size: 10px; }
|
||||
.mobile-qualification-list dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 600; }
|
||||
.document-preview dl { grid-template-columns: 1fr; }
|
||||
.document-preview dl div + div { border-top: 1px solid var(--border); }
|
||||
.selected-qualification-file { align-items: flex-start; flex-wrap: wrap; }
|
||||
.selected-qualification-file > .el-button { margin-left: 30px; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,238 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { KeyRound, Pencil, Plus } from '@lucide/vue'
|
||||
import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
|
||||
import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
|
||||
import { useTenantAdministrationStore, type TenantMember, type TenantRecordStatus } from '@/stores/tenantAdministration'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const store = useTenantAdministrationStore()
|
||||
const auth = useAuthStore()
|
||||
const memberFilters = ref({ keyword: '', status: '' as TenantRecordStatus | '' })
|
||||
const appliedMemberFilters = ref({ ...memberFilters.value })
|
||||
const memberPage = ref(1)
|
||||
const memberPageSize = ref(10)
|
||||
const editorOpen = ref(false)
|
||||
const editingId = ref('')
|
||||
const loading = ref(false)
|
||||
const loadError = ref('')
|
||||
const saving = ref(false)
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive({ name: '', account: '', password: '', phone: '', email: '', roleIds: [] as string[] })
|
||||
const memberRules: FormRules = {
|
||||
name: [{ required: true, message: '请输入成员姓名', trigger: 'blur' }],
|
||||
account: [
|
||||
{ required: true, message: '请输入登录账号', trigger: 'blur' },
|
||||
{ pattern: /^[A-Za-z0-9_.@-]{4,64}$/, message: '账号需为 4–64 位字母、数字或 _ . @ -', trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入初始密码', trigger: 'blur' },
|
||||
{ pattern: /^(?=.*[A-Za-z])(?=.*\d).{8,64}$/, message: '密码需为 8–64 位，并同时包含字母和数字', trigger: 'blur' },
|
||||
],
|
||||
phone: [{ max: 32, message: '联系电话不能超过 32 个字符', trigger: 'blur' }],
|
||||
email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
|
||||
roleIds: [{ type: 'array', required: true, min: 1, message: '请至少选择一个成员角色', trigger: 'change' }],
|
||||
}
|
||||
|
||||
const memberQueryFields: QueryField[] = [
|
||||
{ key: 'keyword', type: 'input', placeholder: '姓名、账号、手机或邮箱' },
|
||||
{ key: 'status', type: 'select', placeholder: '全部状态', options: [{ label: '正常', value: 'ACTIVE' }, { label: '已停用', value: 'INACTIVE' }] },
|
||||
]
|
||||
const memberTableColumns: DataTableColumn[] = [
|
||||
{ key: 'actions', label: '操作', fixed: 'left', width: 230, slotName: 'actions' },
|
||||
{ key: 'member', label: '成员', minWidth: 170, slotName: 'member' },
|
||||
{ key: 'contact', label: '联系方式', minWidth: 200, slotName: 'contact' },
|
||||
{ key: 'roles', label: '角色', minWidth: 130, slotName: 'roles' },
|
||||
{ key: 'lastLoginAt', prop: 'lastLoginAt', label: '登录记录', minWidth: 130 },
|
||||
{ key: 'status', label: '状态', width: 90, slotName: 'status' },
|
||||
]
|
||||
|
||||
const filteredMembers = computed(() => store.members.filter((member) => {
|
||||
const key = appliedMemberFilters.value.keyword.trim().toLowerCase()
|
||||
const matchesKeyword = !key || [member.name, member.account, member.phone, member.email].some((value) => value.toLowerCase().includes(key))
|
||||
return matchesKeyword && (!appliedMemberFilters.value.status || member.status === appliedMemberFilters.value.status)
|
||||
}))
|
||||
const pagedMembers = computed(() => filteredMembers.value.slice((memberPage.value - 1) * memberPageSize.value, memberPage.value * memberPageSize.value))
|
||||
|
||||
async function loadMembers() {
|
||||
loading.value = true
|
||||
loadError.value = ''
|
||||
try {
|
||||
await Promise.all([store.loadRoles(), store.loadMembers()])
|
||||
} catch (error) {
|
||||
loadError.value = error instanceof Error ? error.message : '企业成员加载失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => void loadMembers())
|
||||
|
||||
function searchMembers(filters: QueryModel) {
|
||||
appliedMemberFilters.value = {
|
||||
keyword: typeof filters.keyword === 'string' ? filters.keyword : '',
|
||||
status: filters.status === 'ACTIVE' || filters.status === 'INACTIVE' ? filters.status : '',
|
||||
}
|
||||
memberPage.value = 1
|
||||
void loadMembers()
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
editingId.value = ''
|
||||
Object.assign(form, { name: '', account: '', password: '', phone: '', email: '', roleIds: [] })
|
||||
void nextTick(() => formRef.value?.clearValidate())
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
resetForm()
|
||||
editorOpen.value = true
|
||||
}
|
||||
|
||||
function openEdit(member: TenantMember) {
|
||||
editingId.value = member.id
|
||||
Object.assign(form, { name: member.name, account: member.account, password: '', phone: member.phone, email: member.email, roleIds: [...member.roleIds] })
|
||||
editorOpen.value = true
|
||||
}
|
||||
|
||||
async function saveMember() {
|
||||
if (saving.value) return
|
||||
form.name = form.name.trim()
|
||||
form.account = form.account.trim()
|
||||
form.phone = form.phone.trim()
|
||||
form.email = form.email.trim()
|
||||
if (!editingId.value || form.password) {
|
||||
const valid = await formRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
} else {
|
||||
const valid = await formRef.value?.validateField(['name', 'account', 'phone', 'email', 'roleIds']).then(() => true).catch(() => false)
|
||||
if (!valid) return
|
||||
}
|
||||
saving.value = true
|
||||
try {
|
||||
if (editingId.value) {
|
||||
await store.updateMember(editingId.value, { name: form.name, memberNo: form.account, phone: form.phone, email: form.email, roleIds: [...form.roleIds] })
|
||||
ElMessage.success('成员信息已更新')
|
||||
} else {
|
||||
await store.createMember({ ...form, memberNo: form.account, roleIds: [...form.roleIds] })
|
||||
ElMessage.success('成员已新增')
|
||||
}
|
||||
editorOpen.value = false
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '成员保存失败，请重试')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleStatus(member: TenantMember) {
|
||||
const nextLabel = member.status === 'ACTIVE' ? '停用' : '启用'
|
||||
try {
|
||||
await ElMessageBox.confirm(`${nextLabel}后将立即影响该成员的客户工作台访问。`, `${nextLabel}成员 ${member.name}`, { type: 'warning', confirmButtonText: nextLabel, cancelButtonText: '取消' })
|
||||
await store.toggleMemberStatus(member.id)
|
||||
ElMessage.success(`成员已${nextLabel}`)
|
||||
} catch (error) {
|
||||
if (error === 'cancel' || error === 'close') return
|
||||
ElMessage.error(error instanceof Error ? error.message : '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function resetPassword(member: TenantMember) {
|
||||
try {
|
||||
const result = await ElMessageBox.prompt('请输入 8–64 位、同时包含字母和数字的新密码。重置后成员需要重新登录。', `重置 ${member.name} 的密码`, {
|
||||
confirmButtonText: '确认重置',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'password',
|
||||
inputPlaceholder: '请输入新密码',
|
||||
inputValidator: (value) => /^(?=.*[A-Za-z])(?=.*\d).{8,64}$/.test(value) || '密码需为 8–64 位，并同时包含字母和数字',
|
||||
})
|
||||
await store.resetMemberPassword(member.id, result.value)
|
||||
ElMessage.success('成员密码已重置')
|
||||
} catch (error) {
|
||||
if (error === 'cancel' || error === 'close') return
|
||||
ElMessage.error(error instanceof Error ? error.message : '密码重置失败，请重试')
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-loading="loading" class="members-page">
|
||||
<div v-if="loadError" class="client-card collection-load-error" role="alert">
|
||||
<div><strong>企业成员加载失败</strong><span>{{ loadError }}</span></div>
|
||||
<el-button :loading="loading" @click="loadMembers">重新加载</el-button>
|
||||
</div>
|
||||
<template v-else>
|
||||
<QueryToolbar v-model="memberFilters" ariaLabel="企业成员筛选" :fields="memberQueryFields" search-text="查询" @search="searchMembers" />
|
||||
|
||||
<div class="client-card member-table-card">
|
||||
<div v-if="auth.hasPermission('company:member:write')" class="table-actions"><el-button type="primary" @click="openCreate"><Plus :size="17" />新增成员</el-button></div>
|
||||
<DataTable v-model:page="memberPage" v-model:page-size="memberPageSize" class="desktop-member-table" :data="pagedMembers" :columns="memberTableColumns" :loading="loading" :total="filteredMembers.length" row-key="id">
|
||||
<template #actions="{ row }"><el-button v-if="auth.hasPermission('company:member:write')" link type="primary" @click="openEdit(row as TenantMember)"><Pencil :size="15" />编辑</el-button><el-button v-if="auth.hasPermission('company:member:reset-password')" link type="primary" @click="resetPassword(row as TenantMember)"><KeyRound :size="15" />重置密码</el-button><el-button v-if="auth.hasPermission('company:member:write') && !(row as TenantMember).isAdministrator" link :type="(row as TenantMember).status === 'ACTIVE' ? 'danger' : 'success'" @click="toggleStatus(row as TenantMember)">{{ (row as TenantMember).status === 'ACTIVE' ? '停用' : '启用' }}</el-button><span v-if="!auth.hasPermission('company:member:write') && !auth.hasPermission('company:member:reset-password')" class="readonly-action">仅查看</span></template>
|
||||
<template #member="{ row }"><div class="member-identity"><span>{{ (row as TenantMember).name.slice(0, 1) }}</span><div><strong>{{ (row as TenantMember).name }}</strong><small>{{ (row as TenantMember).account }}</small></div></div></template>
|
||||
<template #contact="{ row }"><div class="member-contact"><span>{{ (row as TenantMember).phone }}</span><small>{{ (row as TenantMember).email || '-' }}</small></div></template>
|
||||
<template #roles="{ row }"><div class="role-tags"><el-tag v-for="name in store.roleNames((row as TenantMember).roleIds)" :key="name" effect="plain">{{ name }}</el-tag><span v-if="store.roleNames((row as TenantMember).roleIds).length === 0" class="readonly-action">未分配</span></div></template>
|
||||
<template #status="{ row }"><el-tag :type="(row as TenantMember).status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ (row as TenantMember).status === 'ACTIVE' ? '正常' : '已停用' }}</el-tag></template>
|
||||
<template #empty><div class="client-empty">没有匹配的企业成员，请调整筛选条件。</div></template>
|
||||
</DataTable>
|
||||
|
||||
<div v-if="pagedMembers.length" class="mobile-member-list">
|
||||
<article v-for="member in pagedMembers" :key="member.id">
|
||||
<header><div class="member-identity"><span>{{ member.name.slice(0, 1) }}</span><div><strong>{{ member.name }}</strong><small>{{ member.account }}</small></div></div><el-tag :type="member.status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ member.status === 'ACTIVE' ? '正常' : '已停用' }}</el-tag></header>
|
||||
<dl><div><dt>手机</dt><dd>{{ member.phone }}</dd></div><div><dt>最近登录</dt><dd>{{ member.lastLoginAt }}</dd></div><div class="full"><dt>角色</dt><dd>{{ store.roleNames(member.roleIds).join('、') }}</dd></div></dl>
|
||||
<footer><el-button v-if="auth.hasPermission('company:member:write')" link type="primary" @click="openEdit(member)">编辑</el-button><el-button v-if="auth.hasPermission('company:member:reset-password')" link type="primary" @click="resetPassword(member)">重置密码</el-button><el-button v-if="auth.hasPermission('company:member:write') && !member.isAdministrator" link :type="member.status === 'ACTIVE' ? 'danger' : 'success'" @click="toggleStatus(member)">{{ member.status === 'ACTIVE' ? '停用' : '启用' }}</el-button><span v-if="!auth.hasPermission('company:member:write') && !auth.hasPermission('company:member:reset-password')" class="readonly-action">仅查看</span></footer>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div v-if="!pagedMembers.length" class="mobile-member-empty client-empty">没有匹配的企业成员，请调整筛选条件。</div>
|
||||
</div>
|
||||
|
||||
<el-drawer v-model="editorOpen" :title="editingId ? '编辑成员' : '新增成员'" size="min(520px, 94vw)" @closed="resetForm">
|
||||
<el-form ref="formRef" :model="form" :rules="memberRules" label-position="top">
|
||||
<el-form-item label="成员姓名" prop="name" required><el-input v-model="form.name" maxlength="64" placeholder="例如 张三" /></el-form-item>
|
||||
<el-form-item label="登录账号" prop="account" required><el-input v-model="form.account" :disabled="Boolean(editingId)" maxlength="64" placeholder="4–64 位字母、数字或 _ . @ -" /></el-form-item>
|
||||
<el-form-item v-if="!editingId" label="初始密码" prop="password" required><el-input v-model="form.password" type="password" show-password autocomplete="new-password" maxlength="64" placeholder="8–64 位，同时包含字母和数字" /></el-form-item>
|
||||
<div class="member-form-grid"><el-form-item label="联系电话" prop="phone"><el-input v-model="form.phone" maxlength="32" placeholder="例如 13800138000（选填）" /></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" maxlength="128" placeholder="例如 name@example.com（选填）" /></el-form-item></div>
|
||||
<el-form-item label="成员角色" prop="roleIds" required><el-select v-model="form.roleIds" multiple placeholder="请选择角色"><el-option v-for="role in store.roles.filter((item) => item.status === 'ACTIVE')" :key="role.id" :label="role.name" :value="role.id" /></el-select></el-form-item>
|
||||
<div v-if="!editingId" class="member-form-tip"><KeyRound :size="17" /><span>请通过安全渠道将初始密码交给成员；前端不会保存或再次展示该密码。</span></div>
|
||||
</el-form>
|
||||
<template #footer><div class="drawer-actions"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveMember">保存</el-button></div></template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.members-page { display: flex; flex-direction: column; gap: 14px; }
|
||||
.collection-load-error { display: flex; min-height: 150px; align-items: center; justify-content: center; gap: 20px; }
|
||||
.collection-load-error > div { display: flex; max-width: 520px; flex-direction: column; gap: 6px; }
|
||||
.collection-load-error span { color: var(--muted); font-size: 12px; line-height: 1.6; }
|
||||
.member-table-card { padding: 0; overflow: hidden; }
|
||||
.table-actions { display: flex; justify-content: flex-end; padding: 12px 16px; border-bottom: 1px solid var(--border); }
|
||||
.member-identity { display: flex; align-items: center; gap: 10px; }
|
||||
.member-identity > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: #e7f3f1; color: var(--primary); font-weight: 750; }
|
||||
.member-identity > div, .member-contact { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
|
||||
.member-identity strong, .member-identity small, .member-contact small { overflow-wrap: anywhere; }
|
||||
.member-identity small, .member-contact small { color: var(--muted); font-size: 10px; }
|
||||
.role-tags { display: flex; gap: 5px; flex-wrap: wrap; }
|
||||
.mobile-member-list { display: none; }
|
||||
.member-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.member-form-tip { display: flex; gap: 10px; padding: 13px; border: 1px solid #cfe1dc; background: #f2f7f6; color: var(--muted); font-size: 11px; line-height: 1.6; }
|
||||
.member-form-tip svg { flex: 0 0 17px; color: var(--primary); }
|
||||
.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; }
|
||||
.members-page :deep(.el-form-item__error) { line-height: 1.45; overflow-wrap: anywhere; }
|
||||
@media (max-width: 720px) {
|
||||
.member-form-grid { grid-template-columns: 1fr; }
|
||||
.desktop-member-table :deep(.el-table) { display: none; }
|
||||
.mobile-member-list { display: grid; gap: 10px; padding: 10px; }
|
||||
.mobile-member-empty { display: grid; min-height: 150px; place-items: center; }
|
||||
.mobile-member-list article { padding: 14px; border: 1px solid var(--border); background: #fff; }
|
||||
.mobile-member-list header { display: flex; align-items: center; justify-content: space-between; }
|
||||
.mobile-member-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
|
||||
.mobile-member-list dl .full { grid-column: 1 / -1; }
|
||||
.mobile-member-list dt { color: var(--muted); font-size: 10px; }
|
||||
.mobile-member-list dd { margin: 4px 0 0; font-size: 12px; }
|
||||
.mobile-member-list footer { display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
|
||||
.drawer-actions { flex-wrap: wrap; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,170 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { LockKeyhole, RotateCcw, Save, ShieldCheck } from '@lucide/vue'
|
||||
import { TENANT_PERMISSION_GROUPS, useTenantAdministrationStore } from '@/stores/tenantAdministration'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const store = useTenantAdministrationStore()
|
||||
const auth = useAuthStore()
|
||||
const route = useRoute()
|
||||
const initialRoleId = typeof route.query.role === 'string' && store.roles.some((role) => role.id === route.query.role) ? route.query.role : store.roles[0]?.id ?? ''
|
||||
const selectedRoleId = ref(initialRoleId)
|
||||
const selectedCodes = ref<string[]>([])
|
||||
const savedCodes = ref<string[]>([])
|
||||
const loading = ref(false)
|
||||
const loadError = ref('')
|
||||
const saving = ref(false)
|
||||
|
||||
const selectedRole = computed(() => store.roles.find((role) => role.id === selectedRoleId.value))
|
||||
const editable = computed(() => Boolean(auth.hasPermission('company:permission:assign') && selectedRole.value && !selectedRole.value.builtin && selectedRole.value.status === 'ACTIVE'))
|
||||
const hasChanges = computed(() => [...selectedCodes.value].sort().join('|') !== [...savedCodes.value].sort().join('|'))
|
||||
|
||||
function loadRolePermissions() {
|
||||
const codes = selectedRole.value?.permissionCodes ?? []
|
||||
selectedCodes.value = [...codes]
|
||||
savedCodes.value = [...codes]
|
||||
}
|
||||
|
||||
watch(selectedRoleId, loadRolePermissions, { immediate: true })
|
||||
|
||||
async function loadRoles() {
|
||||
loading.value = true
|
||||
loadError.value = ''
|
||||
try {
|
||||
await store.loadRoles()
|
||||
if (!store.roles.some((role) => role.id === selectedRoleId.value)) selectedRoleId.value = store.roles[0]?.id ?? ''
|
||||
loadRolePermissions()
|
||||
} catch (error) {
|
||||
loadError.value = error instanceof Error ? error.message : '角色列表加载失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => void loadRoles())
|
||||
|
||||
function groupCodes(groupKey: string) {
|
||||
return TENANT_PERMISSION_GROUPS.find((group) => group.key === groupKey)?.items.map((item) => item.code) ?? []
|
||||
}
|
||||
|
||||
function groupChecked(groupKey: string) {
|
||||
const codes = groupCodes(groupKey)
|
||||
return codes.length > 0 && codes.every((code) => selectedCodes.value.includes(code))
|
||||
}
|
||||
|
||||
function groupIndeterminate(groupKey: string) {
|
||||
const codes = groupCodes(groupKey)
|
||||
const count = codes.filter((code) => selectedCodes.value.includes(code)).length
|
||||
return count > 0 && count < codes.length
|
||||
}
|
||||
|
||||
function toggleGroup(groupKey: string, checked: boolean) {
|
||||
const codes = groupCodes(groupKey)
|
||||
if (checked) selectedCodes.value = [...new Set([...selectedCodes.value, ...codes])]
|
||||
else selectedCodes.value = selectedCodes.value.filter((code) => !codes.includes(code))
|
||||
}
|
||||
|
||||
function resetPermissions() {
|
||||
selectedCodes.value = [...savedCodes.value]
|
||||
}
|
||||
|
||||
async function savePermissions() {
|
||||
if (!selectedRole.value || !editable.value || saving.value) return
|
||||
if (!selectedCodes.value.includes('account:profile:view')) selectedCodes.value.unshift('account:profile:view')
|
||||
if (!selectedCodes.value.includes('dashboard:view')) selectedCodes.value.unshift('dashboard:view')
|
||||
saving.value = true
|
||||
try {
|
||||
await store.setRolePermissions(selectedRole.value.id, selectedCodes.value)
|
||||
savedCodes.value = [...selectedCodes.value]
|
||||
ElMessage.success('角色菜单及操作权限已保存')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '保存失败')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-loading="loading" class="permissions-page">
|
||||
<div v-if="loadError" class="client-card permission-load-error" role="alert">
|
||||
<div><strong>角色权限加载失败</strong><span>{{ loadError }}</span></div>
|
||||
<el-button :loading="loading" @click="loadRoles">重新加载</el-button>
|
||||
</div>
|
||||
<template v-else-if="store.roles.length">
|
||||
<aside class="client-card role-selector" aria-label="选择角色">
|
||||
<button v-for="role in store.roles" :key="role.id" type="button" :class="{ active: role.id === selectedRoleId }" @click="selectedRoleId = role.id">
|
||||
<span class="role-select-icon"><LockKeyhole v-if="role.builtin" :size="17" /><ShieldCheck v-else :size="17" /></span>
|
||||
<span><strong>{{ role.name }}</strong><small>{{ role.code }}</small></span>
|
||||
<el-tag :type="role.status === 'ACTIVE' ? 'success' : 'info'" effect="plain" size="small">{{ role.status === 'ACTIVE' ? '启用' : '停用' }}</el-tag>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<div class="permission-content">
|
||||
<div class="permission-actions" aria-label="权限操作"><el-button :disabled="!editable || !hasChanges || saving" @click="resetPermissions"><RotateCcw :size="16" />撤销修改</el-button><el-button type="primary" :loading="saving" :disabled="!editable || !hasChanges || saving" @click="savePermissions"><Save :size="16" />保存权限</el-button></div>
|
||||
|
||||
<div v-if="selectedRole?.builtin" class="permission-notice"><LockKeyhole :size="18" /><span>当前角色为系统内置角色，权限由平台统一维护，不允许修改。</span></div>
|
||||
<div v-else-if="selectedRole?.status === 'INACTIVE'" class="permission-notice warning"><span>该角色已停用，请先启用角色后再调整权限。</span></div>
|
||||
<div v-else class="permission-notice"><ShieldCheck :size="18" /><span>保存时会全量替换该角色的权限，请确认所有需要保留的菜单和操作均已勾选。</span></div>
|
||||
|
||||
<div class="permission-groups">
|
||||
<article v-for="group in TENANT_PERMISSION_GROUPS" :key="group.key" class="client-card permission-group" :class="{ 'permission-group--single': group.items.length === 1 }">
|
||||
<header>
|
||||
<el-checkbox :model-value="groupChecked(group.key)" :indeterminate="groupIndeterminate(group.key)" :disabled="!editable" @change="toggleGroup(group.key, Boolean($event))"><strong>{{ group.label }}</strong></el-checkbox>
|
||||
<span>{{ group.items.filter((item) => selectedCodes.includes(item.code)).length }} / {{ group.items.length }}</span>
|
||||
</header>
|
||||
<el-checkbox-group v-model="selectedCodes" :disabled="!editable">
|
||||
<el-checkbox v-for="item in group.items" :key="item.code" :value="item.code" class="permission-item" :class="{ selected: selectedCodes.includes(item.code) }">
|
||||
<span class="permission-copy"><strong>{{ item.label }}</strong><small>{{ item.description }}</small><code>{{ item.code }}</code></span>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="client-card permission-empty">当前企业暂无可用角色，创建角色后才能查看和分配权限。</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.permissions-page { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 14px; }
|
||||
.permission-load-error, .permission-empty { grid-column: 1 / -1; min-height: 170px; }
|
||||
.permission-load-error { display: flex; align-items: center; justify-content: center; gap: 20px; }
|
||||
.permission-load-error > div { display: flex; max-width: 520px; flex-direction: column; gap: 6px; }
|
||||
.permission-load-error span { color: var(--muted); font-size: 12px; line-height: 1.6; }
|
||||
.permission-empty { display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; }
|
||||
.role-selector { position: sticky; top: 84px; padding: 12px; }
|
||||
.role-selector > button { display: flex; width: 100%; min-height: 58px; align-items: center; gap: 9px; margin: 3px 0; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--navy); cursor: pointer; text-align: left; }
|
||||
.role-selector > button:hover, .role-selector > button.active { background: #edf6f4; }
|
||||
.role-selector > button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
|
||||
.role-selector > button.active { color: var(--primary); }
|
||||
.role-select-icon { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; background: #f0f5f4; }
|
||||
.role-selector > button > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
|
||||
.role-selector strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.role-selector small { color: var(--muted); font-size: 9px; }
|
||||
.permission-content { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
|
||||
.permission-actions { display: flex; justify-content: flex-end; gap: 8px; }
|
||||
.permission-notice { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border: 1px solid #cfe1dc; background: #edf6f4; color: #45615d; font-size: 11px; }
|
||||
.permission-notice.warning { border-color: #f1d4a8; background: #fff7ed; color: #9a5a09; }
|
||||
.permission-groups { display: grid; gap: 12px; }
|
||||
.permission-group { padding: 0; overflow: hidden; }
|
||||
.permission-group > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: #fafcfc; }
|
||||
.permission-group > header > span { color: var(--muted); font-size: 11px; }
|
||||
.permission-group :deep(.el-checkbox-group) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.permission-group--single :deep(.el-checkbox-group) { grid-template-columns: minmax(0, 1fr); }
|
||||
.permission-item { display: flex; width: 100%; min-height: 104px; align-items: flex-start; margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--border); cursor: pointer; }
|
||||
.permission-item:nth-child(odd) { border-right: 1px solid var(--border); }
|
||||
.permission-item:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
|
||||
.permission-item.selected { background: #f5faf9; }
|
||||
.permission-item :deep(.el-checkbox__input) { flex: 0 0 auto; margin-top: 3px; }
|
||||
.permission-item :deep(.el-checkbox__label) { display: flex; min-width: 0; flex: 1; padding-left: 10px; white-space: normal; }
|
||||
.permission-copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
|
||||
.permission-copy strong { color: var(--navy); font-size: 13px; line-height: 1.35; }
|
||||
.permission-copy small { color: var(--muted); font-size: 11px; line-height: 1.5; }
|
||||
.permission-copy code { overflow-wrap: anywhere; color: #86939a; font-size: 10px; line-height: 1.35; }
|
||||
@media (max-width: 900px) { .permissions-page { grid-template-columns: 1fr; } .role-selector { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (max-width: 720px) { .permission-actions { width: 100%; } .permission-actions .el-button { flex: 1; } .permission-group :deep(.el-checkbox-group) { grid-template-columns: 1fr; } .permission-item:nth-child(odd) { border-right: 0; } }
|
||||
@media (max-width: 480px) { .role-selector { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
@@ -0,0 +1,190 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
|
||||
import { LockKeyhole, Pencil, Plus, ShieldCheck, Trash2 } from '@lucide/vue'
|
||||
import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
|
||||
import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
|
||||
import { useTenantAdministrationStore, type TenantRole } from '@/stores/tenantAdministration'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const store = useTenantAdministrationStore()
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
const roleFilters = ref({ keyword: '' })
|
||||
const appliedRoleFilters = ref({ ...roleFilters.value })
|
||||
const rolePage = ref(1)
|
||||
const rolePageSize = ref(10)
|
||||
const editorOpen = ref(false)
|
||||
const editingId = ref('')
|
||||
const loading = ref(false)
|
||||
const loadError = ref('')
|
||||
const saving = ref(false)
|
||||
const actionRoleId = ref('')
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive({ name: '', code: '', description: '' })
|
||||
const roleRules: FormRules = {
|
||||
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
|
||||
description: [{ required: true, message: '请填写角色说明', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const roleQueryFields: QueryField[] = [{ key: 'keyword', type: 'input', placeholder: '搜索角色名称、编码或说明' }]
|
||||
const roleTableColumns: DataTableColumn[] = [
|
||||
{ key: 'actions', label: '操作', fixed: 'left', width: 250, slotName: 'actions' },
|
||||
{ key: 'role', label: '角色', minWidth: 180, slotName: 'role' },
|
||||
{ key: 'description', prop: 'description', label: '角色说明', minWidth: 220 },
|
||||
{ key: 'memberCount', label: '成员数', width: 100, slotName: 'memberCount' },
|
||||
{ key: 'permissionCount', label: '权限数', width: 100, slotName: 'permissionCount' },
|
||||
{ key: 'status', label: '状态', width: 90, slotName: 'status' },
|
||||
]
|
||||
const filteredRoles = computed(() => {
|
||||
const key = appliedRoleFilters.value.keyword.trim().toLowerCase()
|
||||
return store.roles.filter((role) => !key || [role.name, role.code, role.description].some((value) => value.toLowerCase().includes(key)))
|
||||
})
|
||||
const pagedRoles = computed(() => filteredRoles.value.slice((rolePage.value - 1) * rolePageSize.value, rolePage.value * rolePageSize.value))
|
||||
|
||||
function resetForm() {
|
||||
editingId.value = ''
|
||||
Object.assign(form, { name: '', code: '', description: '' })
|
||||
void nextTick(() => formRef.value?.clearValidate())
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
resetForm()
|
||||
editorOpen.value = true
|
||||
}
|
||||
|
||||
function openEdit(role: TenantRole) {
|
||||
editingId.value = role.id
|
||||
Object.assign(form, { name: role.name, code: role.code, description: role.description })
|
||||
editorOpen.value = true
|
||||
}
|
||||
|
||||
async function loadRoles() {
|
||||
loading.value = true
|
||||
loadError.value = ''
|
||||
try {
|
||||
const requests = [store.loadRoles()]
|
||||
if (auth.hasPermission('company:member:list')) requests.push(store.loadMembers())
|
||||
await Promise.all(requests)
|
||||
} catch (error) {
|
||||
loadError.value = error instanceof Error ? error.message : '角色与成员统计加载失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => void loadRoles())
|
||||
|
||||
function searchRoles(filters: QueryModel) {
|
||||
appliedRoleFilters.value = { keyword: typeof filters.keyword === 'string' ? filters.keyword : '' }
|
||||
rolePage.value = 1
|
||||
void loadRoles()
|
||||
}
|
||||
|
||||
async function saveRole() {
|
||||
if (saving.value) return
|
||||
form.name = form.name.trim()
|
||||
form.code = form.code.trim().toUpperCase()
|
||||
form.description = form.description.trim()
|
||||
const valid = await formRef.value?.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
saving.value = true
|
||||
try {
|
||||
if (editingId.value) await store.updateRole(editingId.value, { name: form.name, description: form.description })
|
||||
else await store.createRole({ ...form, code: form.code.trim().toUpperCase() })
|
||||
editorOpen.value = false
|
||||
ElMessage.success(editingId.value ? '角色已更新' : '角色已新增')
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '保存失败')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleStatus(role: TenantRole) {
|
||||
const action = role.status === 'ACTIVE' ? '停用' : '启用'
|
||||
try {
|
||||
await ElMessageBox.confirm(`${action}后将影响拥有该角色的成员权限。`, `${action}角色 ${role.name}`, { type: 'warning', confirmButtonText: action, cancelButtonText: '取消' })
|
||||
actionRoleId.value = role.id
|
||||
await store.toggleRoleStatus(role.id)
|
||||
ElMessage.success(`角色已${action}`)
|
||||
} catch (error) {
|
||||
if (error === 'cancel' || error === 'close') return
|
||||
ElMessage.error(error instanceof Error ? error.message : '操作失败')
|
||||
} finally {
|
||||
actionRoleId.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
async function removeRole(role: TenantRole) {
|
||||
try {
|
||||
await ElMessageBox.confirm('删除后不能恢复，仅未被成员使用的自定义角色可以删除。', `删除角色 ${role.name}`, { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' })
|
||||
actionRoleId.value = role.id
|
||||
await store.deleteRole(role.id)
|
||||
ElMessage.success('角色已删除')
|
||||
} catch (error) {
|
||||
if (error === 'cancel' || error === 'close') return
|
||||
ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
||||
} finally {
|
||||
actionRoleId.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function assignPermissions(role: TenantRole) {
|
||||
router.push({ name: 'permissions', query: { role: role.id } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-loading="loading" class="roles-page">
|
||||
<div v-if="loadError" class="client-card collection-load-error" role="alert">
|
||||
<div><strong>企业角色加载失败</strong><span>{{ loadError }}</span></div>
|
||||
<el-button :loading="loading" @click="loadRoles">重新加载</el-button>
|
||||
</div>
|
||||
<template v-else>
|
||||
<QueryToolbar v-model="roleFilters" ariaLabel="企业角色筛选" :fields="roleQueryFields" search-text="查询" @search="searchRoles" />
|
||||
|
||||
<div class="client-card role-table-card">
|
||||
<div v-if="auth.hasPermission('company:role:write')" class="table-actions"><el-button type="primary" @click="openCreate"><Plus :size="17" />新增角色</el-button></div>
|
||||
<DataTable v-model:page="rolePage" v-model:page-size="rolePageSize" :data="pagedRoles" :columns="roleTableColumns" :loading="loading" :total="filteredRoles.length" row-key="id">
|
||||
<template #actions="{ row }"><el-button v-if="auth.hasPermission('company:permission:list')" link type="primary" :disabled="actionRoleId === (row as TenantRole).id" @click="assignPermissions(row as TenantRole)">{{ auth.hasPermission('company:permission:assign') && !(row as TenantRole).builtin ? '分配权限' : '查看权限' }}</el-button><el-button v-if="auth.hasPermission('company:role:write') && !(row as TenantRole).builtin" link type="primary" :disabled="actionRoleId === (row as TenantRole).id" @click="openEdit(row as TenantRole)"><Pencil :size="15" />编辑</el-button><el-button v-if="auth.hasPermission('company:role:write') && !(row as TenantRole).builtin" link :type="(row as TenantRole).status === 'ACTIVE' ? 'warning' : 'success'" :loading="actionRoleId === (row as TenantRole).id" @click="toggleStatus(row as TenantRole)">{{ (row as TenantRole).status === 'ACTIVE' ? '停用' : '启用' }}</el-button><el-button v-if="auth.hasPermission('company:role:write') && !(row as TenantRole).builtin" link type="danger" :disabled="actionRoleId === (row as TenantRole).id" @click="removeRole(row as TenantRole)"><Trash2 :size="15" />删除</el-button></template>
|
||||
<template #role="{ row }"><div class="role-identity"><span class="role-icon"><LockKeyhole v-if="(row as TenantRole).builtin" :size="20" /><ShieldCheck v-else :size="20" /></span><div><strong>{{ (row as TenantRole).name }}</strong><code>{{ (row as TenantRole).code }}</code></div></div></template>
|
||||
<template #memberCount="{ row }"><span>{{ store.roleMemberCount((row as TenantRole).id) }}</span></template>
|
||||
<template #permissionCount="{ row }"><span>{{ (row as TenantRole).permissionCodes.length }}</span></template>
|
||||
<template #status="{ row }"><el-tag v-if="(row as TenantRole).builtin" effect="plain">内置</el-tag><el-tag :type="(row as TenantRole).status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ (row as TenantRole).status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></template>
|
||||
<template #empty><div class="client-empty">没有匹配的企业角色。</div></template>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<el-drawer v-model="editorOpen" :title="editingId ? '编辑角色' : '新增角色'" size="min(500px, 94vw)" @closed="resetForm">
|
||||
<el-form ref="formRef" :model="form" :rules="roleRules" label-position="top">
|
||||
<el-form-item label="角色名称" prop="name" required><el-input v-model="form.name" maxlength="30" placeholder="例如 订单操作员" /></el-form-item>
|
||||
<el-form-item label="角色编码" prop="code" required><el-input v-model="form.code" :disabled="Boolean(editingId)" placeholder="例如 ORDER_OPERATOR" maxlength="40" /></el-form-item>
|
||||
<el-form-item label="角色说明" prop="description" required><el-input v-model="form.description" type="textarea" :rows="4" maxlength="200" show-word-limit placeholder="简要说明该角色的职责和适用范围" /></el-form-item>
|
||||
<div class="role-form-tip">保存后请前往“菜单权限”为角色分配可见菜单和操作权限。</div>
|
||||
</el-form>
|
||||
<template #footer><div class="drawer-actions"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveRole">保存</el-button></div></template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.roles-page { display: flex; flex-direction: column; gap: 14px; }
|
||||
.collection-load-error { display: flex; min-height: 150px; align-items: center; justify-content: center; gap: 20px; }
|
||||
.collection-load-error > div { display: flex; max-width: 520px; flex-direction: column; gap: 6px; }
|
||||
.collection-load-error span { color: var(--muted); font-size: 12px; line-height: 1.6; }
|
||||
.role-table-card { padding: 0; overflow: hidden; }
|
||||
.table-actions { display: flex; justify-content: flex-end; padding: 12px 16px; border-bottom: 1px solid var(--border); }
|
||||
.role-identity { display: flex; min-width: 0; align-items: center; gap: 10px; }
|
||||
.role-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; background: #e7f3f1; color: var(--primary); }
|
||||
.role-identity > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
|
||||
.role-identity strong { overflow-wrap: anywhere; }
|
||||
.role-identity code { color: var(--muted); font-size: 10px; }
|
||||
.role-form-tip { padding: 12px; background: #f2f7f6; color: var(--muted); font-size: 11px; }
|
||||
.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; }
|
||||
.roles-page :deep(.el-form-item__error) { line-height: 1.45; overflow-wrap: anywhere; }
|
||||
@media (max-width: 600px) { .drawer-actions { flex-wrap: wrap; } }
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import fs from 'node:fs'
|
||||
import test from 'node:test'
|
||||
|
||||
const routerSource = fs.readFileSync(new URL('../router/index.ts', import.meta.url), 'utf8')
|
||||
const profileSource = fs.readFileSync(new URL('./CompanyProfileView.vue', import.meta.url), 'utf8')
|
||||
const membersSource = fs.readFileSync(new URL('./MembersView.vue', import.meta.url), 'utf8')
|
||||
const rolesSource = fs.readFileSync(new URL('./RolesView.vue', import.meta.url), 'utf8')
|
||||
const permissionsSource = fs.readFileSync(new URL('./PermissionsView.vue', import.meta.url), 'utf8')
|
||||
const storeSource = fs.readFileSync(new URL('../stores/tenantAdministration.ts', import.meta.url), 'utf8')
|
||||
|
||||
test('routes tenant administration modules to implemented views instead of the placeholder', () => {
|
||||
assert.match(routerSource, /company\/profile'.*CompanyProfileView\.vue/)
|
||||
assert.match(routerSource, /organization\/members'.*MembersView\.vue/)
|
||||
assert.match(routerSource, /organization\/roles'.*RolesView\.vue/)
|
||||
assert.match(routerSource, /organization\/permissions'.*PermissionsView\.vue/)
|
||||
assert.doesNotMatch(routerSource, /ModuleView\.vue/)
|
||||
})
|
||||
|
||||
test('implements company details, contact information and qualification workflow', () => {
|
||||
assert.match(profileSource, /企业基本信息/)
|
||||
assert.match(profileSource, /联系信息/)
|
||||
assert.match(profileSource, /资质文件/)
|
||||
assert.match(profileSource, /async function saveProfile\(\)/)
|
||||
assert.match(profileSource, /function submitQualification\(\)/)
|
||||
assert.match(profileSource, /validateQualificationFile/)
|
||||
assert.match(profileSource, /function removeSelectedFile\(\)/)
|
||||
assert.match(profileSource, /qualificationSubmitting/)
|
||||
assert.match(profileSource, /class="mobile-qualification-list"/)
|
||||
assert.match(profileSource, /import DataTable, \{ type DataTableColumn \} from '@\/components\/common\/DataTable\.vue'/)
|
||||
assert.match(profileSource, /const qualificationColumns: DataTableColumn\[\]/)
|
||||
assert.match(profileSource, /slotName: 'actions'/)
|
||||
assert.match(profileSource, /<DataTable[\s\S]*v-model:page="qualificationPage"[\s\S]*v-model:page-size="qualificationPageSize"[\s\S]*:columns="qualificationColumns"/)
|
||||
assert.doesNotMatch(profileSource, /<el-table class="desktop-qualification-table"/)
|
||||
assert.doesNotMatch(profileSource, /class="profile-summary-card"/)
|
||||
assert.match(profileSource, /class="info-panel-header"[\s\S]*auth\.hasPermission\('company:profile:edit'\)/)
|
||||
assert.match(profileSource, /ref="profileFormRef" :model="draft" :rules="profileFormRules"/)
|
||||
assert.match(profileSource, /prop="companyName" required><el-input v-model="draft\.companyName" placeholder="请输入公司名称"/)
|
||||
assert.match(profileSource, /prop="fileName" required :error="qualificationFileError"/)
|
||||
assert.match(profileSource, /const valid = await profileFormRef\.value\?\.validate\(\)/)
|
||||
assert.match(profileSource, /qualificationFileError\.value = '请选择营业执照图片'/)
|
||||
assert.match(profileSource, /const canUploadQualification = computed/)
|
||||
assert.match(profileSource, /:disabled="!canUploadQualification"/)
|
||||
assert.match(profileSource, /error\.code === 'A0409'/)
|
||||
assert.match(profileSource, /downloadQualificationImage/)
|
||||
assert.match(profileSource, /当前资质文件尚未迁移到安全预览地址/)
|
||||
assert.match(profileSource, /previewError/)
|
||||
assert.match(profileSource, /URL\.createObjectURL/)
|
||||
assert.match(profileSource, /URL\.revokeObjectURL/)
|
||||
assert.match(profileSource, /企业资料加载失败/)
|
||||
assert.match(profileSource, /@click="loadCompanyContext"/)
|
||||
assert.doesNotMatch(profileSource, /企业类型|注册资本|contactWechat|businessAddress/)
|
||||
})
|
||||
|
||||
test('implements member list, role assignment, password reset and status control', () => {
|
||||
assert.match(membersSource, /async function saveMember\(\)/)
|
||||
assert.match(membersSource, /function resetPassword\(member: TenantMember\)/)
|
||||
assert.match(membersSource, /function toggleStatus\(member: TenantMember\)/)
|
||||
assert.match(membersSource, /v-model="form\.roleIds" multiple/)
|
||||
assert.match(membersSource, /class="mobile-member-list"/)
|
||||
assert.match(membersSource, /store\.loadMembers\(\)/)
|
||||
assert.match(membersSource, /await store\.resetMemberPassword/)
|
||||
assert.match(membersSource, /await store\.toggleMemberStatus/)
|
||||
assert.match(membersSource, /v-model="form\.password"/)
|
||||
assert.match(membersSource, /企业成员加载失败/)
|
||||
assert.match(membersSource, /@click="loadMembers"/)
|
||||
assert.match(membersSource, /const memberRules: FormRules/)
|
||||
assert.match(membersSource, /ref="formRef" :model="form" :rules="memberRules"/)
|
||||
assert.match(membersSource, /prop="roleIds" required/)
|
||||
assert.match(membersSource, /await formRef\.value\?\.validate\(\)/)
|
||||
assert.match(membersSource, /import QueryToolbar.*QueryToolbar\.vue/)
|
||||
assert.match(membersSource, /import DataTable.*DataTable\.vue/)
|
||||
assert.match(membersSource, /<QueryToolbar v-model="memberFilters"/)
|
||||
assert.match(membersSource, /<DataTable v-model:page="memberPage" v-model:page-size="memberPageSize"/)
|
||||
assert.match(membersSource, /fixed: 'left'/)
|
||||
assert.match(membersSource, /class="table-actions"/)
|
||||
assert.doesNotMatch(membersSource, /template #actions><el-button v-if="auth\.hasPermission\('company:member:write'\)/)
|
||||
assert.doesNotMatch(membersSource, /member-metrics/)
|
||||
})
|
||||
|
||||
test('protects built-in roles and exposes role permission assignment', () => {
|
||||
assert.match(rolesSource, /auth\.hasPermission\('company:role:write'\).*\.builtin/)
|
||||
assert.match(rolesSource, /function assignPermissions\(role: TenantRole\)/)
|
||||
assert.match(storeSource, /if \(role\.builtin\) throw new Error\('内置角色不能删除'\)/)
|
||||
assert.match(storeSource, /if \(members\.value\.some\(\(member\) => member\.roleIds\.includes\(id\)\)\)/)
|
||||
assert.match(rolesSource, /store\.loadRoles\(\)/)
|
||||
assert.match(rolesSource, /auth\.hasPermission\('company:member:list'\).*store\.loadMembers\(\)/)
|
||||
assert.match(rolesSource, /await Promise\.all\(requests\)/)
|
||||
assert.match(rolesSource, /await store\.createRole/)
|
||||
assert.match(rolesSource, /await store\.updateRole/)
|
||||
assert.match(rolesSource, /await store\.toggleRoleStatus/)
|
||||
assert.match(rolesSource, /await store\.deleteRole/)
|
||||
assert.match(rolesSource, /企业角色加载失败/)
|
||||
assert.match(rolesSource, /@click="loadRoles"/)
|
||||
assert.match(rolesSource, /const roleRules: FormRules/)
|
||||
assert.match(rolesSource, /ref="formRef" :model="form" :rules="roleRules"/)
|
||||
assert.match(rolesSource, /placeholder="例如 订单操作员"/)
|
||||
assert.match(rolesSource, /import QueryToolbar.*QueryToolbar\.vue/)
|
||||
assert.match(rolesSource, /import DataTable.*DataTable\.vue/)
|
||||
assert.match(rolesSource, /<QueryToolbar v-model="roleFilters"/)
|
||||
assert.match(rolesSource, /<DataTable v-model:page="rolePage" v-model:page-size="rolePageSize"/)
|
||||
assert.match(rolesSource, /fixed: 'left'/)
|
||||
assert.match(rolesSource, /class="table-actions"/)
|
||||
assert.doesNotMatch(rolesSource, /template #actions><el-button v-if="auth\.hasPermission\('company:role:write'\)/)
|
||||
assert.doesNotMatch(rolesSource, /role-guidance/)
|
||||
})
|
||||
|
||||
test('shows company audit status and applies button permissions', () => {
|
||||
assert.match(profileSource, /companyApproved/)
|
||||
assert.match(profileSource, /企业资料正在等待平台审核/)
|
||||
assert.match(profileSource, /auth\.hasPermission\('company:profile:edit'\)/)
|
||||
assert.match(membersSource, /auth\.hasPermission\('company:member:write'\)/)
|
||||
assert.match(permissionsSource, /auth\.hasPermission\('company:permission:assign'\)/)
|
||||
assert.match(storeSource, /auditStatus: 'PROFILE_REQUIRED'/)
|
||||
assert.match(storeSource, /loadCompanyContext/)
|
||||
})
|
||||
|
||||
test('implements grouped menu and action permission editing', () => {
|
||||
assert.match(permissionsSource, /TENANT_PERMISSION_GROUPS/)
|
||||
assert.match(permissionsSource, /function toggleGroup\(groupKey: string, checked: boolean\)/)
|
||||
assert.match(permissionsSource, /function savePermissions\(\)/)
|
||||
assert.match(permissionsSource, /系统内置角色，权限由平台统一维护，不允许修改/)
|
||||
assert.match(permissionsSource, /全量替换/)
|
||||
assert.match(permissionsSource, /await store\.setRolePermissions/)
|
||||
assert.match(permissionsSource, /角色权限加载失败/)
|
||||
assert.match(permissionsSource, /当前企业暂无可用角色/)
|
||||
assert.match(permissionsSource, /const saving = ref\(false\)/)
|
||||
assert.match(permissionsSource, /:loading="saving"/)
|
||||
assert.match(permissionsSource, /button:focus-visible/)
|
||||
assert.match(permissionsSource, /class="permission-actions" aria-label="权限操作"/)
|
||||
assert.match(permissionsSource, /<el-checkbox v-for="item in group\.items"[^>]*class="permission-item"/)
|
||||
assert.doesNotMatch(permissionsSource, /<label v-for="item in group\.items"/)
|
||||
assert.match(permissionsSource, /permission-group--single/)
|
||||
assert.match(permissionsSource, /\.permission-item:last-child:nth-child\(odd\) \{ grid-column: 1 \/ -1; border-right: 0; \}/)
|
||||
assert.match(permissionsSource, /\.permission-item :deep\(\.el-checkbox__label\) \{[^}]*white-space: normal/)
|
||||
assert.match(permissionsSource, /\.permission-copy \{[^}]*flex-direction: column[^}]*gap: 5px/)
|
||||
assert.doesNotMatch(permissionsSource, /permission-heading/)
|
||||
assert.doesNotMatch(permissionsSource, /section-label/)
|
||||
assert.doesNotMatch(permissionsSource, /当前只读展示权限资源/)
|
||||
})
|
||||
|
||||
test('keeps tenant administration state scoped to the client store', () => {
|
||||
assert.match(storeSource, /defineStore\('tenant-administration'/)
|
||||
assert.match(storeSource, /function createMember/)
|
||||
assert.match(storeSource, /function createRole/)
|
||||
assert.match(storeSource, /function setRolePermissions/)
|
||||
assert.doesNotMatch(storeSource, /tenantId\s*:/)
|
||||
})
|
||||
Reference in New Issue
Block a user