42 lines
2.7 KiB
Vue
42 lines
2.7 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">
|
|
<h1 class="create-hub-title">头程下单</h1>
|
|
<div class="create-mode-toolbar">
|
|
<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="16" />普通下单</button>
|
|
<button type="button" :class="{ active: activeMode === 'quick' }" :aria-current="activeMode === 'quick' ? 'page' : undefined" @click="selectMode('quick')"><Zap :size="16" />快速下单</button>
|
|
</nav>
|
|
<span v-if="canQuickOrder" class="create-mode-caption">选择下单方式</span>
|
|
</div>
|
|
<FirstLegOrdersView v-if="activeMode === 'standard'" create-page />
|
|
<QuickOrderView v-else />
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.first-leg-create-hub{display:grid;min-width:0;gap:10px}.create-hub-title{margin:0;color:var(--navy);font-size:22px;line-height:1.25}.create-mode-toolbar{display:flex;min-width:0;align-items:center;gap:12px}.create-mode-caption{color:#94a0af;font-size:12px;font-weight:500}.order-mode-switch{display:inline-flex;width:max-content;padding:4px;border:1px solid #d5e0e7;border-radius:8px;background:#edf3f6;box-shadow:inset 0 1px 2px rgba(15,23,42,.035)}.order-mode-switch button{display:inline-flex;height:36px;min-width:112px;align-items:center;justify-content:center;gap:7px;padding:0 16px;border:0;border-radius:6px;background:transparent;color:#607087;font:inherit;font-size:12px;font-weight:650;cursor:pointer}.order-mode-switch button.active{background:linear-gradient(105deg,#118fa1,#176b87);color:#fff;box-shadow:0 5px 13px rgba(23,107,135,.24)}.order-mode-switch button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
|
|
</style>
|