|
|
@@ -0,0 +1,196 @@
|
|
|
+<template>
|
|
|
+ <div class="back-box">
|
|
|
+ <div v-for="item in infolist" :key="item.id" @click="downcheck(item)">
|
|
|
+ <i class="iconfont icon-word" v-if="item.type==='word'"></i>
|
|
|
+ <i class="iconfont icon-excel" v-if="item.type==='excel'"></i>
|
|
|
+ <i class="iconfont icon-ppt" v-if="item.type==='ppt'"></i>
|
|
|
+ <i class="iconfont icon-wenjian" v-if="item.type==='wenjian'"></i>
|
|
|
+ <i class="el-icon-picture" v-if="item.type==='png'"></i>
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.fileName" placement="right" :enterable="false">
|
|
|
+ <span class="tab-long">{{item.fileName}}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ <div class="seedown" v-if="datalist.type===2">
|
|
|
+ <a @click="uploaddown(item)">下载</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="if-box-top" v-if="ifrshow" @keyup.esc="ifrshow=false">
|
|
|
+ <i class="el-icon-close" @click="ifrshow=false"></i>
|
|
|
+ <iframe
|
|
|
+ height="100%"
|
|
|
+ width="100%"
|
|
|
+ :src="srcsc">
|
|
|
+ </iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ props: ['datalist', 'dialogStatus'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ infolist: [],
|
|
|
+ status: false,
|
|
|
+ srcsc: '',
|
|
|
+ ifrshow:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ downcheck(v) {
|
|
|
+ if (this.datalist.type === 1) {
|
|
|
+ this.uploaddown(v);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadsee(v) {
|
|
|
+ let url = encodeURIComponent(v.callPath);
|
|
|
+ this.srcsc = 'http://114.215.71.182:8012/onlinePreview?url=' + url;
|
|
|
+ this.ifrshow=true;
|
|
|
+ // window.open('http://114.215.71.182:8012/onlinePreview?url=' + url);
|
|
|
+ },
|
|
|
+ //下载e
|
|
|
+ uploaddown(v) {
|
|
|
+ let fileData = v;
|
|
|
+ this.$http({
|
|
|
+ url: this.datalist.url,
|
|
|
+ method: "post",
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ },
|
|
|
+ responseType: "blob",
|
|
|
+ data: {"id": fileData.id, "fileName": fileData.fileName},
|
|
|
+ }).then((response) => {
|
|
|
+ if (window.navigator && window.navigator.msSaveOrOpenBlob) {
|
|
|
+ let blob = new Blob([response.data], {
|
|
|
+ type: 'application/vnd.ms-excel'
|
|
|
+ });
|
|
|
+ window.navigator.msSaveOrOpenBlob(blob, fileData.fileName);
|
|
|
+ } else {
|
|
|
+ /* 火狐谷歌的文件下载方式 */
|
|
|
+ var blob = new Blob([response.data])
|
|
|
+ var downloadElement = document.createElement('a')
|
|
|
+ var href = window.URL.createObjectURL(blob);
|
|
|
+ downloadElement.href = href;
|
|
|
+ downloadElement.download = fileData.fileName;
|
|
|
+ document.body.appendChild(downloadElement);
|
|
|
+ downloadElement.click();
|
|
|
+ document.body.removeChild(downloadElement);
|
|
|
+ window.URL.revokeObjectURL(href);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ dataHandle() {
|
|
|
+ this.infolist = this.datalist.attList;
|
|
|
+ if (this.infolist) {
|
|
|
+ for (let i = 0; i < this.infolist.length; i++) {
|
|
|
+ let f = this.infolist[i].fileName.split(".");
|
|
|
+ let type = f[f.length - 1];
|
|
|
+ if (type === 'doc' || type === 'docx') {
|
|
|
+ this.infolist[i].type = 'word';
|
|
|
+ } else if (type === 'ppt') {
|
|
|
+ this.infolist[i].type = 'ppt';
|
|
|
+ } else if (type === 'xlsx' || type === 'xls') {
|
|
|
+ this.infolist[i].type = 'excel';
|
|
|
+ } else if (type === 'png' || type === 'jpg' || type === 'svg' || type === 'gif' || type === 'psd') {
|
|
|
+ this.infolist[i].type = 'png';
|
|
|
+ } else {
|
|
|
+ this.infolist[i].type = 'wenjian';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.dataHandle();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ dialogStatus() {
|
|
|
+ this.$forceUpdate()
|
|
|
+ let _this = this;
|
|
|
+ _this.dataHandle();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+ .if-box-top{
|
|
|
+ background: #fff;
|
|
|
+ width: 80vw;
|
|
|
+ height: 80vh;
|
|
|
+ margin-top: 10vh;
|
|
|
+ margin-left: 10vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 42px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-excel {
|
|
|
+ color: #67DB63;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-word {
|
|
|
+ color: #FF654E;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-ppt {
|
|
|
+ color: #FF8943;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-wenjian {
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-picture {
|
|
|
+ font-size: 36px;
|
|
|
+ color: #ccc;
|
|
|
+ background: #fff;
|
|
|
+ padding: 4px 2px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back-box {
|
|
|
+ margin-top: 20px;
|
|
|
+ background: #F2F2F2;
|
|
|
+ padding: 20px;
|
|
|
+
|
|
|
+ div {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ width: 80px;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-top: 5px;
|
|
|
+ margin: 0 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
|
|
|
+ -webkit-line-clamp: 1; /* 控制最多显示几行 */
|
|
|
+ -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .seedown {
|
|
|
+ margin: 0;
|
|
|
+ margin-top: 5px;
|
|
|
+
|
|
|
+ a {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 2px 5px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ a:hover {
|
|
|
+ color: #0b82ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
sphinx