邓平艺
4 years ago
5 changed files with 345 additions and 116 deletions
-
235components/lf-table.vue
-
95packages/ratingQueryDetail/ratingQueryDetail.vue
-
10pages/fastRating/fastRating.vue
-
106pages/order/order.vue
-
15pages/ratingCriteria/ratingCriteria.vue
@ -0,0 +1,235 @@ |
|||||
|
<template> |
||||
|
<view class="formBox" :style="{width: formWidth,height: formHeight}"> |
||||
|
<!-- 表头 --> |
||||
|
<view class="headerBox" :style="{height: formRowHeight,width: length + 'rpx',lineHeight:formRowHeight}"> |
||||
|
<view class="numberBox" v-if="showNumber" :style="{height: formRowHeight}"> |
||||
|
序号 |
||||
|
</view> |
||||
|
<view |
||||
|
class="headerTitle" |
||||
|
v-for="itemH in Header" |
||||
|
:style="{height: formRowHeight,width: itemH.width+'rpx'}"> |
||||
|
{{itemH.text}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="titel" v-if="Content.length <= 0"> |
||||
|
暂无数据 |
||||
|
</view> |
||||
|
<view :style="{width: length + 'rpx'}"> |
||||
|
<view class="contentBox" v-for="(itemC,index) in Content" @click="clickList(itemC,index)"> |
||||
|
<block v-for="(itemH,index2) in Header"> |
||||
|
<view class="keyBox" :style="{height: formRowHeight,width: itemH.width+'rpx'}"> |
||||
|
{{itemC[itemH.key]}} |
||||
|
</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
/* |
||||
|
* |
||||
|
* |
||||
|
* |
||||
|
*/ |
||||
|
export default { |
||||
|
name:'nk-form', |
||||
|
props:{ |
||||
|
Header: { |
||||
|
type: Array, |
||||
|
default: ()=>{ |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
Content: { |
||||
|
type: Array, |
||||
|
default: ()=>{ |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
height: { |
||||
|
type: [String,Number], |
||||
|
default: 1000 |
||||
|
}, |
||||
|
width: { |
||||
|
type: [String,Number], |
||||
|
default: '600' |
||||
|
}, |
||||
|
showNumber: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
rowHeight: { |
||||
|
type: [String,Number], |
||||
|
default: 80 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
headerData:'', |
||||
|
contentData:'', |
||||
|
formWidth: '', |
||||
|
formHeight: '', |
||||
|
formRowHeight: '', |
||||
|
length: 0 |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
if(typeof this.width == 'string'){ |
||||
|
if(this.width.indexOf('rpx') > -1){ |
||||
|
this.formWidth = this.width; |
||||
|
} |
||||
|
if(this.width.indexOf('%') > -1){ |
||||
|
this.formWidth = this.width; |
||||
|
} |
||||
|
else{ |
||||
|
this.formWidth = this.width + 'rpx'; |
||||
|
} |
||||
|
}else{ |
||||
|
this.formWidth = this.width + 'rpx'; |
||||
|
} |
||||
|
if(typeof this.height == 'string'){ |
||||
|
if(this.height.indexOf('rpx') > -1){ |
||||
|
this.formHeight = this.height; |
||||
|
} |
||||
|
if(this.height.indexOf('%') > -1){ |
||||
|
this.formHeight = this.height; |
||||
|
} |
||||
|
else{ |
||||
|
this.formHeight = this.height + 'rpx'; |
||||
|
} |
||||
|
}else{ |
||||
|
this.formHeight = this.height + 'rpx'; |
||||
|
} |
||||
|
if(typeof this.rowHeight == 'string'){ |
||||
|
if(this.rowHeight.indexOf('rpx') > -1){ |
||||
|
this.formRowHeight = this.rowHeight + 'rpx'; |
||||
|
} |
||||
|
if(this.rowHeight.indexOf('%') > -1){ |
||||
|
this.formRowHeight = this.rowHeight; |
||||
|
} |
||||
|
else{ |
||||
|
this.formHeight = this.height + 'rpx'; |
||||
|
} |
||||
|
}else{ |
||||
|
this.formRowHeight = this.rowHeight + 'rpx'; |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 计算总长度 |
||||
|
getLength(){ |
||||
|
for(let i = 0; i < this.Header.length; i++){ |
||||
|
this.length = this.length + this.Header[i].width * 1; |
||||
|
} |
||||
|
if(this.showNumber){ |
||||
|
this.length = this.length + 80; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 点击事件 |
||||
|
clickList(event,index) { |
||||
|
let data = { |
||||
|
content: event, |
||||
|
index: index |
||||
|
} |
||||
|
this.$emit("clickList",data); |
||||
|
} |
||||
|
}, |
||||
|
mounted:function(){ |
||||
|
this.getLength(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.formBox{ |
||||
|
overflow: auto; |
||||
|
position: relative; |
||||
|
.headerBox{ |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
.numberBox,.headerTitle{ |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 900; |
||||
|
color: rgb(68, 68, 68); |
||||
|
// background-color: #dddddd; |
||||
|
background-color: #f7f5f6; |
||||
|
border: 1px solid #F6F6F6; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.numberBox{ |
||||
|
width: 80rpx; |
||||
|
} |
||||
|
} |
||||
|
.contentBox{ |
||||
|
.keyBox{ |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 900; |
||||
|
border: 1px solid #F6F6F6; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
} |
||||
|
// .contentBox:nth-child(2n){ |
||||
|
// background-color: #F1F1F1; |
||||
|
// } |
||||
|
.titel{ |
||||
|
text-align: center; |
||||
|
margin-top: 80rpx; |
||||
|
color: #007AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* .headerBox{ |
||||
|
height: 60rpx; |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
} */ |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
// .headerBoxII{ |
||||
|
// height: 60rpx; |
||||
|
// line-height: 60rpx; |
||||
|
// display: inline-block; |
||||
|
// text-align: center; |
||||
|
// font-size: 30rpx; |
||||
|
// font-weight: 900; |
||||
|
// color: rgb(68, 68, 68); |
||||
|
// } |
||||
|
// .headerBoxIII{ |
||||
|
// background-color: #dddddd; |
||||
|
// border: 1px solid rgb(235, 238, 245); |
||||
|
// } |
||||
|
// .contentBox{ |
||||
|
// height: 60rpx; |
||||
|
// line-height: 60rpx; |
||||
|
// float: left; |
||||
|
// text-align: center; |
||||
|
// } |
||||
|
// .contentBoxII{ |
||||
|
// height: 60rpx; |
||||
|
// line-height: 60rpx; |
||||
|
// border: 1px solid rgb(235, 238, 245); |
||||
|
// } |
||||
|
// .contentBoxII:nth-child(2n){ |
||||
|
// background-color: #E6E6E6; |
||||
|
// } |
||||
|
// .tipsBox{ |
||||
|
// margin-top: 30rpx; |
||||
|
// font-size: 40rpx; |
||||
|
// text-align: center; |
||||
|
// color: #999; |
||||
|
// } |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue