4 changed files with 235 additions and 36 deletions
@ -0,0 +1,184 @@ |
|||
<template> |
|||
<el-descriptions |
|||
class="currenDescriptionsPage" |
|||
:title="title" |
|||
:column="column" |
|||
:direction="direction" |
|||
:colon="colon" |
|||
:border="border" |
|||
v-loading="currenDescriptionsLoading" |
|||
> |
|||
<template> |
|||
<el-descriptions-item |
|||
:label="item.label" |
|||
v-for="(item, index) in tabsDesTions" |
|||
:key="index" |
|||
:labelStyle="{'text-align': 'right','padding-right':'10px'}" |
|||
> |
|||
<span v-if="item.type && item.type == 'date'">{{ |
|||
propsData[item.prop] | formatOnlyDate |
|||
}}</span> |
|||
<span v-else-if="item.type && item.type == 'dateTime'">{{ |
|||
propsData[item.prop] | formatDate |
|||
}}</span> |
|||
<span v-else-if="item.type && item.type == 'objectDateTime'">{{ |
|||
propsData[item.prop]?propsData[item.prop][item.showProp]:"" | formatDate |
|||
}}</span> |
|||
<span v-else-if="item.type && item.type == 'object'"> |
|||
{{ propsData[item.prop]?propsData[item.prop][item.showProp]:"" }} |
|||
</span> |
|||
<span v-else-if="item.type && item.type == 'filter'"> |
|||
{{ propsData[item.prop] | trigger(item.filters,"label", item.dictType) }} |
|||
</span> |
|||
<span v-else-if="item.type && item.type == 'objectFilter'"> |
|||
{{ propsData[item.prop]?propsData[item.prop][item.showProp]:false | trigger(item.filters,"label") }} |
|||
</span> |
|||
<span v-else-if="item.type && item.type == 'percent'"> |
|||
{{ propsData[item.prop] +'%' }} |
|||
</span> |
|||
<span v-else-if="item.type && item.type == 'uploadPictureCard'"> |
|||
<div id="uploadPictureCardRef">{{propsData[item.prop] | formatDatePicture}}</div> |
|||
</span> |
|||
<span v-else-if="item.type == 'filterList'" > |
|||
{{ propsData[item.prop] | triggerList(item.filters, "label") }} |
|||
</span> |
|||
<!-- 文本域 --> |
|||
<span v-else-if="item.type == 'textarea'"> |
|||
<template> |
|||
<el-input |
|||
:type="item.type" |
|||
v-model="propsData[item.prop]" |
|||
:rows="item.rows" |
|||
:readonly="item.readonly" |
|||
></el-input> |
|||
</template> |
|||
</span> |
|||
<span v-else>{{ propsData[item.prop] ? propsData[item.prop] + "" : propsData[item.prop] }}</span> |
|||
</el-descriptions-item> |
|||
</template> |
|||
<el-descriptions-item |
|||
v-for="item in descriptionsData" |
|||
:label="item.label" |
|||
:key="item.label" |
|||
>{{ item.data }}</el-descriptions-item |
|||
> |
|||
<slot></slot> |
|||
</el-descriptions> |
|||
</template> |
|||
<script> |
|||
import { parseTime } from "@/utils/formatTime" |
|||
import { formatTimeStrToStr } from "@/utils/formatTime" |
|||
import { fileStorage } from "@/api/wms-api" |
|||
|
|||
let that |
|||
export default { |
|||
name:'curren-descriptions', |
|||
data () { |
|||
return { |
|||
// 临时存储文件编号 防止重复请求图片 |
|||
blobName: '', |
|||
currenDescriptionsLoading: false |
|||
} |
|||
}, |
|||
mounted(){ |
|||
console.log(85,this.tabsDesTions) |
|||
}, |
|||
beforeCreate () { |
|||
that = this; |
|||
}, |
|||
filters: { |
|||
formatDate (time) { |
|||
if (time == null) { |
|||
return '-' |
|||
} |
|||
return formatTimeStrToStr(time) |
|||
}, |
|||
formatOnlyDate (time) { |
|||
var date = new Date(time); |
|||
return parseTime(date).substring(0,10) |
|||
}, |
|||
formatDatePicture(val) { |
|||
if (val !== undefined && that.blobName !== val) { |
|||
that.blobName = val |
|||
that.currenDescriptionsLoading = true |
|||
fileStorage({blobName: val}).then(res => { |
|||
var byteString = atob(res.bytes) |
|||
var arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组 |
|||
var intArray = new Uint8Array(arrayBuffer) // 创建视图 |
|||
for (var i = 0; i < byteString.length; i++) { |
|||
intArray[i] = byteString.charCodeAt(i) |
|||
} |
|||
const blob = new Blob([intArray], { type: '' }) |
|||
var img = new Image() |
|||
img.width="100" |
|||
img.height="100" |
|||
img.src = URL.createObjectURL(blob) |
|||
var otest = document.getElementById("uploadPictureCardRef") |
|||
otest.innerHTML = '' |
|||
otest.appendChild(img) |
|||
that.currenDescriptionsLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
that.currenDescriptionsLoading = false |
|||
}) |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
colon: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
column: { |
|||
type: Number, |
|||
default: 1 |
|||
}, |
|||
border: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
descriptionsData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
direction: { |
|||
type: String, |
|||
default: 'horizontal' |
|||
}, |
|||
tabsDesTions: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
propsData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.currenDescriptionsPage{ |
|||
th{ |
|||
min-width: 200px !important; |
|||
width: auto; |
|||
} |
|||
td{ |
|||
span{ |
|||
display: inline-block; |
|||
max-height: 150px; |
|||
overflow: auto; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue