刘湘琪 2 anni fa
parent
commit
f3d7a5a355

+ 0 - 129
src/views/enterprise/declare/components/EnclosureInfo.vue

@@ -51,7 +51,6 @@
 
 <script>
   import axios from 'axios'
-  let docx = require('docx-preview')
   import {getEnclosureApi,deleteEnclosureApi,getProjectInfoApi,getProjectInfoCommonApi} from '@/api/enterprise/project/project'
   // 先导入getLodop方法
   import { getLodop } from "@/plugins/lodopFuncs"
@@ -165,25 +164,6 @@
         	})
         })
       },
-      // 查看
-      handleView(row) {
-
-        // window.open(
-        //   `https://view.officeapps.live.com/op/view.aspx?src=${row.url}`
-        // );
-
-        // let fileUrl = row.url
-        // let url = encodeURIComponent(fileUrl)
-        // let officeUrl = "https://view.xdocin.com/view?src=" + url
-        // window.open(officeUrl, '_target')
-        axios({
-          method: 'get',
-          responseType: 'blob',
-          url: "http://124.232.146.72:7015/api/common/attach/"+row.id
-        }).then(({data}) => {
-          docx.renderAsync(data, this.$refs.file)
-        })
-      },
       handleDelete(row) {
         const id = row.id;
         this.$confirm('是否确认删除该数据?', "警告", {
@@ -340,115 +320,6 @@
 </script>
 
 <style scoped>
-.banner {
-  overflow: auto;
-  text-align: center;
-  background-color: #12b6ff;
-  color: #fff;
-}
-
-.hidden .banner {
-  display: none;
-}
-
-.hidden .well {
-  height: calc(100vh - 12px);
-}
-
-.overlay {
-  position: absolute;
-  transition: all;
-  z-index: 1000;
-  opacity: 0.4;
-  top: 50px;
-  left: 112px;
-  padding: 20px;
-  border-radius: 5px;
-  background: white;
-  border: 1px solid silver;
-}
 
-.overlay:hover {
-  opacity: 1;
-}
-
-.file-select {
-  position: absolute;
-  left: 5%;
-  line-height: 35px;
-  margin-left: 20px;
-}
-
-.banner a {
-  color: #fff;
-  text-decoration: none;
-}
-
-.banner h1 {
-  font-size: 20px;
-  line-height: 2;
-  margin: 0.5em 0;
-}
-
-.well {
-  display: block;
-  background-color: #f2f2f2;
-  border: 1px solid #ccc;
-  margin: 5px;
-  width: calc(100% - 12px);
-  height: calc(100vh - 73px);
-  overflow: auto;
-}
-
-.loading {
-  text-align: center;
-  padding-top: 50px;
-}
-
-.file-select button {
-  background: #fafafa;
-}
-
-.overlay button {
-  background: #12b6ff;
-  color: white;
-}
-
-.overlay input[type="text"] {
-  line-height: 19px;
-  height: 30px;
-  width: 300px;
-  outline: none;
-  border: 1px solid silver;
-  border-radius: 6px;
-  margin-right: 10px;
-}
-
-.overlay input[type="file"] {
-  position: absolute;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: 2;
-  cursor: pointer;
-}
-
-.upload-cover {
-  z-index: 1;
-  pointer-events: none;
-  color: black;
-}
-
-.messages .warning {
-  color: #cc6600;
-}
 </style>
 
-<style>
-.pptx-wrapper {
-  max-width: 1000px;
-  margin: 0 auto;
-}
-</style>

+ 62 - 5
src/views/enterprise/project/components/EnclosureInfo.vue

@@ -24,12 +24,19 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"/>
     <upload-enclosure ref="uploadEnclosure" v-if="enclosureVisible" @refreshData="getList()" :dataId="dataId" :attachType="'PROJECT'"></upload-enclosure>
+    <div class="container" style="margin-top: 20px;">
+      <div v-show="loading" class="well loading">正在加载中,请耐心等待...</div>
+      <div v-show="!loading" class="well" ref="output"></div>
+    </div>
   </div>
 </template>
 
 <script>
   import {getEnclosureApi,deleteEnclosureApi,getProjectInfoApi,getProjectInfoCommonApi} from '@/api/enterprise/project/project'
   import UploadEnclosure from './UploadEnclosure'
+  import { getExtend, readBuffer, render } from '@/utils/util';
+  import { parse } from 'qs';
+  import axios from 'axios'
   export default {
     components: {
       UploadEnclosure
@@ -117,12 +124,62 @@
         	})
         })
       },
