42 lines
2.5 KiB
Vue
42 lines
2.5 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:14px}.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:4px;border:1px solid #d9e2ec;border-radius:8px;background:#f4f7fa}.order-mode-switch button{display:inline-flex;height:38px;align-items:center;gap:8px;padding:0 20px;border:0;border-radius:6px;background:transparent;color:#607087;font:inherit;font-size:13px;font-weight:650;cursor:pointer}.order-mode-switch button.active{background:var(--primary);color:#fff;box-shadow:0 2px 6px rgba(23,107,135,.2)}.order-mode-switch button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
|
||
</style>
|