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