-      // 查看
+      // 从url加载
       handleView(row) {
-        let fileUrl = row.url
-        let url = encodeURIComponent(fileUrl)
-        let officeUrl = 'https://view.xdocin.com/view?src='+url
-        window.open(officeUrl, '_target')
+        this.loading = true;
+        // 要预览的文件地址
+        const { url } = row.url;
+        const filename = row.fileName
+        // const filename = url.substr(url.lastIndexOf('/') + 1);
+        // 拼接iframe请求url
+        axios({
+          url: "http://124.232.146.72:7015/api/common/attach/"+row.id,
+          method: 'get',
+          responseType: 'blob',
+        }).then(({ data }) => {
+          if (!data) {
+            console.error('文件下载失败');
+          }
+          const file = new File([ data ], filename, {});
+          this.handleChange({ target: { files: [ file ] } });
+        }).finally(() => {
+          this.loading = false;
+        })
+      },
+      async handleChange(e) {
+        this.loading = true;
+        try {
+          const [ file ] = e.target.files;
+          this.filename = file.name && decodeURIComponent(file.name) || '';
+          const arrayBuffer = await readBuffer(file);
+          this.loading = false
+          this.last = await this.displayResult(arrayBuffer, file)
+          console.log("last")
+          console.log(this.last)
+        } catch (e) {
+          console.error(e)
+        } finally {
+          this.loading = false
+        }
+      },
+      displayResult(buffer, file) {
+        // 取得文件名
+        const { name } = file;
+        // 取得扩展名
+        const extend = getExtend(name);
+        // 输出目的地
+        const { output } = this.$refs;
+        // 生成新的dom
+        const node = document.createElement('div');
+        // 添加孩子,防止vue实例替换dom元素
+        if (this.last) {
+          output.removeChild(this.last.$el);
+          this.last.$destroy();
+        }
+        const child = output.appendChild(node);
+        // 调用渲染方法进行渲染
+        return new Promise((resolve, reject) => render(buffer, extend, child)
+            .then(resolve).catch(reject));
       },
       handleDelete(row) {
         const id = row.id;

+ 62 - 4
src/views/enterprise/project/components/EntEnclosure.vue

@@ -26,12 +26,19 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"/>
     <upload-enclosure ref="uploadEnclosure" v-if="enclosureVisible" @refreshData="getList()" :dataId="dataId" :attachType="'PROJECT'"></upload-enclosure>
+    <div class="container" style="margin-top: 20px;">
+      <div v-show="loading" class="well loading">正在加载中,请耐心等待...</div>
+      <div v-show="!loading" class="well" ref="output"></div>
+    </div>
   </div>
 </template>
 
 <script>
   import {getEnclosureApi,deleteEnclosureApi,getProjectInfoApi} from '@/api/enterprise/project/project'
   import UploadEnclosure from './UploadEnclosure'
+  import { getExtend, readBuffer, render } from '@/utils/util';
+  import { parse } from 'qs';
+  import axios from 'axios'
   export default {
     components: {
       UploadEnclosure
@@ -110,11 +117,62 @@
         	})
         })
       },
