155 lines
3.9 KiB
Vue
155 lines
3.9 KiB
Vue
<template>
|
|
<div style="flex: 1;">
|
|
<Container name="订单完成情况" size="small" class="wholeOrder">
|
|
<div style="width: 100%;padding: 10px; 20px">
|
|
<el-table
|
|
:header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}"
|
|
:row-style="setRowStyle"
|
|
:data="list"
|
|
height="225"
|
|
border
|
|
style="width: 100%; background: transparent"
|
|
>
|
|
<el-table-column
|
|
v-for="item in tableProps"
|
|
:key="item.prop"
|
|
:show-overflow-tooltip="item.showOverflowtooltip"
|
|
v-bind="item"
|
|
>
|
|
<template slot-scope="scope">
|
|
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
|
|
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<slot name="content" />
|
|
</el-table>
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff'}"
|
|
const tableProps = [
|
|
{
|
|
prop: 'time',
|
|
label: '添加时间',
|
|
filter: parseTime,
|
|
minWidth: 140
|
|
},
|
|
{
|
|
prop: 'name',
|
|
label: '订单名称',
|
|
minWidth: 120,
|
|
showOverflowtooltip: true
|
|
},
|
|
{
|
|
prop: 'code',
|
|
label: '订单编码',
|
|
minWidth: 180
|
|
},
|
|
{
|
|
prop: 'customerId',
|
|
label: '客户',
|
|
showOverflowtooltip: true
|
|
}
|
|
]
|
|
import Container from '../components/Container.vue';
|
|
import { parseTime } from '@/utils/ruoyi'
|
|
export default {
|
|
name: 'OrderStatus',
|
|
filters: {
|
|
commonFilter: (source, filterType = a => a) => {
|
|
return filterType(source)
|
|
}
|
|
},
|
|
components: { Container },
|
|
data() {
|
|
return {
|
|
tableProps,
|
|
list:[
|
|
{time: '2023-12-12', name: '名称名称'},
|
|
{time: '2023-12-13', name: '名称名称'},
|
|
{time: '2023-12-14', name: '名称名称'},
|
|
{time: '2023-12-15', name: '名称名称'},
|
|
{time: '2023-12-16', name: '名称名称'},
|
|
{time: '2023-12-17', name: '名称名称'},
|
|
{time: '2023-12-18', name: '名称名称'},
|
|
{time: '2023-12-19', name: '名称名称'},
|
|
{time: '2023-12-20', name: '名称名称'},
|
|
{time: '2023-12-21', name: '名称名称'}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods:{
|
|
setRowStyle(v) {
|
|
if (v.rowIndex % 2 === 0) {
|
|
return {
|
|
background: 'rgba(11, 84, 153, 0.5)',
|
|
color: 'rgba(255,255,255,0.8)',
|
|
height: '40px',
|
|
lineHeight: '40px',
|
|
padding: 0,
|
|
fontSize: '16px'
|
|
}
|
|
} else {
|
|
return {
|
|
background: 'rgba(4, 74, 132, 0.5)',
|
|
color: 'rgba(255,255,255,0.8)',
|
|
height: '40px',
|
|
lineHeight: '40px',
|
|
padding: 0,
|
|
fontSize: '16px'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='scss'>
|
|
.wholeOrder {
|
|
.el-table {
|
|
border: 0;
|
|
}
|
|
.el-table::before,.el-table--border::after {
|
|
background-color: transparent;
|
|
}
|
|
.el-table th,td{
|
|
border-color: #0D1728 !important;
|
|
padding: 0;
|
|
}
|
|
.el-table tr {
|
|
background: transparent;
|
|
}
|
|
.el-table__row:hover > td {
|
|
background-color: rgba(79,114,136,0.29) !important;
|
|
}
|
|
|
|
.el-table__row--striped:hover > td {
|
|
background-color: rgba(79,114,136,0.29) !important;
|
|
}
|
|
// .el-table {
|
|
// border: 0;
|
|
// }
|
|
// .el-table::before,.el-table--border::after {
|
|
// background-color: transparent;
|
|
// }
|
|
// .el-table th,td{
|
|
// border-color: #0D1728 !important;
|
|
// padding: 0;
|
|
// }
|
|
// .el-table tr {
|
|
// background: transparent;
|
|
// }
|
|
// .el-table__row:hover > td {
|
|
// background-color: rgba(79,114,136,0.29) !important;
|
|
// }
|
|
|
|
// .el-table__row--striped:hover > td {
|
|
// background-color: rgba(79,114,136,0.29) !important;
|
|
// }
|
|
|
|
}
|
|
</style> |