<template>
|
<GlobalWindow title="关联设备" :visible.sync="visible" width="920px" :show-confirm="false">
|
<div v-if="readonly" class="readonly-tip">设备由租赁合同自动关联，仅支持查看</div>
|
<div class="merchant-info">
|
<div class="merchant-info__item">
|
<span class="merchant-info__label">客户类型</span>
|
<span class="merchant-info__value">{{ customerTypeText }}</span>
|
</div>
|
<div class="merchant-info__item">
|
<span class="merchant-info__label">客户名称</span>
|
<span class="merchant-info__value">{{ customer.name || '-' }}</span>
|
</div>
|
<div class="merchant-info__item">
|
<span class="merchant-info__label">联系人</span>
|
<span class="merchant-info__value">{{ customer.memberName || '-' }}</span>
|
</div>
|
<div class="merchant-info__item">
|
<span class="merchant-info__label">联系方式</span>
|
<span class="merchant-info__value">{{ customer.memberPhone || '-' }}</span>
|
</div>
|
</div>
|
<el-tabs v-model="activeTab" class="device-tabs">
|
<el-tab-pane label="关联电表" name="electrical">
|
<YwCustomerElectricalTab :customer-id="customer.id" :active="activeTab === 'electrical'" :readonly="readonly"/>
|
</el-tab-pane>
|
<el-tab-pane label="关联空调" name="conditioner">
|
<YwCustomerConditionerTab :customer-id="customer.id" :active="activeTab === 'conditioner'" :readonly="readonly"/>
|
</el-tab-pane>
|
</el-tabs>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import YwCustomerElectricalTab from './YwCustomerElectricalTab'
|
import YwCustomerConditionerTab from './YwCustomerConditionerTab'
|
|
export default {
|
name: 'YwCustomerDeviceWindow',
|
components: { GlobalWindow, YwCustomerElectricalTab, YwCustomerConditionerTab },
|
props: {
|
/** 只读查看（合同自动关联，不可手动增删） */
|
readonly: {
|
type: Boolean,
|
default: true
|
}
|
},
|
data () {
|
return {
|
visible: false,
|
activeTab: 'electrical',
|
customer: {}
|
}
|
},
|
computed: {
|
customerTypeText () {
|
const t = this.customer.type
|
return t === 0 || t === '0' ? '个人' : '企业'
|
}
|
},
|
methods: {
|
open (row, tab) {
|
this.customer = {
|
id: row.id,
|
type: row.type,
|
name: row.name,
|
memberName: row.memberName,
|
memberPhone: row.memberPhone
|
}
|
this.activeTab = tab || 'electrical'
|
this.visible = true
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.merchant-info {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 12px 24px;
|
margin-bottom: 16px;
|
padding: 30px 16px 30px 16px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
}
|
.merchant-info__item {
|
min-width: 180px;
|
line-height: 22px;
|
}
|
.merchant-info__label {
|
color: #909399;
|
margin-right: 8px;
|
}
|
.merchant-info__label::after {
|
content: '：';
|
}
|
.merchant-info__value {
|
color: #303133;
|
font-weight: 500;
|
}
|
.device-tabs {
|
margin-top: 4px;
|
}
|
.readonly-tip {
|
margin-bottom: 12px;
|
padding: 8px 12px;
|
font-size: 13px;
|
color: #909399;
|
background: #fdf6ec;
|
border-radius: 4px;
|
}
|
</style>
|