+      // 从url加载
       handleView(row) {
-        let fileUrl = row.url
-        let url = encodeURIComponent(fileUrl)
-        let officeUrl = 'https://view.xdocin.com/view?src='+url
-        window.open(officeUrl, '_target')
+        this.loading = true;
+        // 要预览的文件地址
+        const { url } = row.url;
+        const filename = row.fileName
+        // const filename = url.substr(url.lastIndexOf('/') + 1);
+        // 拼接iframe请求url
+        axios({
+          url: "http://124.232.146.72:7015/api/common/attach/"+row.id,
+          method: 'get',
+          responseType: 'blob',
+        }).then(({ data }) => {
+          if (!data) {
+            console.error('文件下载失败');
+          }
+          const file = new File([ data ], filename, {});
+          this.handleChange({ target: { files: [ file ] } });
+        }).finally(() => {
+          this.loading = false;
+        })
+      },
+      async handleChange(e) {
+        this.loading = true;
+        try {
+          const [ file ] = e.target.files;
+          this.filename = file.name && decodeURIComponent(file.name) || '';
+          const arrayBuffer = await readBuffer(file);
+          this.loading = false
+          this.last = await this.displayResult(arrayBuffer, file)
+          console.log("last")
+          console.log(this.last)
+        } catch (e) {
+          console.error(e)
+        } finally {
+          this.loading = false
+        }
+      },
+      displayResult(buffer, file) {
+        // 取得文件名
+        const { name } = file;
+        // 取得扩展名
+        const extend = getExtend(name);
+        // 输出目的地
+        const { output } = this.$refs;
+        // 生成新的dom
+        const node = document.createElement('div');
+        // 添加孩子,防止vue实例替换dom元素
+        if (this.last) {
+          output.removeChild(this.last.$el);
+          this.last.$destroy();
+        }
+        const child = output.appendChild(node);
+        // 调用渲染方法进行渲染
+        return new Promise((resolve, reject) => render(buffer, extend, child)
+            .then(resolve).catch(reject));
       },
       handleDelete(row) {
         const id = row.id;

+ 62 - 4
src/views/enterprise/project/components/FinEnclosure.vue

@@ -26,12 +26,19 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"/>
     <upload-enclosure ref="uploadEnclosure" v-if="enclosureVisible" @refreshData="getList()" :dataId="dataId" :attachType="'PROJECT'"></upload-enclosure>
+    <div class="container" style="margin-top: 20px;">
+      <div v-show="loading" class="well loading">正在加载中,请耐心等待...</div>
+      <div v-show="!loading" class="well" ref="output"></div>
+    </div>
   </div>
 </template>
 
 <script>
   import {getEnclosureApi,deleteEnclosureApi,getProjectInfoApi} from '@/api/enterprise/project/project'
   import UploadEnclosure from './UploadEnclosure'
+  import { getExtend, readBuffer, render } from '@/utils/util';
+  import { parse } from 'qs';
+  import axios from 'axios'
   export default {
     components: {
       UploadEnclosure
@@ -110,11 +117,62 @@
         	})
         })
       },
