安虹睿
1 year ago
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