13208366016
1 year ago
3 changed files with 79 additions and 1 deletions
@ -0,0 +1,61 @@
|
||||
<template> |
||||
<el-tabs type="border-card" class="demo-tabs"> |
||||
<el-tab-pane v-for="item in Tabs" :key="item.name"> |
||||
<template #label> |
||||
<span class="custom-tabs-label"> |
||||
<el-icon><component :is="item.icon" /></el-icon> |
||||
<span>{{ item.label }}</span> |
||||
</span> |
||||
</template> |
||||
<!-- 顶部搜索框 --> |
||||
<el-form :inline="true" :model="formInput" class="demo-form-inline"> |
||||
<el-form-item label="Approved by"> |
||||
<el-input v-model="formInput.user" placeholder="Approved by" clearable /> |
||||
</el-form-item> |
||||
<el-form-item label="Activity zone"> |
||||
<el-select v-model="formInput.region" placeholder="Activity zone" clearable> |
||||
<el-option label="Zone one" value="shanghai" /> |
||||
<el-option label="Zone two" value="beijing" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="Activity time"> |
||||
<el-date-picker |
||||
v-model="formInput.date" |
||||
type="date" |
||||
placeholder="Pick a date" |
||||
clearable |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="onSubmit">Query</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { ref, reactive, onMounted, computed, watch } from 'vue'; |
||||
// 标题栏 |
||||
const Tabs = ref([ |
||||
{ label: '处理中', name: 0, icon: 'Monitor' }, |
||||
{ label: '理赔金额未出', name: 1, icon: 'Coin' }, |
||||
{ label: '处理完毕', name: 2, icon: 'Check' }, |
||||
{ label: '完结', name: 3, icon: 'Reading' }, |
||||
{ label: '仲裁中', name: 4, icon: 'List' }, |
||||
{ label: '全部', name: 5, icon: 'Notification' }, |
||||
]); |
||||
// 搜索框 |
||||
const formInput = ref({}); //搜索框 |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.custom-tabs-label { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
i { |
||||
margin-right: 6px; |
||||
} |
||||
} |
||||
</style> |
Loading…
Reference in new issue