163 lines
4.1 KiB
Vue
163 lines
4.1 KiB
Vue
|
<template>
|
|||
|
|
<el-table :data="[props]"
|
|||
|
|
border
|
|||
|
|
:header-cell-class-name="headerClassName"
|
|||
|
|
style="width: 100%">
|
|||
|
|
<el-table-column label="装备" min-width="200" >
|
|||
|
|
<template #default="scope">
|
|||
|
|
<div class="equipData">
|
|||
|
|
<div class="name">
|
|||
|
|
{{ scope.row.name }}
|
|||
|
|
</div>
|
|||
|
|
<div class="desc">
|
|||
|
|
<div class="Img">
|
|||
|
|
<img :src="scope.row.url">
|
|||
|
|
</div>
|
|||
|
|
<div class="state">
|
|||
|
|
<div class="item" v-for="(v,i) in stateList" :key="i">
|
|||
|
|
<div class="label">
|
|||
|
|
{{ v.label }}：
|
|||
|
|
</div>
|
|||
|
|
<div class="value">
|
|||
|
|
{{ scope.row[v.key] || '' }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="name" label="租金" min-width="120" >
|
|||
|
|
<template #default="scope">
|
|||
|
|
{{ scope.row.price }}/{{ scope.row.unit }}
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="company" label="供应商" min-width="180" />
|
|||
|
|
</el-table>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import {ref} from "vue";
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
name:{
|
|||
|
|
type:String,
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
url:{
|
|||
|
|
type:String,
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
code:{
|
|||
|
|
type:String,
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
type:{
|
|||
|
|
type:String,
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
group:{
|
|||
|
|
type:String,
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
brand:{
|
|||
|
|
type:String,
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
specifications:{
|
|||
|
|
type:String,
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
position:{
|
|||
|
|
type:String,
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
price:{
|
|||
|
|
type: [String, Number],
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
unit: {
|
|||
|
|
type: String,
|
|||
|
|
default:''
|
|||
|
|
},
|
|||
|
|
company: {
|
|||
|
|
type: String,
|
|||
|
|
default:''
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
const stateList = ref([
|
|||
|
|
{
|
|||
|
|
label:'装备编号',
|
|||
|
|
key:'code'
|
|||
|
|
},{
|
|||
|
|
label:'装备类别',
|
|||
|
|
key:'type'
|
|||
|
|
},{
|
|||
|
|
label:'装备组别',
|
|||
|
|
key:'group'
|
|||
|
|
},{
|
|||
|
|
label:'品牌',
|
|||
|
|
key:'brand'
|
|||
|
|
},{
|
|||
|
|
label:'设备规格',
|
|||
|
|
key:'specifications'
|
|||
|
|
},{
|
|||
|
|
label:'设备位置',
|
|||
|
|
key:'position'
|
|||
|
|
},
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const headerClassName = () => {
|
|||
|
|
return 'headerColor'
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
:deep() .headerColor{
|
|||
|
|
background: #3E98FF !important;
|
|||
|
|
color: white !important;
|
|||
|
|
}
|
|||
|
|
.equipData{
|
|||
|
|
.name{
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
.desc{
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
.Img{
|
|||
|
|
width: 150px;
|
|||
|
|
height: 150px;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: #e5e5e5;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
img{
|
|||
|
|
width: 100%;
|
|||
|
|
max-height: 100%;
|
|||
|
|
object-fit: contain;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.state{
|
|||
|
|
flex: 1;
|
|||
|
|
.item{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
.label{
|
|||
|
|
width: 80px;
|
|||
|
|
text-align: right;
|
|||
|
|
color: #858585;
|
|||
|
|
}
|
|||
|
|
.value{
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|