<template>
|
<view class="view-data-dataobj-page">
|
<uni-collapse>
|
<uni-collapse-item :open="group.open" titleBorder="none" v-for="(group,index) in viewList"
|
:key="group.name">
|
<template v-slot:title>
|
<text class="uni-title-icon"><text class="uni-icon fs-mobox_log"></text></text>
|
<text>{{group.name}}</text>
|
</template>
|
<view class="uni-panel-line" v-for="(item) in group.list" :key="item.attr"
|
:class="(item.hidden == true || item.hidden == 'True') ? 'uni-hidden' :''">
|
<text class="uni-panel-name">{{item.name}}:</text>
|
<text class="uni-panel-value">{{item.value}}</text>
|
</view>
|
|
</uni-collapse-item>
|
<uni-collapse-item :open="true" titleBorder="none">
|
<template v-slot:title>
|
<text class="uni-title-icon" :style="{ backgroundColor: '#aaa' }"><text
|
class="uni-icon fs-attach"></text></text>
|
<text class="uni-title-text">附件</text>
|
</template>
|
<view class="uni-panel-upfile">
|
<view class="uni-panel-upfile-item" v-for="(item,index) in attachList"
|
:style="{background:item.color}" :key="index" @click="readClassAttach(item)">
|
<view v-if="!(item.isImg|| item.isVideo) || (( item.isImg) && !item.path)"
|
class="uni-panel-upfile-item-name">{{item.FileName}}</view>
|
<text v-if="!(item.isImg || item.isVideo)"
|
class="uni-panel-upfile-item-size">{{item.size}}</text>
|
<image v-if="(item.isImg && item.path) && !item.isVideo" class="uni-panel-upfile-img"
|
:src="item.path" mode="widthFix" />
|
<!-- <image v-if="item.isVideo" class="uni-panel-video-playIcon" src="@/static/play.png" mode="widthFix"></image> -->
|
<jvideo v-if="item.isVideo&& item.path" :url="item.path" width="192rpx" height="192rpx"
|
:len="10"></jvideo>
|
<text v-if="item.errMsg" class="uni-panel-icon fs-wrong"
|
style="position: absolute; bottom:5rpx; right: 5rpx; color: #fd3c46;"
|
@click="onErrInfo(item.errMsg)"></text>
|
<!-- #ifdef MP-WEIXIN -->
|
<circleProgressBar v-if="item.isTransferring"
|
style="position: absolute; top: 50rpx; left: 50rpx;" :size="100" :border_width="16"
|
border_back_color='#ccc' background='#ffffff80' :pro="item.percent/100" />
|
<!-- #endif-->
|
</view>
|
</view>
|
|
</uni-collapse-item>
|
</uni-collapse>
|
</view>
|
</template>
|
|
<script>
|
import TaskInit from "@/common/extend.js"
|
import {
|
showModal,
|
showToast,
|
showLoading,
|
hideLoading
|
} from "@/common/Page.js"
|
import extendUtil from "@/common/extend.js"
|
import dataObjItem from "@/components/dataobj-item.vue"
|
// import {
|
// getClassAttr,
|
// getClsUIStyleInfo,
|
// getClassAttrAttach,
|
// getFileUrlS
|
// } from "@/common/api/app.js"
|
import jvideo from '@/components/j-video.vue'
|
import circleProgressBar from '@/components/circle-progress-bar/circle-progress-bar.vue'
|
export default {
|
name: "pageDataDataObjPage",
|
components: {
|
jvideo,
|
circleProgressBar,
|
},
|
data() {
|
return {
|
viewShowStyle: [],
|
viewList: [],
|
attachList: [],
|
safeAreaBottom: getApp().globalData.safeAreaBottom,
|
}
|
},
|
methods: {
|
setData: function(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
async loadData() {
|
var _this = this;
|
try {
|
const info = await getClsUIStyleInfo(_this.options.clsId, 2, _this.options.viewName)
|
_this.viewShowStyle = info.StyleDef.show_style
|
const clsAttr = await getClassAttr(_this.options.clsId, _this.options.objId)
|
const objAttr = clsAttr.ObjAttr || []
|
const clsAttrAttach = await getClassAttrAttach(_this.options.clsId, _this.options.objId)
|
|
|
const list = []
|
_this.viewShowStyle.forEach((ele, index) => {
|
const group = {
|
open: ele.open,
|
name: ele.attrgroup_name,
|
list: []
|
}
|
ele.attrs.forEach((attr) => {
|
const node = {
|
attr: attr.attr,
|
name: attr.name,
|
value: "",
|
hidden: attr.hidden,
|
}
|
let curIndex = objAttr.findIndex((obj, index, arr2) => {
|
return obj.Name == attr.attr;
|
})
|
if (curIndex > -1) {
|
node.value = objAttr[curIndex].Value
|
}
|
group.list.push(node)
|
})
|
list.push(group)
|
})
|
clsAttrAttach.forEach((ele, index) => {
|
if (TaskInit.fileUtils.isPictureType(ele.FileName)) //文档
|
{
|
ele.isImg = true
|
}
|
if (TaskInit.fileUtils.isVideoType(ele.FileName)) //文档
|
{
|
ele.isVideo = true
|
}
|
ele.size = TaskInit.fileUtils.getFileSizeStr(ele.FileSize)
|
ele.color = TaskInit.fileUtils.getTypeBgColor(ele.FileName)
|
ele.path = ele.Url
|
|
})
|
console.log(`dataObjPage loadData`, list);
|
_this.setData({
|
viewList: list,
|
attachList: clsAttrAttach
|
})
|
} catch (ex) {
|
let tip = typeof ex == "string" ? ex : ex.message;
|
console.log(`装载显示数据信息失败`, ex);
|
showModal(tip, "出错", false, false)
|
}
|
},
|
getImgsUrl() {
|
let imgs = []
|
this.attachList.forEach((item, index) => {
|
if (item.isImg && item.path) {
|
imgs.push(item.path)
|
}
|
})
|
return imgs
|
},
|
readClassAttach(item) {
|
var _this = this
|
if (!item.Url && !item.FileID) {
|
showToast("无法查看失败文件", "none")
|
return
|
}
|
if (!TaskInit.fileUtils.isCanPreviewType(item.FileName)) //文档
|
{
|
showToast("暂不支持此类型查看", "none")
|
return
|
}
|
if (TaskInit.fileUtils.isPictureType(item.FileName)) //图片
|
{
|
if (item.path) {
|
let arrImg = _this.getImgsUrl();
|
uni.previewImage({
|
current: item.path,
|
urls: arrImg,
|
})
|
return
|
}
|
_this.dldAndPreviewImg(item)
|
return
|
}
|
if (item.path) {
|
if (TaskInit.fileUtils.isDocumentType(item.FileName)) //文档
|
{
|
let aaa = item.FileName.toLowerCase().split('.');
|
let ftype = aaa.length > 0 ? aaa[aaa.length - 1] : aaa[0];
|
uni.openDocument({
|
filePath: item.path,
|
fileType: ftype,
|
success: function(res) {
|
|
console.log('打开文档成功');
|
},
|
fail: function(res) {
|
console.log('openDocument fail:', item.path, res.errMsg)
|
|
showToast("暂不支持此类型‘"+ftype+"’查看" ,"none",5000)
|
//showModal(item.path, '打开错误',false)
|
}
|
})
|
}
|
return
|
}
|
if (TaskInit.fileUtils.isVideoType(item.FileName)) //文档
|
{
|
getFileUrlS(item.FileID, item.FileServer, item.FileName).then((res) => {
|
console.log('getFileUrlS success:', res)
|
if (res.indexOf("file not exsits") < 0) {
|
const app = getApp()
|
if (res.indexOf("http://") < 0 && res.indexOf("https://") < 0)
|
res = app.globalData.basehttpurl + res
|
item.path = res
|
uni.navigateTo({
|
url: "/pages/common/videoPage?fileId=" + item.FileID +
|
"&fileServer=" + item.FileServer + "&name=" + item
|
.FileName + "&url=" + encodeURIComponent(item.path)
|
})
|
}
|
}).catch((rej) => {
|
console.log('getFileUrlS fail:', rej);
|
showModal(rej, '错误', false)
|
})
|
return
|
}
|
|
getFileUrlS(item.FileID, item.FileServer, item.FileName).then((res) => {
|
console.log('getFileUrlS success:', res);
|
if (res.indexOf("file not exsits") < 0) {
|
showLoading("正在下载，请稍后...")
|
const app = getApp()
|
if (res.indexOf("http://") < 0 && res.indexOf("https://") < 0)
|
res = app.globalData.basehttpurl + res
|
downloadTaskFile(item.url, res, function(docSuccess) {
|
hideLoading()
|
console.log('下载成功', docSuccess.path);
|
item.path = docSuccess.path
|
_this.setAttachDownFinsh(false, docSuccess.url);
|
//showModal(docSuccess.path+ "，fileType：" +item.FileName.split('.').pop().toLowerCase() , '错误',false)
|
let aaa = item.FileName.toLowerCase().split('.');
|
let ftype = aaa.length > 0 ? aaa[aaa.length - 1] : aaa[0];
|
uni.openDocument({
|
filePath: docSuccess.path,
|
fileType: ftype,
|
success: function(res) {
|
console.log('打开文档成功');
|
},
|
fail: function(res) {
|
console.log('openDocument fail:', item.path, res.errMsg)
|
showToast("暂不支持此类型‘"+ftype+"’查看" ,"none",5000)
|
//showModal(docSuccess.path, '打开错误',false)
|
}
|
})
|
}, function(docProgress, downloadTask) {
|
_this.setAttachProgress(docProgress.url, docProgress.progress,
|
downloadTask);
|
}, function(docFail) {
|
|
hideLoading()
|
_this.setAttachDownFinsh(false, docFail.url);
|
showModal(docFail.errMsg, '错误', false)
|
})
|
} else {
|
showModal(res, '错误', false)
|
}
|
}).catch((rej) => {
|
console.log('getFileUrlS fail:', rej);
|
showModal(rej, '错误', false)
|
})
|
},
|
dldAndPreviewImg(item) {
|
var _this = this
|
getFileUrlS(item.FileID, item.FileServer, item.FileName).then((res) => {
|
console.log('getFileUrlS success:', res); //item.FileID,item.FileServer
|
if (res.indexOf("file not exsits") < 0) {
|
const app = getApp()
|
if (res.indexOf("http://") < 0 && res.indexOf("https://") < 0)
|
res = app.globalData.basehttpurl + res
|
item.path = res
|
_this.setAttachDownFinsh(false, docSuccess.url);
|
let arrImg = _this.getImgsUrl();
|
uni.previewImage({
|
current: res,
|
urls: arrImg,
|
})
|
return;
|
|
} else {
|
showModal(res, '错误', false)
|
}
|
}).catch((rej) => {
|
console.log('getFileUrlS fail:', rej);
|
showModal(rej, '错误', false)
|
})
|
},
|
setAttachProgress(isImg, url, percent, transTask) {
|
var _this = this
|
let attachs = this.attachList;
|
|
if (attachs.length == 0) {
|
return;
|
}
|
let curIndex = attachs.findIndex((item, index, arr) => {
|
return item.Url == url;
|
})
|
if (curIndex == -1) {
|
transTask.abort();
|
return;
|
}
|
|
let attachItem = attachs[curIndex]
|
attachItem.percent = percent
|
attachItem.isTransferring = true
|
attachs[curIndex] = attachItem;
|
_this.setData({
|
attachList: attachs
|
})
|
},
|
|
setAttachFailed(isImg, url, errMsg) {
|
var _this = this
|
let attachs = this.attachList;
|
if (attachs.length == 0) {
|
return;
|
}
|
let curIndex = attachs.findIndex((item, index, arr) => {
|
return item.Url == url;
|
})
|
if (curIndex == -1) {
|
return;
|
}
|
let attachItem = attachs[curIndex]
|
attachItem.isTransferring = false
|
attachItem.errMsg = errMsg
|
attachs[curIndex] = attachItem;
|
_this.setData({
|
attachList: attachs
|
})
|
},
|
setAttachDownFinsh(isImg, url) {
|
var _this = this
|
let attachs = this.attachList;
|
if (attachs.length == 0) {
|
return;
|
}
|
let curIndex = attachs.findIndex((item, index, arr) => {
|
return item.Url == url;
|
})
|
if (curIndex == -1) {
|
return;
|
}
|
let attachItem = attachs[curIndex]
|
attachItem.isTransferring = false
|
attachs[curIndex] = attachItem;
|
_this.setData({
|
attachList: attachs
|
})
|
},
|
showError(ex) {
|
let tip = typeof ex == 'string' ? ex : typeof ex.err_msg == 'string' ? ex.err_msg : typeof ex.errMsg ==
|
'string' ? ex.errMsg : ""
|
showModal(tip, "提示", false)
|
},
|
},
|
onLoad(option) {
|
this.options = option
|
// #ifdef MP-DINGTALK
|
|
my.setNavigationBar({
|
backgroundColor: "#007AFF",
|
frontColor: "#ffffff"
|
})
|
// #endif
|
uni.setNavigationBarTitle({
|
title: this.options.title || "数据信息"
|
})
|
this.loadData()
|
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.view-data-dataobj-page {
|
|
background-color: #e5eaee;
|
width: calc(750rpx - 10px);
|
height: calc(100vh - 10px);
|
padding: 5px;
|
|
.uni-collapse {
|
background-color: #e5eaee;
|
|
.uni-collapse-item {
|
border-radius: 8px;
|
background-color: #fff;
|
padding-bottom: 5px;
|
|
}
|
|
}
|
|
.uni-title-icon {
|
background-color: #ffdd00;
|
border-radius: 50%;
|
width: 36px;
|
height: 36px;
|
margin: 5px;
|
margin-right: 12px;
|
display: inline-block;
|
vertical-align: middle;
|
text-align: center;
|
line-height: 40px;
|
|
.uni-icon {
|
color: #fff;
|
font-size: 20px
|
}
|
|
}
|
|
.uni-hidden {
|
display: none !important;
|
}
|
|
.uni-panel-line {
|
width: 100%;
|
margin: 4px;
|
padding: 4px;
|
display: flex;
|
|
.uni-panel-name {
|
width: 100px;
|
line-height: 20px;
|
margin: 4px;
|
text-align: right;
|
}
|
|
.uni-panel-value {
|
width: calc(100% - 105px);
|
line-height: 20px;
|
margin: 4px;
|
color: #007aff;
|
}
|
}
|
|
.uni-panel-upfile {
|
display: flex;
|
flex-wrap: wrap;
|
flex-direction: row !important;
|
padding: 5px;
|
|
.uni-panel-upfile-item {
|
display: flex;
|
position: relative;
|
margin: 2rpx;
|
height: 200rpx;
|
width: 30%;
|
flex-direction: column;
|
padding: 4px;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.uni-panel-upfile-img {
|
display: flex;
|
height: 100%;
|
width: 100%;
|
}
|
|
.uni-panel-video-playIcon {
|
display: flex;
|
flex: 1;
|
width: 50%;
|
}
|
|
.uni-panel-upfile-item-name {
|
display: flex;
|
flex: 1;
|
color: #fff;
|
width: 100%;
|
word-wrap: break-word;
|
word-break: break-all;
|
font-size: 14px;
|
max-height: calc(200rpx - 20px);
|
text-overflow: ellipsis;
|
overflow: hidden;
|
-webkit-line-clamp: 4; //表明是2行文本显示省略号，换成3则表明是3行文本显示省略号
|
-webkit-box-orient: vertical;
|
}
|
|
.uni-panel-upfile-item-size {
|
display: flex;
|
height: 18px;
|
color: #fff;
|
font-size: 14px;
|
text-align: left;
|
}
|
|
.uni-panel-icon {
|
font-weight: normal;
|
font-size: 16px;
|
padding: 4px;
|
}
|
|
|
}
|
|
}
|
</style>
|
