inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2   <a-spin :spinning="cardLoading">
3     <x-card v-if="hasPerm('sysFileInfo:page')">
4       <div slot="content" class="table-page-search-wrapper">
5         <a-form layout="inline">
6           <a-row :gutter="48">
7             <a-col :md="8" :sm="24">
8               <a-form-item label="存储位置">
9                 <a-select v-model="queryParam.fileLocation" placeholder="请选择存储位置" >
10                   <a-select-option v-for="(item,index) in fileLocationDictTypeDropDown" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
11                 </a-select>
12               </a-form-item>
13             </a-col>
14             <a-col :md="8" :sm="24">
15               <a-form-item label="文件仓库">
16                 <a-input v-model="queryParam.fileBucket" placeholder="请输入文件仓库"/>
17               </a-form-item>
18             </a-col>
19             <template v-if="advanced">
20               <a-col :md="8" :sm="24">
21                 <a-form-item label="文件名称">
22                   <a-input v-model="queryParam.fileOriginName" placeholder="请输入文件名称(上传时候的文件名)"/>
23                 </a-form-item>
24               </a-col>
25             </template>
26             <a-col :md="!advanced && 8 || 24" :sm="24">
27               <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
28                 <a-button type="primary" @click="$refs.table.refresh(true)" >查询</a-button>
29                 <a-button style="margin-left: 8px" @click="() => queryParam = { fileSuffix: 'doc,docx,xls,xlsx,ppt,pptx' }">重置</a-button>
30                 <a @click="toggleAdvanced" style="margin-left: 8px">
31                   {{ advanced ? '收起' : '展开' }}
32                   <a-icon :type="advanced ? 'up' : 'down'"/>
33                 </a>
34               </span>
35             </a-col>
36           </a-row>
37         </a-form>
38       </div>
39     </x-card>
40     <a-card :bordered="false">
41       <s-table
42         ref="table"
43         :columns="columns"
44         :data="loadData"
45         :alert="false"
46         :rowKey="(record) => record.id"
47         :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
48       >
49         <span slot="fileOriginName" slot-scope="text">
50           <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
51         </span>
52         <span slot="fileObjectName" slot-scope="text">
53           <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
54         </span>
55         <span slot="fileLocation" slot-scope="text">
56           {{ 'file_storage_location' | dictType(text) }}
57         </span>
58         <span slot="fileSuffix" slot-scope="text">
59           <a-tag color="blue">{{ text }}</a-tag>
60         </span>
61         <span slot="action" slot-scope="text, record">
62           <a @click="onlineEdit(record)">在线编辑</a>
63           <a-divider type="vertical"/>
64           <a @click="sysFileInfoDownload(record)">下载</a>
65           <a-divider type="vertical" />
66           <a @click="onlinePreview(record, 'desktop')">桌面预览</a>
67           <a-divider type="vertical" />
68           <a @click="onlinePreview(record, 'mobile')">手机预览</a>
69           <a-divider type="vertical" />
70           <a-popconfirm placement="topRight" title="确认删除?" @confirm="() => sysFileInfoDelete(record)">
71             <a>删除</a>
72           </a-popconfirm>
73         </span>
74       </s-table>
75       <preview-form ref="previewForm"/>
76       <online-edit-form ref="onlineEditForm"/>
77     </a-card>
78   </a-spin>
79 </template>
80 <script>
81   import { Ellipsis, STable, XCard } from '@/components'
82   import {
83     sysFileInfoDelete,
84     sysFileInfoDownload,
85     sysFileInfoGetOnlineConfig,
86     sysFileInfoPage
87   } from '@/api/modular/system/fileManage'
88   import previewForm from './previewForm'
89   import onlineEditForm from './onlineEditForm'
90
91   export default {
92     components: {
93       XCard,
94       STable,
95       Ellipsis,
96       previewForm,
97       onlineEditForm
98     },
99     data () {
100       return {
101         // 高级搜索 展开/关闭
102         advanced: false,
103         // 查询参数
104         queryParam: { fileSuffix: 'doc,docx,xls,xlsx,ppt,pptx' },
105         // 表头
106         columns: [
107           {
108             title: '存储位置',
109             dataIndex: 'fileLocation',
110             scopedSlots: { customRender: 'fileLocation' }
111           },
112           {
113             title: '文件仓库',
114             dataIndex: 'fileBucket'
115           },
116           {
117             title: '文件名称',
118             dataIndex: 'fileOriginName',
119             scopedSlots: { customRender: 'fileOriginName' }
120           },
121           {
122             title: '文件后缀',
123             dataIndex: 'fileSuffix',
124             scopedSlots: { customRender: 'fileSuffix' }
125           },
126           {
127             title: '文件大小',
128             dataIndex: 'fileSizeInfo'
129           },
130           {
131             title: '唯一标识id',
132             dataIndex: 'fileObjectName',
133             scopedSlots: { customRender: 'fileObjectName' }
134           }
135
136         ],
137         // 加载数据方法 必须为 Promise 对象
138         loadData: parameter => {
139           return sysFileInfoPage(Object.assign(parameter, this.queryParam)).then((res) => {
140             return res.data
141           })
142         },
143         cardLoading: false,
144         fileLocationDictTypeDropDown: [],
145         selectedRowKeys: [],
146         selectedRows: []
147       }
148     },
149     created () {
150       this.sysDictTypeDropDown()
151       this.columns.push({
152         title: '操作',
153         width: '350px',
154         dataIndex: 'action',
155         scopedSlots: { customRender: 'action' }
156       })
157     },
158     methods: {
159       /**
160        * 在线编辑
161        */
162       onlineEdit (record) {
163         this.cardLoading = true
164         sysFileInfoGetOnlineConfig({ id: record.id }).then((res) => {
165           this.cardLoading = false
166           this.$refs.onlineEditForm.onlineEdit(res, 'desktop')
167         })
168       },
169       /**
170        * 在线预览
171        */
172       onlinePreview (record, type) {
173         this.cardLoading = true
174         sysFileInfoGetOnlineConfig({ id: record.id }).then((res) => {
175           this.cardLoading = false
176           this.$refs.previewForm.preview(res, type)
177         })
178       },
179       /**
180        * 预览文件(微软插件)
181        */
182       previewMicrosoft (record) {
183         window.open('https://view.officeapps.live.com/op/view.aspx?src=' + process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/download?id=' + record.id)
184       },
185       /**
186        * 获取字典数据
187        */
188       sysDictTypeDropDown () {
189         this.fileLocationDictTypeDropDown = this.$options.filters['dictData']('file_storage_location')
190       },
191       /**
192        * 下载文件(所有文件)
193        */
194       sysFileInfoDownload (record) {
195         this.cardLoading = true
196         sysFileInfoDownload({ id: record.id }).then((res) => {
197           this.cardLoading = false
198           this.downloadfile(res)
199         // eslint-disable-next-line handle-callback-err
200         }).catch((err) => {
201           this.cardLoading = false
202           this.$message.error('下载错误:获取文件流错误')
203         })
204       },
205       downloadfile (res) {
206         var blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
207         var contentDisposition = res.headers['content-disposition']
208         var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
209         var result = patt.exec(contentDisposition)
210         var filename = result[1]
211         var downloadElement = document.createElement('a')
212         var href = window.URL.createObjectURL(blob) // 创建下载的链接
213         var reg = /^["](.*)["]$/g
214         downloadElement.style.display = 'none'
215         downloadElement.href = href
216         downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
217         document.body.appendChild(downloadElement)
218         downloadElement.click() // 点击下载
219         document.body.removeChild(downloadElement) // 下载完成移除元素
220         window.URL.revokeObjectURL(href)
221       },
222       sysFileInfoDelete (record) {
223         sysFileInfoDelete(record).then((res) => {
224           if (res.success) {
225             this.$message.success('删除成功')
226             this.$refs.table.refresh()
227           } else {
228             this.$message.error('删除失败:' + res.message)
229           }
230         }).catch((err) => {
231           this.$message.error('删除错误:' + err.message)
232         })
233       },
234       toggleAdvanced () {
235         this.advanced = !this.advanced
236       },
237       handleOk () {
238         this.$refs.table.refresh()
239       },
240       onSelectChange (selectedRowKeys, selectedRows) {
241         this.selectedRowKeys = selectedRowKeys
242         this.selectedRows = selectedRows
243       }
244     }
245   }
246 </script>
247 <style lang="less">
248   .table-operator {
249     margin-bottom: 18px;
250   }
251   button {
252     margin-right: 8px;
253   }
254 </style>