9 changed files with 569 additions and 157 deletions
@ -0,0 +1,249 @@
|
||||
<template> |
||||
<el-card class="box-card"> |
||||
<el-table |
||||
v-loading="loading" |
||||
element-loading-text="数据正在更新中..." |
||||
:data="ElData" |
||||
border |
||||
style="width: 100%" |
||||
ref="tableRef" |
||||
@select-all="selectAll" |
||||
@select="selectChange" |
||||
> |
||||
<el-table-column type="selection" width="55" fixed /> |
||||
<el-table-column type="index" fixed width="50" height="100" label="#" align="center" /> |
||||
|
||||
<!-- |
||||
Type ===1 普通文本 |
||||
Type ===2 图片显示 |
||||
Type ===3 操作功能 |
||||
label: 标题 |
||||
width: 宽度 |
||||
prop: 数据字段 |
||||
--> |
||||
|
||||
<el-table-column |
||||
:prop="item.prop" |
||||
:label="item.label" |
||||
:width="item.width" |
||||
:fixed="item.fixed" |
||||
align="center" |
||||
v-for="(item, index) in ElmenuData" |
||||
:key="item.label" |
||||
> |
||||
<el-table-column |
||||
:prop="item.prop" |
||||
:label="item.label" |
||||
:width="item.width" |
||||
:fixed="item.fixed" |
||||
align="center" |
||||
> |
||||
<!-- 头部搜索 --> |
||||
<template #header> |
||||
<el-input |
||||
clearable |
||||
v-if="item.type == 4" |
||||
v-model="item.values" |
||||
:placeholder="`请输入${item.label}`" |
||||
/> |
||||
</template> |
||||
<!-- 内容主体 --> |
||||
<template #default="props"> |
||||
<span v-if="4">{{ props.row[item.prop] ? props.row[item.prop] : '/' }}</span> |
||||
<div :class="ElBtnClass" v-if="item.type == 3"> |
||||
<el-button |
||||
:link="ElButtonS[0].link" |
||||
:class="ElButtonS[0].class" |
||||
:auto-insert-space="ElButtonS[0].space" |
||||
:size="ElButtonS[0].size" |
||||
:icon="ElButtonS[0].icon" |
||||
@click="ViewEvent(props.row)" |
||||
>明细</el-button |
||||
> |
||||
</div> |
||||
|
||||
</template> |
||||
</el-table-column> |
||||
</el-table-column> |
||||
|
||||
</el-table> |
||||
</el-card> |
||||
</template> |
||||
|
||||
<script setup> |
||||
// 按钮配置 |
||||
const ElButtonS = ref([ |
||||
// 1.link 切换按钮样式(文本模式-false ,按钮模式-tre) |
||||
// 2.class 按钮样式名(用于切换按钮样式) |
||||
// 3.space 是否开启按钮文子直接间距(true开启 ,false关闭) |
||||
// 4.size 按钮尺寸默认小尺寸('large'| 'default'| 'small') |
||||
// 5.icon 按钮图标 |
||||
// 6.table 按钮名称 |
||||
{ |
||||
link: false, |
||||
class: 'el-btn-view', |
||||
space: true, |
||||
size: 'small', |
||||
icon: 'el-icon-view', |
||||
table: '详情', |
||||
}, |
||||
{ |
||||
link: false, |
||||
class: 'el-btn-view', |
||||
space: true, |
||||
size: 'small', |
||||
icon: 'el-icon-view', |
||||
table: '延期', |
||||
}, |
||||
{ |
||||
link: false, |
||||
class: 'el-btn-view', |
||||
space: true, |
||||
size: 'small', |
||||
icon: 'el-icon-view', |
||||
table: '编辑', |
||||
}, |
||||
{ |
||||
link: false, |
||||
class: 'el-btn-view', |
||||
space: true, |
||||
size: 'small', |
||||
icon: 'el-icon-view', |
||||
table: '对比数据', |
||||
}, |
||||
]); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const ElData=ref([ |
||||
{ |
||||
name:'产品名称1', |
||||
currentUsageWarehouse:'北京仓库1' |
||||
}, |
||||
{ |
||||
name:'产品名称2', |
||||
currentUsageWarehouse:'北京仓库2' |
||||
} |
||||
]) |
||||
const ElmenuData = ref([ |
||||
{ |
||||
prop: 'name', |
||||
label: '异常类型', |
||||
type: 4, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
header: true, |
||||
}, |
||||
{ |
||||
prop: 'currentUsageWarehouse', |
||||
label: '发现节点', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
header: true, |
||||
}, |
||||
{ |
||||
prop: 'model', |
||||
label: '异常工单', |
||||
type: 1, |
||||
values: '', |
||||
width: '150', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
header: true, |
||||
}, |
||||
{ |
||||
prop: 'purchaseAmount', |
||||
label: '运单号', |
||||
type: 1, |
||||
values: '', |
||||
width: '180', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
header: true, |
||||
}, |
||||
{ |
||||
prop: 'state', |
||||
label: '订单自编号', |
||||
type: 1, |
||||
values: '', |
||||
width: '180', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
header: true, |
||||
}, |
||||
{ |
||||
prop: 'user', |
||||
label: '车次号', |
||||
type: 1, |
||||
values: '', |
||||
width: '180', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
header: true, |
||||
}, |
||||
{ |
||||
prop: 'deviceSerialNumber', |
||||
label: '一级品', |
||||
type: 1, |
||||
values: '', |
||||
width: '180', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
header: true, |
||||
}, |
||||
{ |
||||
prop: 'userPosition', |
||||
label: '二级品', |
||||
type: 1, |
||||
values: '', |
||||
width: '180', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
header: true, |
||||
}, |
||||
{ |
||||
prop: 'isDeposit', |
||||
label: '车辆线路', |
||||
type: 1, |
||||
values: '', |
||||
width: '180', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
header: true, |
||||
}, |
||||
{ |
||||
prop: '', |
||||
label: '操作', |
||||
type: 10, |
||||
values: '', |
||||
width: '280', |
||||
checkarr: [], |
||||
fixed: false, |
||||
sortable: true, |
||||
header: true, |
||||
}, |
||||
]); |
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped lang='scss'> |
||||
|
||||
</style> |
||||
@ -1,61 +0,0 @@
|
||||
<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