182 lines
4.2 KiB
Vue
182 lines
4.2 KiB
Vue
<template>
|
||
<view :class="{ 'dev-repair--full': isFull === true || isFull === 'true'}" class="myContainer myContentBox dev-repair">
|
||
<!-- 标题 -->
|
||
<view class="dev-repair__header">
|
||
<view class="dev-repair__header-title-text">
|
||
<view>
|
||
<text class="definT">{{ title }}</text>
|
||
<view v-if="extra" >
|
||
<dev-tag :text="extra" :tagType="tagType" size="small"/>
|
||
</view>
|
||
</view>
|
||
<view style="clear: both;">
|
||
<text v-if="titleNumber" >{{ titleNumber }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view v-if="note" class="dev-repair__header-extra-text" @click="onClick">{{note}}</view> -->
|
||
<image src='../../static/img/deleteIcon.png' style="width: 20px;height: 20px;margin-left:4px ;" @click.stop="remove()" v-if="approveState == 0"></image>
|
||
</view>
|
||
<!-- 内容 -->
|
||
<view class="dev-repair__content">
|
||
<view v-if="contentList">
|
||
<view v-for="item in contentList" :key="item.index" :class="{ 'doubleList': item.isDouble === true || item.isDouble === 'true'}" class="dev-repair--myLists">
|
||
<text class="dev-label">{{item.labelName}}：</text>
|
||
<text class="dev-content">{{item.labelContent}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部 -->
|
||
<view class="dev-repair__content dev-repair__footer" v-if="contentBottom">
|
||
<view>
|
||
<view v-for="item in contentBottom" :key="item.index" :class="{ 'doubleList': item.isDouble === true || item.isDouble === 'true'}" class="dev-repair--myLists">
|
||
<text class="dev-label">{{item.labelName}}：</text>
|
||
<text class="dev-content">{{item.labelContent}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="note" class="dev-block__footer">
|
||
<slot name="footer">
|
||
<button class="mini-btn" type="default" size="default" @click="onClick">{{ note }}</button>
|
||
<button class="mini-btn" type="default" style="float:right" size="mini" @click="onClick1">{{ note1 }}</button>
|
||
</slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import devTag from '../xinsoft-dev-tag/xinsoft-dev-tag.vue';
|
||
export default {
|
||
name: 'devRepair',
|
||
components: {
|
||
devTag
|
||
},
|
||
props: {
|
||
approveState:{
|
||
type:Number,
|
||
default:undefined
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
}, // 标题
|
||
titleNumber:{
|
||
type:String,
|
||
default:''
|
||
}, //设备编码
|
||
extra: {
|
||
type: String,
|
||
default: ''
|
||
}, // 扩展信息
|
||
tagType:{
|
||
type:String,
|
||
default:''
|
||
}, //按钮状态
|
||
contentList:Array
|
||
, //右上角的 编辑或者查看详情
|
||
contentBottom:Array,
|
||
note: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
isFull: {
|
||
// 内容区域是否通栏
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
},
|
||
methods: {
|
||
onClick() {
|
||
this.$emit('click')
|
||
},
|
||
remove(){
|
||
this.$emit('remove')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@charset "UTF-8";
|
||
.mini-btn {
|
||
color: white;
|
||
font-size: 13px;
|
||
background-color: #2589ee;
|
||
}
|
||
.dev-block__footer {
|
||
padding: 20upx;
|
||
color: #999;
|
||
font-size: 24upx;
|
||
}
|
||
.dev-repair__header {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
padding: 16upx;
|
||
align-items: center
|
||
}
|
||
|
||
.definT{
|
||
margin-right: 20upx;
|
||
float: left;
|
||
}
|
||
.dev-repair__header-title {
|
||
flex: 1;
|
||
margin-right: 16upx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center
|
||
}
|
||
|
||
.dev-repair__header-title-text {
|
||
font-size: 32upx;
|
||
flex: 2;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden
|
||
}
|
||
|
||
.dev-repair__header-extra-text{
|
||
font-size: 28upx;
|
||
color: #3382FF;
|
||
}
|
||
|
||
.dev-repair__content {
|
||
padding: 16upx
|
||
}
|
||
.dev-repair__footer {
|
||
border-top: 1px solid #EDEDED;
|
||
padding: 20upx;
|
||
color: #999;
|
||
font-size: 24upx;
|
||
}
|
||
|
||
.dev-repair--full {
|
||
margin: 0;
|
||
border-left: none;
|
||
border-right: none;
|
||
border-radius: 0
|
||
}
|
||
|
||
/*中间内容的部分的样式*/
|
||
.dev-repair--myLists{
|
||
font-size: 32upx;
|
||
width: 100%;
|
||
display: inline-flex;
|
||
}
|
||
.doubleList{
|
||
width: 50%;
|
||
}
|
||
.dev-label{
|
||
font-size: 28upx;
|
||
color: #999;
|
||
min-width: 160upx;
|
||
}
|
||
.dev-content{
|
||
font-size: 28upx;
|
||
color: #333;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
</style> |