|
@@ -1,196 +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>
|
|
|
+ <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>
|
|
|
+ <span class="tab-long">{{ item.fileName }}</span>
|
|
|
</el-tooltip>
|
|
|
- <div class="seedown" v-if="datalist.type===2">
|
|
|
+ <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">
|
|
|
+ <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,
|
|
|
+import getConfig from '../config/dev.js'
|
|
|
+export default {
|
|
|
+ props: ['datalist', 'dialogStatus'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ infolist: [],
|
|
|
+ status: false,
|
|
|
+ srcsc: '',
|
|
|
+ ifrshow: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ downcheck(v) {
|
|
|
+ if (this.datalist.type === 1) {
|
|
|
+ this.uploaddown(v);
|
|
|
}
|
|
|
},
|
|
|
- methods: {
|
|
|
- downcheck(v) {
|
|
|
- if (this.datalist.type === 1) {
|
|
|
- this.uploaddown(v);
|
|
|
+ uploadsee(v) {
|
|
|
+ let url = encodeURIComponent(Base64.encode(v.callPath));
|
|
|
+ this.srcsc = getConfig().KNOWLEDGE_URL + '/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);
|
|
|
}
|
|
|
- },
|
|
|
- uploadsee(v) {
|
|
|
- let url = encodeURIComponent(Base64.encode(v.callPath));
|
|
|
- this.srcsc = 'http://10.230.15.228: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);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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 {
|
|
|
- /* 火狐谷歌的文件下载方式 */
|
|
|
- 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';
|
|
|
- }
|
|
|
+ this.infolist[i].type = 'wenjian';
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- mounted() {
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.dataHandle();
|
|
|
- },
|
|
|
- watch: {
|
|
|
- dialogStatus() {
|
|
|
- this.$forceUpdate()
|
|
|
- let _this = this;
|
|
|
- _this.dataHandle();
|
|
|
- }
|
|
|
+ },
|
|
|
+ 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;
|
|
|
- }
|
|
|
+.if-box-top {
|
|
|
+ background: #fff;
|
|
|
+ width: 80vw;
|
|
|
+ height: 80vh;
|
|
|
+ margin-top: 10vh;
|
|
|
+ margin-left: 10vw;
|
|
|
+}
|
|
|
|
|
|
- .iconfont {
|
|
|
- font-size: 42px;
|
|
|
- }
|
|
|
+.iconfont {
|
|
|
+ font-size: 42px;
|
|
|
+}
|
|
|
|
|
|
- .icon-excel {
|
|
|
- color: #67DB63;
|
|
|
- }
|
|
|
+.icon-excel {
|
|
|
+ color: #67DB63;
|
|
|
+}
|
|
|
|
|
|
- .icon-word {
|
|
|
- color: #FF654E;
|
|
|
- }
|
|
|
+.icon-word {
|
|
|
+ color: #FF654E;
|
|
|
+}
|
|
|
|
|
|
- .icon-ppt {
|
|
|
- color: #FF8943;
|
|
|
- }
|
|
|
+.icon-ppt {
|
|
|
+ color: #FF8943;
|
|
|
+}
|
|
|
|
|
|
- .icon-wenjian {
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
+.icon-wenjian {
|
|
|
+ color: #ccc;
|
|
|
+}
|
|
|
|
|
|
- .el-icon-picture {
|
|
|
- font-size: 36px;
|
|
|
- color: #ccc;
|
|
|
- background: #fff;
|
|
|
- padding: 4px 2px;
|
|
|
- margin-bottom: 2px;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
+.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;
|
|
|
+.back-box {
|
|
|
+ margin-top: 20px;
|
|
|
+ background: #F2F2F2;
|
|
|
+ padding: 20px;
|
|
|
|
|
|
- div {
|
|
|
- display: inline-block;
|
|
|
- text-align: center;
|
|
|
- margin-right: 20px;
|
|
|
- cursor: pointer;
|
|
|
+ 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; /* 设置或检索伸缩盒对象的子元素的排列方式 */
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ .seedown {
|
|
|
+ margin: 0;
|
|
|
+ margin-top: 5px;
|
|
|
|
|
|
- a {
|
|
|
- font-size: 12px;
|
|
|
- padding: 2px 5px;
|
|
|
- border: 1px solid transparent;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
+ a {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 2px 5px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
|
|
|
- a:hover {
|
|
|
- color: #0b82ff;
|
|
|
- }
|
|
|
+ a:hover {
|
|
|
+ color: #0b82ff;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+}
|
|
|
</style>
|