<template>
|
<div
|
class="form-content"
|
v-loading="loading"
|
v-if="keysSub.length > 0 && Object.keys(showInfo).length > 0"
|
>
|
<SectionTitle v-if="title" :title="title"></SectionTitle>
|
<div class="btn" v-if="$route.query.flowno =='CreditFlowCase'">
|
<el-button
|
type="text"
|
v-if="discountAgreementFile.visible&&title=='定价信息'"
|
@click="$emit('downloadDiscountAgreement',true)"
|
>查看项目贴息方案</el-button>
|
<el-button
|
type="text"
|
v-if="showInfo['buildingprojectid']&&title=='物业明细信息'&&!isCapital"
|
@click="$emit('projectManageDetail',true)"
|
>查看项目信息</el-button>
|
<el-button
|
type="text"
|
v-if="showInfo['buildingprojectid']&&title=='物业明细信息'&&!isCapital"
|
@click="$emit('showAgent',true)"
|
>查看代理交易信息</el-button>
|
</div>
|
<ul class="list-fileds" :class="`form-cols-${inline ? showColumn : '0'}`">
|
<li v-for="(item, index) in keysSub" :key="index" :class="[{long: item.isLong}, item.class]">
|
<p class="label">{{item.label}}:</p>
|
<p
|
class="input"
|
v-if="typeof showInfo[item.field] === 'object' && showInfo[item.field] !== null"
|
>{{showInfo[item.field][item.isDesc ? 'valueDesc' : 'value'] | showValue}}</p>
|
<p class="input" v-else>{{showInfo[item.field] | showValue}}</p>
|
|
<!-- {{ typeof scope.row[item.prop] !== 'undefined' && scope.row[item.prop].toString().trim() === '' ? '--' : scope.row[item.prop]}}</p> -->
|
</li>
|
</ul>
|
</div>
|
</template>
|
<script>
|
// 以表单的形式展示数据
|
import SectionTitle from './SectionTitle'
|
import { userBaseInfo } from '@comprehensive/utils/formHeaders'
|
export default {
|
components: {
|
SectionTitle
|
},
|
props: {
|
/**
|
* 信息列表
|
* @example
|
* { "education": { "value": "10", "codeNo": "EducationExperience", "valueDesc": "研究生", "name": null, "type": null, "orders": null, "filedDescription": null, "visible": true, "required": true, "writeAble": true }}
|
* or
|
* { "serialno": "2019071000000001", "contractserialno": "2019070900000001"}
|
*/
|
info: {
|
type: Object,
|
default: v => {
|
return {}
|
}
|
},
|
|
/**
|
* 映射信息
|
* @example
|
* [ { "label": "客户编号", "field": "customerid" }]
|
*/
|
keys: {
|
type: Array,
|
default: v => {
|
return [...userBaseInfo]
|
}
|
},
|
|
// 数据标题
|
title: {
|
type: String,
|
default: ''
|
},
|
|
// 是否展示分页信息
|
loading: {
|
type: Boolean,
|
default: false
|
},
|
discountAgreementFile: {
|
type: Object,
|
default: v => {
|
return {}
|
}
|
},
|
|
inline: {
|
type: Boolean,
|
default: true
|
},
|
|
// 显示列数（固定列数，0为不设置固定值）
|
column: {
|
type: [String, Number],
|
default: 0
|
},
|
|
// form类型
|
// search：搜索条件类（屏幕适应缩放3-4个）
|
// edit：编辑类（屏幕适应缩放2-3个）
|
// info：编辑处理类（自动判断是否为readonly，屏幕适应缩放2-3个）
|
// text：文本展示类（不会有输入框，屏幕适应缩放2-3个）
|
formType: {
|
type: String,
|
default: 'text'
|
}
|
},
|
filters: {
|
showValue(val = '') {
|
return val.toString().trim() === '' ? '--' : val
|
}
|
},
|
data() {
|
return {
|
clientWidth: 0
|
}
|
},
|
mounted() {
|
window.addEventListener('resize', this.updateClientWidth)
|
this.updateClientWidth()
|
},
|
methods: {
|
updateClientWidth() {
|
const clientWidth = document.documentElement.clientWidth || 0
|
this.clientWidth = clientWidth
|
},
|
// 格式化金额
|
getMoney(money) {
|
if (money && money != null) {
|
money = String(money)
|
let left = money.split('.')[0]
|
let right = money.split('.')[1]
|
right = right
|
? right.length >= 2
|
? '.' + right.substr(0, 2)
|
: '.' + right + '0'
|
: '.00'
|
var temp = left
|
.split('')
|
.reverse()
|
.join('')
|
.match(/(\d{1,3})/g)
|
return (
|
(Number(money) < 0 ? '-' : '') +
|
temp
|
.join(',')
|
.split('')
|
.reverse()
|
.join('') +
|
right
|
)
|
} else if (Number(money) === 0) {
|
// 注意===在这里的使用，如果传入的money为0,if中会将其判定为boolean类型，故而要另外做===判断
|
return '0.00'
|
} else {
|
return ''
|
}
|
}
|
},
|
computed: {
|
showColumn() {
|
const { formType, column, clientWidth } = this
|
if (Number(column) !== 0) {
|
return Number(column)
|
}
|
const num = formType === 'search' ? 4 : 3
|
if (clientWidth > 1460) {
|
return num
|
}
|
return num - 1
|
},
|
labelWidth() {
|
const { formType } = this
|
return formType === 'search' ? '84px' : '160px'
|
},
|
showInfo() {
|
const { info, keysSub } = this
|
return Object.keys(info).reduce((pre, key) => {
|
let item = info[key]
|
|
const moneyItem = keysSub.find(({ field }) => field === key)
|
let moneyInfo = {}
|
if (moneyItem) {
|
const { isDesc, isMoney } = moneyItem
|
if (isMoney) {
|
if (typeof item === 'object') {
|
moneyInfo = isDesc
|
? { valueDesc: this.getMoney(item.valueDesc) }
|
: { value: this.getMoney(item.value) }
|
item = { ...item, ...moneyInfo }
|
} else {
|
item = this.getMoney(item)
|
}
|
}
|
}
|
pre[key] = item
|
return pre
|
}, {})
|
},
|
// 过滤显示字段
|
keysSub() {
|
let { info = {}, keys } = this
|
let arr = []
|
if (typeof info !== 'object' || info === null) {
|
return arr
|
}
|
|
if (Object.keys(info).length > 0) {
|
arr = keys.filter(item => {
|
const field = info[item.field]
|
|
// 不存在的字段过滤掉
|
if (typeof field === 'undefined') {
|
return false
|
}
|
|
// 字段值为对象，则通过visible字段判断是否需要展示该字段
|
if (typeof field === 'object' && field !== null) {
|
return typeof field === 'object' && field.visible
|
}
|
return true
|
})
|
}
|
return arr
|
},
|
// 是否是资方查看
|
isCapital() {
|
const { source } = this.$route.query;
|
// 资方查询限制查看权限
|
if(source === 'capital') {
|
return true
|
}
|
return false
|
}
|
}
|
}
|
</script>
|
<style lang="postcss" scoped>
|
.next {
|
padding: 30px 0 0 150px;
|
}
|
.form-content {
|
position: relative;
|
& >>> .el-form-item__content .no-edit {
|
margin: 0;
|
}
|
}
|
.btn {
|
position: absolute;
|
top: -8px;
|
right: 20px;
|
}
|
.btn > .el-button {
|
padding: 8px 12px;
|
border: 1px solid #0081f0;
|
border-radius: 15px;
|
}
|
.list-fileds {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
& li {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
margin: 0;
|
padding: 10px 0 10px 0;
|
width: 33.33%;
|
@media (max-width:1459px){
|
&{
|
width: 50%
|
}
|
}
|
& .label {
|
color: #888;
|
width: 160px;
|
text-align: right;
|
margin-right: 22px;
|
}
|
& .input {
|
width: 220px;
|
word-wrap: break-word;
|
color: #222222;
|
}
|
& p {
|
margin: 0;
|
padding: 0;
|
}
|
&.long {
|
width: 100%;
|
& .input {
|
width: 80%;
|
}
|
}
|
}
|
}
|
|
.form-cols-1 {
|
grid-template-columns: 1fr;
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 1;
|
}
|
& .form-right {
|
grid-column-start: 1;
|
grid-column-end: 1;
|
}
|
}
|
|
.form-cols-2 {
|
grid-template-columns: repeat(2, 1fr);
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 3;
|
}
|
& .form-right {
|
grid-column-start: 2;
|
grid-column-end: 3;
|
}
|
}
|
.form-cols-3 {
|
grid-template-columns: repeat(3, 1fr);
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 4;
|
}
|
& .form-right {
|
grid-column-start: 3;
|
grid-column-end: 4;
|
}
|
}
|
.form-cols-4 {
|
grid-template-columns: repeat(4, 1fr);
|
& .textarea-item {
|
grid-column-start: 1;
|
grid-column-end: 5;
|
}
|
& .form-right {
|
grid-column-start: 4;
|
grid-column-end: 5;
|
}
|
}
|
|
/* .list-fileds {
|
display: flex;
|
flex-wrap: wrap;
|
& li {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
margin: 0;
|
padding: 10px 0 10px 0;
|
& .label {
|
color: #888;
|
width: 124px;
|
text-align: right;
|
margin-right: 22px;
|
}
|
& .input {
|
width: 220px;
|
word-wrap:break-word;
|
color: #222222;
|
}
|
& p {
|
margin: 0;
|
padding: 0;
|
}
|
&.long {
|
width: 100%;
|
& .input {
|
width: 80%;
|
}
|
}
|
}
|
} */
|
</style>
|
