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