WIN-JHFT4D3SIVT\caoxiaozhu
7d6dbc4ac0
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
815 lines
25 KiB
Vue
815 lines
25 KiB
Vue
<template>
|
||
<section class="travel-page">
|
||
<div class="travel-kpis">
|
||
<article v-for="item in kpis" :key="item.label" class="travel-kpi panel" :style="{ '--accent': item.accent }">
|
||
<span class="kpi-icon"><i :class="item.icon"></i></span>
|
||
<div>
|
||
<p>{{ item.label }}</p>
|
||
<strong>{{ item.value }} <small>单</small></strong>
|
||
<span :class="item.trend">较上月 {{ item.delta }} <i :class="item.arrow"></i></span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<article class="travel-list panel">
|
||
<header class="list-head">
|
||
<h2>我的差旅报销单</h2>
|
||
</header>
|
||
|
||
<nav class="status-tabs" aria-label="差旅报销状态">
|
||
<button
|
||
v-for="tab in tabs"
|
||
:key="tab"
|
||
type="button"
|
||
:class="{ active: activeTab === tab }"
|
||
@click="activeTab = tab"
|
||
>
|
||
{{ tab }}
|
||
</button>
|
||
</nav>
|
||
|
||
<div class="list-toolbar">
|
||
<div class="filter-set">
|
||
<div class="list-search">
|
||
<i class="mdi mdi-magnify"></i>
|
||
<input type="search" placeholder="搜索申请人、单号、费用类型..." />
|
||
</div>
|
||
|
||
<div class="date-range-filter" :class="{ open: datePopover }">
|
||
<button class="filter-btn date-range-trigger" type="button" @click="datePopover = !datePopover">
|
||
<span class="date-range-label">{{ dateRangeLabel }}</span>
|
||
<i class="mdi mdi-calendar"></i>
|
||
</button>
|
||
<div v-if="datePopover" class="date-range-popover" role="dialog" aria-label="选择时间段">
|
||
<header>
|
||
<strong>选择时间段</strong>
|
||
<button type="button" aria-label="关闭" @click="datePopover = false"><i class="mdi mdi-close"></i></button>
|
||
</header>
|
||
<div class="date-range-fields">
|
||
<label>
|
||
<span>开始日期</span>
|
||
<input v-model="rangeStart" type="date" />
|
||
</label>
|
||
<label>
|
||
<span>结束日期</span>
|
||
<input v-model="rangeEnd" type="date" />
|
||
</label>
|
||
</div>
|
||
<footer>
|
||
<button class="ghost-btn" type="button" @click="datePopover = false">取消</button>
|
||
<button class="apply-btn" type="button" :disabled="!rangeStart || !rangeEnd" @click="applyDateRange">应用</button>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
|
||
<button v-for="filter in filters" :key="filter" type="button" class="filter-btn">
|
||
<span>{{ filter }}</span>
|
||
<i class="mdi mdi-chevron-down"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="toolbar-actions">
|
||
<button class="export-btn" type="button">
|
||
<i class="mdi mdi-upload"></i>
|
||
<span>导出</span>
|
||
</button>
|
||
<button class="create-btn" type="button" @click="emit('createRequest')">
|
||
<i class="mdi mdi-plus"></i>
|
||
<span>发起报销</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="hint"><i class="mdi mdi-information-outline"></i> 点击任意行可查看单据详情</p>
|
||
|
||
<div class="table-wrap">
|
||
<table>
|
||
<colgroup>
|
||
<col class="col-id">
|
||
<col class="col-reason">
|
||
<col class="col-city">
|
||
<col class="col-period">
|
||
<col class="col-apply">
|
||
<col class="col-amount">
|
||
<col class="col-node">
|
||
<col class="col-approval">
|
||
<col class="col-travel">
|
||
<col class="col-actions">
|
||
</colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th>单号</th>
|
||
<th>出差事由</th>
|
||
<th>出差城市</th>
|
||
<th>出差时间</th>
|
||
<th>申请时间</th>
|
||
<th>申请金额</th>
|
||
<th>当前节点</th>
|
||
<th>审批状态</th>
|
||
<th>商旅状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="row in visibleRows" :key="row.id" @click="emit('ask', row)">
|
||
<td><strong class="doc-id">{{ row.id }}</strong></td>
|
||
<td>{{ row.reason }}</td>
|
||
<td>{{ row.city }}</td>
|
||
<td>{{ row.period }}</td>
|
||
<td>{{ row.applyTime }}</td>
|
||
<td>{{ row.amount }}</td>
|
||
<td>{{ row.node }}</td>
|
||
<td><span class="status-tag" :class="row.approvalTone">{{ row.approval }}</span></td>
|
||
<td><span class="status-tag" :class="row.travelTone">{{ row.travel }}</span></td>
|
||
<td>
|
||
<div class="row-actions">
|
||
<button type="button" @click.stop="emit('ask', row)">查看</button>
|
||
<button type="button" aria-label="更多操作" @click.stop>
|
||
<i class="mdi mdi-dots-horizontal"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<footer class="list-foot">
|
||
<span class="page-summary">共 {{ totalCount }} 条，目前第 {{ currentPage }} 页</span>
|
||
<div class="pager" aria-label="分页">
|
||
<button class="page-nav" type="button" :disabled="currentPage === 1" aria-label="上一页" @click="currentPage--"><i class="mdi mdi-chevron-left"></i></button>
|
||
<button v-for="p in totalPages" :key="p" class="page-number" :class="{ active: currentPage === p }" type="button" :aria-current="currentPage === p ? 'page' : undefined" @click="currentPage = p">{{ p }}</button>
|
||
<button class="page-nav" type="button" :disabled="currentPage === totalPages" aria-label="下一页" @click="currentPage++"><i class="mdi mdi-chevron-right"></i></button>
|
||
</div>
|
||
<button class="page-size" type="button">{{ pageSize }} 条/页 <i class="mdi mdi-chevron-down"></i></button>
|
||
</footer>
|
||
</article>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, ref, watch } from 'vue'
|
||
|
||
defineProps({
|
||
filteredRequests: { type: Array, required: true }
|
||
})
|
||
|
||
const emit = defineEmits(['ask', 'approve', 'reject', 'createRequest'])
|
||
|
||
const activeTab = ref('全部')
|
||
const tabs = ['全部', '待提交', '审批中', '待出行', '已完成']
|
||
const filters = ['报销状态', '出差城市', '费用类型']
|
||
|
||
const datePopover = ref(false)
|
||
const rangeStart = ref('')
|
||
const rangeEnd = ref('')
|
||
const appliedStart = ref('')
|
||
const appliedEnd = ref('')
|
||
|
||
const dateRangeLabel = computed(() => {
|
||
if (appliedStart.value && appliedEnd.value) return `${appliedStart.value} ~ ${appliedEnd.value}`
|
||
return '选择时间段'
|
||
})
|
||
|
||
function applyDateRange() {
|
||
if (!rangeStart.value || !rangeEnd.value) return
|
||
appliedStart.value = rangeStart.value
|
||
appliedEnd.value = rangeEnd.value
|
||
datePopover.value = false
|
||
}
|
||
|
||
const kpis = [
|
||
{ label: '全部单据', value: 30, delta: '+8', trend: 'up good', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-clipboard-text-outline', accent: '#10b981' },
|
||
{ label: '待提交', value: 5, delta: '-1', trend: 'down good', arrow: 'mdi mdi-arrow-down', icon: 'mdi mdi-send', accent: '#f59e0b' },
|
||
{ label: '审批中', value: 8, delta: '+2', trend: 'up bad', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-clock-outline', accent: '#3b82f6' },
|
||
{ label: '已完成', value: 17, delta: '+7', trend: 'up good', arrow: 'mdi mdi-arrow-up', icon: 'mdi mdi-check', accent: '#10b981' }
|
||
]
|
||
|
||
const rows = [
|
||
{ id: 'BR240715001', reason: '华东区域客户拜访', city: '上海、苏州、杭州', period: '07-14~07-17 (4天)', applyTime: '2024-07-13', amount: '￥4,280.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '待预订酒店', travelTone: 'warning' },
|
||
{ id: 'BR240714010', reason: '年度战略合作伙伴会议', city: '北京', period: '07-15~07-16 (2天)', applyTime: '2024-07-12', amount: '￥1,860.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '待订机票', travelTone: 'warning' },
|
||
{ id: 'BR240713008', reason: '产品培训与交流', city: '深圳', period: '07-10~07-12 (3天)', applyTime: '2024-07-09', amount: '￥2,150.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240712001', reason: '客户方案汇报', city: '上海', period: '07-08~07-11 (4天)', applyTime: '2024-07-07', amount: '￥3,680.00', node: '财务审核', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240711005', reason: '华南区域市场调研', city: '广州、佛山', period: '07-09~07-11 (3天)', applyTime: '2024-07-06', amount: '￥1,920.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '无需预订', travelTone: 'neutral' },
|
||
{ id: 'BR240710003', reason: '供应商现场考察', city: '东莞', period: '07-06~07-07 (2天)', applyTime: '2024-07-05', amount: '￥680.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240709005', reason: '客户方案汇报', city: '北京', period: '07-06~07-08 (3天)', applyTime: '2024-07-05', amount: '￥1,980.00', node: '财务审核', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240708012', reason: '供应商现场考察', city: '广州', period: '07-04~07-05 (2天)', applyTime: '2024-07-03', amount: '￥860.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '无需预订', travelTone: 'neutral' },
|
||
{ id: 'BR240707003', reason: '项目启动会', city: '成都', period: '07-01~07-03 (3天)', applyTime: '2024-06-29', amount: '￥2,420.00', node: '财务审核', approval: '审批中', approvalTone: 'info', travel: '待预订酒店', travelTone: 'warning' },
|
||
{ id: 'BR240706009', reason: '客户拜访与市场调研', city: '南京、合肥', period: '06-28~06-30 (3天)', applyTime: '2024-06-26', amount: '￥1,750.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240705007', reason: '技术交流会', city: '武汉', period: '06-25~06-26 (2天)', applyTime: '2024-06-23', amount: '￥1,120.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '无需预订', travelTone: 'neutral' },
|
||
{ id: 'BR240704004', reason: '渠道合作洽谈', city: '西安', period: '06-20~06-21 (2天)', applyTime: '2024-06-18', amount: '￥780.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240703011', reason: '新员工入职培训', city: '长沙', period: '06-18~06-19 (2天)', applyTime: '2024-06-16', amount: '￥920.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240702006', reason: '季度业绩复盘会', city: '杭州', period: '06-15~06-16 (2天)', applyTime: '2024-06-13', amount: '￥1,350.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240701002', reason: '智慧金融峰会参展', city: '上海', period: '06-12~06-14 (3天)', applyTime: '2024-06-10', amount: '￥5,680.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240630009', reason: '西南区域渠道拓展', city: '重庆、贵阳', period: '06-10~06-13 (4天)', applyTime: '2024-06-08', amount: '￥3,450.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240629003', reason: '信息安全合规审计', city: '深圳', period: '06-08~06-09 (2天)', applyTime: '2024-06-06', amount: '￥1,180.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '无需预订', travelTone: 'neutral' },
|
||
{ id: 'BR240628007', reason: '产学研合作对接', city: '南京', period: '06-05~06-07 (3天)', applyTime: '2024-06-03', amount: '￥2,260.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240627001', reason: 'ERP系统上线支持', city: '青岛', period: '06-03~06-05 (3天)', applyTime: '2024-06-01', amount: '￥1,960.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240626004', reason: '大客户续约洽谈', city: '天津', period: '06-01~06-02 (2天)', applyTime: '2024-05-29', amount: '￥890.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240625010', reason: '区域销售团队建设', city: '厦门', period: '05-28~05-30 (3天)', applyTime: '2024-05-26', amount: '￥2,780.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240624002', reason: '供应链管理系统演示', city: '苏州', period: '05-25~05-26 (2天)', applyTime: '2024-05-23', amount: '￥650.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '无需预订', travelTone: 'neutral' },
|
||
{ id: 'BR240623008', reason: '行业白皮书发布会', city: '北京', period: '05-22~05-23 (2天)', applyTime: '2024-05-20', amount: '￥1,560.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '待订机票', travelTone: 'warning' },
|
||
{ id: 'BR240622005', reason: '跨部门协同工作坊', city: '大连', period: '05-20~05-22 (3天)', applyTime: '2024-05-18', amount: '￥2,340.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '无需预订', travelTone: 'neutral' },
|
||
{ id: 'BR240621003', reason: '数字化转型的客户交流', city: '深圳、珠海', period: '05-16~05-18 (3天)', applyTime: '2024-05-14', amount: '￥3,120.00', node: '待提交', approval: '待提交', approvalTone: 'info', travel: '待预订酒店', travelTone: 'warning' },
|
||
{ id: 'BR240620006', reason: '年中预算评审会', city: '上海', period: '05-13~05-14 (2天)', applyTime: '2024-05-11', amount: '￥1,480.00', node: '财务审核', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240619001', reason: '医疗行业解决方案展', city: '成都', period: '05-10~05-12 (3天)', applyTime: '2024-05-08', amount: '￥3,860.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240618009', reason: '东北区域客户回访', city: '沈阳、长春', period: '05-06~05-09 (4天)', applyTime: '2024-05-04', amount: '￥4,520.00', node: '部门负责人审批', approval: '审批中', approvalTone: 'info', travel: '待订机票', travelTone: 'warning' },
|
||
{ id: 'BR240617007', reason: '大数据平台技术对接', city: '杭州', period: '05-03~05-05 (3天)', applyTime: '2024-05-01', amount: '￥2,180.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' },
|
||
{ id: 'BR240616004', reason: '国际业务合规培训', city: '北京', period: '04-28~04-30 (3天)', applyTime: '2024-04-26', amount: '￥2,960.00', node: '已完成', approval: '已完成', approvalTone: 'success', travel: '已订酒店/机票', travelTone: 'success' }
|
||
]
|
||
|
||
const currentPage = ref(1)
|
||
const pageSize = 10
|
||
|
||
const filteredRows = computed(() => {
|
||
if (activeTab.value === '全部') return rows
|
||
return rows.filter((row) => row.approval === activeTab.value || row.travel.includes(activeTab.value.replace('待出行', '待订')))
|
||
})
|
||
|
||
const totalCount = computed(() => filteredRows.value.length)
|
||
const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / pageSize)))
|
||
|
||
const visibleRows = computed(() => {
|
||
const start = (currentPage.value - 1) * pageSize
|
||
return filteredRows.value.slice(start, start + pageSize)
|
||
})
|
||
|
||
watch(activeTab, () => { currentPage.value = 1 })
|
||
</script>
|
||
|
||
<style scoped>
|
||
.travel-page {
|
||
height: 100%;
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: auto minmax(0, 1fr);
|
||
gap: 14px;
|
||
animation: fadeUp 220ms var(--ease) both;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.travel-kpis {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.travel-kpi {
|
||
min-height: 96px;
|
||
display: grid;
|
||
grid-template-columns: 54px minmax(0, 1fr);
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 16px 20px;
|
||
}
|
||
|
||
.kpi-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 999px;
|
||
background: color-mix(in srgb, var(--accent) 14%, white);
|
||
color: var(--accent);
|
||
font-size: 22px;
|
||
}
|
||
|
||
.travel-kpi p {
|
||
color: #334155;
|
||
font-size: 14px;
|
||
font-weight: 650;
|
||
}
|
||
|
||
.travel-kpi strong {
|
||
display: block;
|
||
margin-top: 5px;
|
||
color: #0f172a;
|
||
font-size: 26px;
|
||
font-weight: 850;
|
||
line-height: 1;
|
||
}
|
||
|
||
.travel-kpi small {
|
||
color: #0f172a;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.travel-kpi span:not(.kpi-icon) {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-top: 7px;
|
||
color: #64748b;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.travel-kpi .good i {
|
||
color: #059669;
|
||
}
|
||
|
||
.travel-kpi .bad i {
|
||
color: #ef4444;
|
||
}
|
||
|
||
.travel-list {
|
||
min-height: 0;
|
||
display: grid;
|
||
grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
|
||
padding: 16px 18px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.list-head h2 {
|
||
color: #0f172a;
|
||
font-size: 19px;
|
||
font-weight: 850;
|
||
}
|
||
|
||
.list-search {
|
||
position: relative;
|
||
width: 220px;
|
||
}
|
||
|
||
.list-search .mdi {
|
||
position: absolute;
|
||
left: 12px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #64748b;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.list-search input {
|
||
width: 100%;
|
||
height: 38px;
|
||
padding: 0 12px 0 36px;
|
||
border: 1px solid #d7e0ea;
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
color: #0f172a;
|
||
font-size: 13px;
|
||
transition: border-color 160ms ease, box-shadow 160ms ease;
|
||
}
|
||
|
||
.list-search input::placeholder {
|
||
color: #8da0b4;
|
||
}
|
||
|
||
.list-search input:focus {
|
||
border-color: #10b981;
|
||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
|
||
outline: none;
|
||
}
|
||
|
||
.status-tabs {
|
||
display: flex;
|
||
gap: 28px;
|
||
margin-top: 14px;
|
||
border-bottom: 1px solid #dbe4ee;
|
||
}
|
||
|
||
.status-tabs button {
|
||
position: relative;
|
||
min-height: 36px;
|
||
border: 0;
|
||
background: transparent;
|
||
color: #64748b;
|
||
font-size: 14px;
|
||
font-weight: 750;
|
||
}
|
||
|
||
.status-tabs button.active {
|
||
color: #059669;
|
||
}
|
||
|
||
.status-tabs button.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: -1px;
|
||
height: 3px;
|
||
border-radius: 999px 999px 0 0;
|
||
background: #10b981;
|
||
}
|
||
|
||
.list-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
margin-top: 14px;
|
||
}
|
||
|
||
.filter-set,
|
||
.toolbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.filter-btn,
|
||
.export-btn,
|
||
.create-btn,
|
||
.page-size {
|
||
min-height: 38px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 9px;
|
||
padding: 0 14px;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
font-weight: 750;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.filter-btn,
|
||
.export-btn,
|
||
.page-size {
|
||
border: 1px solid #d7e0ea;
|
||
background: #fff;
|
||
color: #334155;
|
||
}
|
||
|
||
.filter-btn {
|
||
min-width: 120px;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.date-range-filter {
|
||
position: relative;
|
||
}
|
||
|
||
.date-range-trigger {
|
||
min-width: 160px;
|
||
}
|
||
|
||
.date-range-label {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 110px;
|
||
}
|
||
|
||
.date-range-popover {
|
||
position: absolute;
|
||
top: calc(100% + 8px);
|
||
left: 0;
|
||
width: 320px;
|
||
z-index: 40;
|
||
display: grid;
|
||
gap: 14px;
|
||
padding: 16px;
|
||
border: 1px solid #d7e0ea;
|
||
border-radius: 12px;
|
||
background: #fff;
|
||
box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
|
||
}
|
||
|
||
.date-range-popover header,
|
||
.date-range-popover footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.date-range-popover header strong {
|
||
color: #0f172a;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.date-range-popover header button {
|
||
width: 30px;
|
||
height: 30px;
|
||
display: grid;
|
||
place-items: center;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
color: #64748b;
|
||
}
|
||
|
||
.date-range-popover header button:hover {
|
||
background: #f1f5f9;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.date-range-fields {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
.date-range-fields label {
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
|
||
.date-range-fields span {
|
||
color: #64748b;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.date-range-fields input {
|
||
width: 100%;
|
||
height: 38px;
|
||
padding: 0 9px;
|
||
border: 1px solid #d7e0ea;
|
||
border-radius: 8px;
|
||
color: #0f172a;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.date-range-fields input:focus {
|
||
border-color: #10b981;
|
||
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
|
||
outline: none;
|
||
}
|
||
|
||
.ghost-btn,
|
||
.apply-btn {
|
||
height: 36px;
|
||
padding: 0 14px;
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
font-weight: 750;
|
||
}
|
||
|
||
.ghost-btn {
|
||
border: 1px solid #d7e0ea;
|
||
background: #fff;
|
||
color: #334155;
|
||
}
|
||
|
||
.apply-btn {
|
||
border: 0;
|
||
background: #10b981;
|
||
color: #fff;
|
||
}
|
||
|
||
.apply-btn:disabled {
|
||
cursor: not-allowed;
|
||
background: #cbd5e1;
|
||
}
|
||
|
||
.filter-btn:hover,
|
||
.export-btn:hover,
|
||
.page-size:hover {
|
||
border-color: rgba(16, 185, 129, .32);
|
||
color: #0f9f78;
|
||
}
|
||
|
||
.create-btn {
|
||
border: 0;
|
||
background: #059669;
|
||
color: #fff;
|
||
box-shadow: 0 8px 18px rgba(5, 150, 105, .18);
|
||
}
|
||
|
||
.create-btn:hover {
|
||
background: #047857;
|
||
}
|
||
|
||
.hint {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
margin-top: 10px;
|
||
color: #64748b;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.hint .mdi {
|
||
color: #64748b;
|
||
}
|
||
|
||
.table-wrap {
|
||
min-height: 495px;
|
||
margin-top: 10px;
|
||
overflow-x: auto;
|
||
overflow-y: auto;
|
||
border: 1px solid #edf2f7;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
min-width: 1140px;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
colgroup col {
|
||
width: 10%;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: 13px 12px;
|
||
border-bottom: 1px solid #edf2f7;
|
||
color: #24324a;
|
||
font-size: 14px;
|
||
line-height: 1.35;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
th {
|
||
background: #f7fafc;
|
||
color: #64748b;
|
||
font-size: 13px;
|
||
font-weight: 800;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
tbody tr {
|
||
cursor: pointer;
|
||
}
|
||
|
||
tbody tr:hover {
|
||
background: linear-gradient(90deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .03));
|
||
}
|
||
|
||
tbody tr:last-child td {
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.doc-id {
|
||
color: #059669;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.status-tag {
|
||
min-height: 24px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 0 9px;
|
||
border: 1px solid transparent;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
font-weight: 750;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.status-tag.info {
|
||
border-color: #bfdbfe;
|
||
background: #eff6ff;
|
||
color: #2563eb;
|
||
}
|
||
|
||
.status-tag.success {
|
||
border-color: #bbf7d0;
|
||
background: #ecfdf5;
|
||
color: #059669;
|
||
}
|
||
|
||
.status-tag.warning {
|
||
border-color: #fed7aa;
|
||
background: #fff7ed;
|
||
color: #f97316;
|
||
}
|
||
|
||
.status-tag.neutral {
|
||
border-color: #cbd5e1;
|
||
background: #f8fafc;
|
||
color: #475569;
|
||
}
|
||
|
||
.row-actions {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.row-actions button {
|
||
border: 0;
|
||
background: transparent;
|
||
color: #2563eb;
|
||
font-size: 13px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.row-actions button:hover {
|
||
color: #059669;
|
||
}
|
||
|
||
.list-foot {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.page-summary {
|
||
color: #64748b;
|
||
font-size: 14px;
|
||
font-weight: 650;
|
||
}
|
||
|
||
.pager {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
padding: 4px;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 12px;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.pager button {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: 0;
|
||
border-radius: 9px;
|
||
background: transparent;
|
||
color: #334155;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||
}
|
||
|
||
.pager button:hover:not(.active) {
|
||
background: #fff;
|
||
color: #059669;
|
||
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
|
||
}
|
||
|
||
.pager button.active {
|
||
background: #059669;
|
||
color: #fff;
|
||
box-shadow: 0 8px 16px rgba(5, 150, 105, .20);
|
||
}
|
||
|
||
.page-nav {
|
||
color: #64748b;
|
||
}
|
||
|
||
.page-size {
|
||
justify-self: end;
|
||
min-width: 112px;
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.travel-kpis {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.list-toolbar,
|
||
.list-foot {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.travel-kpis {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.travel-list,
|
||
.travel-kpi {
|
||
padding: 16px;
|
||
}
|
||
|
||
.status-tabs {
|
||
gap: 18px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.filter-btn,
|
||
.export-btn,
|
||
.create-btn,
|
||
.page-size {
|
||
width: 100%;
|
||
}
|
||
|
||
.toolbar-actions,
|
||
.filter-set {
|
||
width: 100%;
|
||
}
|
||
|
||
.list-foot {
|
||
display: grid;
|
||
justify-items: stretch;
|
||
}
|
||
|
||
.pager,
|
||
.page-size {
|
||
justify-self: stretch;
|
||
}
|
||
}
|
||
</style>
|