<template>
|
<view class="uni-dataobj-item" @click.prevent.stop="triggerItem">
|
<view class="uni-panel-title-info">
|
|
<text class="uni-panel-title"><text class="uni-panel-icon fs-attach" v-if="firstLineIsAttach"></text>{{firstLineText}}</text>
|
</view>
|
<view class="uni-panel-title-info">
|
<text class="uni-panel-desc"><text class="uni-panel-icon fs-attach" v-if="secondLineIsAttach"></text>{{secondLineText}}</text>
|
<view class="uni-panel-row-buttons" v-if="rowButons">
|
<view class="uni-panel-row-button" v-for="(item, index) in rowButons" :key="index"
|
:class="item.Style=='text' ? '':getIco(item)" @click.prevent.stop="clickButton(item)">
|
{{item.Style=='text' ? item.ShowName :''}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "dataobj-item",
|
emits: ['clickItem', 'clickButton'],
|
props: {
|
rowButons: {
|
type: Array,
|
default () {
|
return [];
|
}
|
},
|
dataObj: {
|
type: Object,
|
default () {
|
return {};
|
}
|
},
|
},
|
data() {
|
return {}
|
},
|
computed: {
|
firstLineIndex() {
|
let curIndex = this.dataObj.ObjAttr.findIndex((obj, index, arr2) => {
|
return obj.Hidden != "1" && obj.Hidden != 1;
|
})
|
return curIndex
|
},
|
secondLineIndex() {
|
let indexF = this.firstLineIndex
|
let curIndex = this.dataObj.ObjAttr.findIndex((obj, index, arr2) => {
|
return obj.Hidden != "1" && obj.Hidden != 1 && index > indexF;
|
})
|
return curIndex
|
},
|
|
firstLineText() {
|
if (this.firstLineIndex > -1) {
|
return this.dataObj.ObjAttr[this.firstLineIndex].Value
|
} else {
|
return ""
|
}
|
},
|
secondLineText() {
|
if (this.secondLineIndex > -1) {
|
return this.dataObj.ObjAttr[this.secondLineIndex].Value
|
} else {
|
return ""
|
}
|
},
|
firstLineIsAttach() {
|
if (this.firstLineIndex > -1) {
|
return this.dataObj.ObjAttr[this.firstLineIndex].Name == "SYS_ATTACH"
|
} else {
|
return false
|
}
|
},
|
secondLineIsAttach() {
|
if (this.secondLineIndex > -1) {
|
return this.dataObj.ObjAttr[this.secondLineIndex].Name == "SYS_ATTACH"
|
} else {
|
return false
|
}
|
},
|
},
|
methods: {
|
triggerItem() {
|
console.log("triggerItem", this.dataObj)
|
this.$emit('clickItem', this.dataObj)
|
},
|
clickButton(item) {
|
this.$emit('clickButton', {
|
button: item,
|
data: this.dataObj
|
})
|
},
|
getIco(item) {
|
if(item.FunCode == "Modify")
|
{
|
return "fs-edit"
|
}
|
else if(item.FunCode == "Delete")
|
{
|
return "fs-WindowClose"
|
}
|
else
|
{
|
return "fs-set"
|
}
|
},
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.uni-dataobj-item {
|
display: flex;
|
flex-direction: column !important;
|
padding: 6px 0 4px;
|
min-height: 48px;
|
width: 100%;
|
|
.uni-panel-data-info {
|
display: flex;
|
flex-direction: column !important;
|
flex: 1;
|
}
|
|
.uni-panel-title-info {
|
display: flex;
|
flex-direction: row !important;
|
background-color: transparent;
|
margin: 4px 2px;
|
}
|
|
.uni-panel-title {
|
display: -webkit-box;
|
flex: 1;
|
color: #000;
|
font-size: 15px;
|
white-space: normal;
|
word-wrap: break-word;
|
word-break: break-all;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
-webkit-line-clamp: 1; //表明是2行文本显示省略号，换成3则表明是3行文本显示省略号
|
-webkit-box-orient: vertical;
|
}
|
|
.uni-panel-row-buttons {
|
display: flex;
|
flex-direction: row !important;
|
background-color: transparent;
|
|
padding: 0 4px;
|
}
|
|
.uni-panel-row-button {
|
display: flex;
|
margin-left: 5px;
|
padding: 2px 4px;
|
line-height: 20px;
|
font-size: 14px;
|
color: #007aff;
|
border: 1px solid #ccc;
|
border-radius: 5px;
|
}
|
|
.uni-panel-desc {
|
display: -webkit-box;
|
flex: 1;
|
color: #808080;
|
font-size: 13px;
|
line-height: 24px;
|
white-space: normal;
|
word-wrap: break-word;
|
word-break: break-all;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
-webkit-line-clamp: 1; //表明是2行文本显示省略号，换成3则表明是3行文本显示省略号
|
-webkit-box-orient: vertical;
|
}
|
.uni-panel-icon {
|
margin: 5px 5px 5px 0;
|
}
|
.uni-panel-left {
|
display: flex;
|
font-size: 15px;
|
color: #000;
|
margin: 12px 8px;
|
}
|
}
|
</style>
|