+      // 从url加载
       handleView(row) {
-        let fileUrl = row.url
-        let url = encodeURIComponent(fileUrl)
-        let officeUrl = 'https://view.xdocin.com/view?src='+url
-        window.open(officeUrl, '_target')
+        this.loading = true;
+        // 要预览的文件地址
+        const { url } = row.url;
+        const filename = row.fileName
+        // const filename = url.substr(url.lastIndexOf('/') + 1);
+        // 拼接iframe请求url
+        axios({
+          url: "http://124.232.146.72:7015/api/common/attach/"+row.id,
+          method: 'get',
+          responseType: 'blob',
+        }).then(({ data }) => {
+          if (!data) {
+            console.error('文件下载失败');
+          }
+          const file = new File([ data ], filename, {});
+          this.handleChange({ target: { files: [ file ] } });
+        }).finally(() => {
+          this.loading = false;
+        })
+      },
+      async handleChange(e) {
+        this.loading = true;
+        try {
+          const [ file ] = e.target.files;
+          this.filename = file.name && decodeURIComponent(file.name) || '';
+          const arrayBuffer = await readBuffer(file);
+          this.loading = false
+          this.last = await this.displayResult(arrayBuffer, file)
+          console.log("last")
+          console.log(this.last)
+        } catch (e) {
+          console.error(e)
+        } finally {
+          this.loading = false
+        }
+      },
+      displayResult(buffer, file) {
+        // 取得文件名
+        const { name } = file;
+        // 取得扩展名
+        const extend = getExtend(name);
+        // 输出目的地
+        const { output } = this.$refs;
+        // 生成新的dom
+        const node = document.createElement('div');
+        // 添加孩子,防止vue实例替换dom元素
+        if (this.last) {
+          output.removeChild(this.last.$el);
+          this.last.$destroy();
+        }
+        const child = output.appendChild(node);
+        // 调用渲染方法进行渲染
+        return new Promise((resolve, reject) => render(buffer, extend, child)
+            .then(resolve).catch(reject));
       },
       handleDelete(row) {
         const id = row.id;

+ 62 - 4
src/views/enterprise/project/components/TechEnclosure.vue

@@ -26,12 +26,19 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"/>
     <upload-enclosure ref="uploadEnclosure" v-if="enclosureVisible" @refreshData="getList()" :dataId="dataId" :attachType="'PROJECT'"></upload-enclosure>
+    <div class="container" style="margin-top: 20px;">
+      <div v-show="loading" class="well loading">正在加载中,请耐心等待...</div>
+      <div v-show="!loading" class="well" ref="output"></div>
+    </div>
   </div>
 </template>
 
 <script>
   import {getEnclosureApi,deleteEnclosureApi,getProjectInfoApi} from '@/api/enterprise/project/project'
   import UploadEnclosure from './UploadEnclosure'
+  import { getExtend, readBuffer, render } from '@/utils/util';
+  import { parse } from 'qs';
+  import axios from 'axios'
   export default {
     components: {
       UploadEnclosure
@@ -110,11 +117,62 @@
         	})
         })
       },
+      // 从url加载
       handleView(row) {
-        let fileUrl = row.url
-        let url = encodeURIComponent(fileUrl)
-        let officeUrl = 'https://view.xdocin.com/view?src='+url
-        window.open(officeUrl, '_target')
+        this.loading = true;
+        // 要预览的文件地址
+        const { url } = row.url;
+        const filename = row.fileName
+        // const filename = url.substr(url.lastIndexOf('/') + 1);
+        // 拼接iframe请求url
+        axios({
+          url: "http://124.232.146.72:7015/api/common/attach/"+row.id,
+          method: 'get',
+          responseType: 'blob',
+        }).then(({ data }) => {
+          if (!data) {
+            console.error('文件下载失败');
+          }
+          const file = new File([ data ], filename, {});
+          this.handleChange({ target: { files: [ file ] } });
+        }).finally(() => {
+          this.loading = false;
+        })
+      },
+      async handleChange(e) {
+        this.loading = true;
+        try {
+          const [ file ] = e.target.files;
+          this.filename = file.name && decodeURIComponent(file.name) || '';
+          const arrayBuffer = await readBuffer(file);
+          this.loading = false
+          this.last = await this.displayResult(arrayBuffer, file)
+          console.log("last")
+          console.log(this.last)
+        } catch (e) {
+          console.error(e)
+        } finally {
+          this.loading = false
+        }
+      },
+      displayResult(buffer, file) {
+        // 取得文件名
+        const { name } = file;
+        // 取得扩展名
+        const extend = getExtend(name);
+        // 输出目的地
+        const { output } = this.$refs;
+        // 生成新的dom
+        const node = document.createElement('div');
+        // 添加孩子,防止vue实例替换dom元素
+        if (this.last) {
+          output.removeChild(this.last.$el);
+          this.last.$destroy();
+        }
+        const child = output.appendChild(node);
+        // 调用渲染方法进行渲染
+        return new Promise((resolve, reject) => render(buffer, extend, child)
+            .then(resolve).catch(reject));
       },
       handleDelete(row) {
         const id = row.id;