42 lines
2.6 KiB
Vue
42 lines
2.6 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { computed } from 'vue'
|
|||
|
|
import { FilePenLine, Zap } from '@lucide/vue'
|
|||
|
|
import { useRoute, useRouter } from 'vue-router'
|
|||
|
|
import { useAuthStore } from '@/modules/auth/public'
|
|||
|
|
import FirstLegOrdersView from './FirstLegOrdersView.vue'
|
|||
|
|
import QuickOrderView from './QuickOrderView.vue'
|
|||
|
|
|
|||
|
|
const route = useRoute()
|
|||
|
|
const router = useRouter()
|
|||
|
|
const auth = useAuthStore()
|
|||
|
|
const canQuickOrder = computed(() => auth.hasPermission('order:first-leg:quick-create'))
|
|||
|
|
const activeMode = computed<'standard' | 'quick'>(() => route.query.mode === 'quick' && canQuickOrder.value ? 'quick' : 'standard')
|
|||
|
|
|
|||
|
|
function selectMode(mode: 'standard' | 'quick') {
|
|||
|
|
if (mode === 'quick' && !canQuickOrder.value) return
|
|||
|
|
const query = { ...route.query }
|
|||
|
|
if (mode === 'quick') query.mode = 'quick'
|
|||
|
|
else delete query.mode
|
|||
|
|
void router.replace({ name: 'first-leg-order-create', query })
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<section class="first-leg-create-hub">
|
|||
|
|
<header class="create-hub-heading">
|
|||
|
|
<h1>头程下单</h1>
|
|||
|
|
<p>填写货物信息，创建新的头程运输订单</p>
|
|||
|
|
</header>
|
|||
|
|
<nav v-if="canQuickOrder" class="order-mode-switch" aria-label="头程下单方式">
|
|||
|
|
<button type="button" :class="{ active: activeMode === 'standard' }" :aria-current="activeMode === 'standard' ? 'page' : undefined" @click="selectMode('standard')"><FilePenLine :size="18" />普通下单</button>
|
|||
|
|
<button type="button" :class="{ active: activeMode === 'quick' }" :aria-current="activeMode === 'quick' ? 'page' : undefined" @click="selectMode('quick')"><Zap :size="18" />快速下单</button>
|
|||
|
|
</nav>
|
|||
|
|
<FirstLegOrdersView v-if="activeMode === 'standard'" create-page />
|
|||
|
|
<QuickOrderView v-else />
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.first-leg-create-hub{display:grid;min-width:0;gap:12px}.create-hub-heading{display:grid;gap:5px}.create-hub-heading h1{margin:0;color:var(--navy);font-size:24px;line-height:1.25}.create-hub-heading p{margin:0;color:var(--muted);font-size:13px}.order-mode-switch{display:inline-flex;width:max-content;padding:5px;border:1px solid #dbe4f1;border-radius:12px;background:#fff;box-shadow:0 8px 20px rgba(26,43,75,.06)}.order-mode-switch button{display:inline-flex;height:38px;align-items:center;gap:8px;padding:0 20px;border:0;border-radius:8px;background:transparent;color:#607087;font:inherit;font-size:13px;font-weight:650;cursor:pointer}.order-mode-switch button.active{background:linear-gradient(135deg,#4f73ee,#8a56dc);color:#fff;box-shadow:0 6px 14px rgba(79,115,238,.22)}.order-mode-switch button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
|
|||
|
|
</style>
|