196 lines
4.7 KiB
Vue
196 lines
4.7 KiB
Vue
<template>
|
||
<el-table :data="[props]"
|
||
border
|
||
:header-cell-class-name="headerClassName"
|
||
style="width: 100%">
|
||
<el-table-column label="装备" min-width="210" >
|
||
<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="80" >
|
||
<template #default="scope">
|
||
{{ scope.row.price }}/{{ scope.row.unit }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="company" label="供应商" min-width="120" />
|
||
</el-table>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import {ref} from "vue";
|
||
|
||
const props = defineProps({
|
||
/**
|
||
* @description 装备名称
|
||
* */
|
||
name:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
/**
|
||
* @description 装备图片
|
||
* */
|
||
url:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
/**
|
||
* @description 装备编码
|
||
* */
|
||
code:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
/**
|
||
* @description 装备类别
|
||
* */
|
||
type:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
/**
|
||
* @description 装备组别
|
||
* */
|
||
group:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
/**
|
||
* @description 装备品牌
|
||
* */
|
||
brand:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
/**
|
||
* @description 装备规格
|
||
* */
|
||
specifications:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
/**
|
||
* @description 装备位置
|
||
* */
|
||
position:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
/**
|
||
* @description 装备价格
|
||
* */
|
||
price:{
|
||
type: [String, Number],
|
||
default:''
|
||
},
|
||
/**
|
||
* @description 装备价格单位
|
||
* */
|
||
unit: {
|
||
type: String,
|
||
default:''
|
||
},
|
||
/**
|
||
* @description 装备公司
|
||
* */
|
||
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>
|