|
@@ -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;
|