blog的后端代码
view | history | commit | commitdiff
inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
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 = {}">重置</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         <template slot="operator" v-if="hasPerm('sysFileInfo:upload')">
50           <a-upload
51             :customRequest="customRequest"
52             :multiple="true"
53             :showUploadList="false"
54             name="file"
55             v-if="hasPerm('sysFileInfo:upload')"
56           >
57             <a-button> <a-icon type="upload" />上传文件</a-button>
58           </a-upload>
59         </template>
60         <span slot="fileOriginName" slot-scope="text">
61           <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
62         </span>
63         <span slot="fileObjectName" slot-scope="text">
64           <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
65         </span>
66         <span slot="fileLocation" slot-scope="text">
67           {{ 'file_storage_location' | dictType(text) }}
68         </span>
69         <span slot="fileSuffix" slot-scope="text">
70           <a-tag color="blue">{{ text }}</a-tag>
71         </span>
72         <span slot="action" slot-scope="text, record">
73           <a v-if="hasPerm('sysFileInfo:download')" @click="sysFileInfoDownload(record)">下载</a>
74           <a-divider type="vertical" v-if="hasPerm('sysFileInfo:download') & hasPerm('sysFileInfo:detail')"/>
75           <a v-if="hasPerm('sysFileInfo:detail')" @click="$refs.detailForm.detail(record)">详情</a>
76           <a-divider type="vertical" v-if="hasPerm('sysFileInfo:detail') & hasPerm('sysFileInfo:delete')"/>
77           <a-popconfirm v-if="hasPerm('sysFileInfo:delete')" placement="topRight" title="确认删除？" @confirm="() => sysFileInfoDelete(record)">
78             <a>删除</a>
79           </a-popconfirm>
80           <a-divider type="vertical" v-if="(hasPerm('sysFileInfo:preview') & record.fileSuffix === 'png' || record.fileSuffix === 'jpeg' || record.fileSuffix === 'jpg'|| record.fileSuffix === 'gif'|| record.fileSuffix === 'tif' || record.fileSuffix === 'bmp' ) & hasPerm('sysFileInfo:delete')"/>
81           <a v-if="(hasPerm('sysFileInfo:preview') & record.fileSuffix === 'png' || record.fileSuffix === 'jpeg'|| record.fileSuffix === 'jpg'|| record.fileSuffix === 'gif'|| record.fileSuffix === 'tif' || record.fileSuffix === 'bmp' )" @click="$refs.previewForm.preview(record)">预览</a>
82           <a-divider type="vertical" v-if="(hasPerm('sysFileInfo:preview') & record.fileSuffix === 'doc' || record.fileSuffix === 'docx'|| record.fileSuffix === 'xls'|| record.fileSuffix === 'xlsx') & hasPerm('sysFileInfo:delete')"/>
83           <a v-if="(hasPerm('sysFileInfo:preview') & record.fileSuffix === 'doc' || record.fileSuffix === 'docx'|| record.fileSuffix === 'xls'|| record.fileSuffix === 'xlsx')" @click="previewMicrosoft(record)">预览</a>
84         </span>
85       </s-table>
86       <detail-form ref="detailForm" @ok="handleOk" v-if="hasPerm('sysFileInfo:detail')"/>
87       <preview-form ref="previewForm" v-if="hasPerm('sysFileInfo:preview')"/>
88     </a-card>
89   </a-spin>
90 </template>
91 <script>
92   import { STable, Ellipsis, XCard } from '@/components'
93   import { sysFileInfoPage, sysFileInfoDelete, sysFileInfoUpload, sysFileInfoDownload } from '@/api/modular/system/fileManage'
94   import detailForm from './detailForm'
95   import previewForm from './previewForm'
96   export default {
97     components: {
98       XCard,
99       STable,
100       Ellipsis,
101       detailForm,
102       previewForm
103     },
104     data () {
105       return {
106         // 高级搜索 展开/关闭
107         advanced: false,
108         // 查询参数
109         queryParam: {},
110         // 表头
111         columns: [
112           {
113             title: '存储位置',
114             dataIndex: 'fileLocation',
115             scopedSlots: { customRender: 'fileLocation' }
116           },
117           {
118             title: '文件仓库',
119             dataIndex: 'fileBucket'
120           },
121           {
122             title: '文件名称',
123             dataIndex: 'fileOriginName',
124             scopedSlots: { customRender: 'fileOriginName' }
125           },
126           {
127             title: '文件后缀',
128             dataIndex: 'fileSuffix',
129             scopedSlots: { customRender: 'fileSuffix' }
130           },
131           {
132             title: '文件大小',
133             dataIndex: 'fileSizeInfo'
134           },
135           {
136             title: '唯一标识id',
137             dataIndex: 'fileObjectName',
138             scopedSlots: { customRender: 'fileObjectName' }
139           }
140
141         ],
142         // 加载数据方法 必须为 Promise 对象
143         loadData: parameter => {
144           return sysFileInfoPage(Object.assign(parameter, this.queryParam)).then((res) => {
145             return res.data
146           })
147         },
148         cardLoading: false,
149         fileLocationDictTypeDropDown: [],
150         selectedRowKeys: [],
151         selectedRows: []
152       }
153     },
154     created () {
155       this.sysDictTypeDropDown()
156       if (this.hasPerm('sysPos:edit') || this.hasPerm('sysPos:delete')) {
157         this.columns.push({
158           title: '操作',
159           width: '200px',
160           dataIndex: 'action',
161           scopedSlots: { customRender: 'action' }
162         })
163       }
164     },
165     methods: {
166       /**
167        * 预览文件（微软插件）
168        */
169       previewMicrosoft (record) {
170         window.open('https://view.officeapps.live.com/op/view.aspx?src=' + process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/download?id=' + record.id)
171       },
172       /**
173        * 获取字典数据
174        */
175       sysDictTypeDropDown () {
176         this.fileLocationDictTypeDropDown = this.$options.filters['dictData']('file_storage_location')
177       },
178       /**
179        * 下载文件（所有文件）
180        */
181       sysFileInfoDownload (record) {
182         this.cardLoading = true
183         sysFileInfoDownload({ id: record.id }).then((res) => {
184           this.cardLoading = false
185           this.downloadfile(res)
186         // eslint-disable-next-line handle-callback-err
187         }).catch((err) => {
188           this.cardLoading = false
189           this.$message.error('下载错误：获取文件流错误')
190         })
191       },
192       downloadfile (res) {
193         var blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
194         var contentDisposition = res.headers['content-disposition']
195         var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
196         var result = patt.exec(contentDisposition)
197         var filename = result[1]
198         var downloadElement = document.createElement('a')
199         var href = window.URL.createObjectURL(blob) // 创建下载的链接
200         var reg = /^["](.*)["]$/g
201         downloadElement.style.display = 'none'
202         downloadElement.href = href
203         downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
204         document.body.appendChild(downloadElement)
205         downloadElement.click() // 点击下载
206         document.body.removeChild(downloadElement) // 下载完成移除元素
207         window.URL.revokeObjectURL(href)
208       },
209       sysFileInfoDelete (record) {
210         sysFileInfoDelete(record).then((res) => {
211           if (res.success) {
212             this.$message.success('删除成功')
213             this.$refs.table.refresh()
214           } else {
215             this.$message.error('删除失败：' + res.message)
216           }
217         }).catch((err) => {
218           this.$message.error('删除错误：' + err.message)
219         })
220       },
221       toggleAdvanced () {
222         this.advanced = !this.advanced
223       },
224       /**
225        * 上传文件
226        */
227       customRequest (data) {
228         const formData = new FormData()
229         formData.append('file', data.file)
230         sysFileInfoUpload(formData).then((res) => {
231           if (res.success) {
232             this.$message.success('上传成功')
233             this.$refs.table.refresh()
234           } else {
235             this.$message.error('上传失败：' + res.message)
236           }
237         })
238       },
239       handleOk () {
240         this.$refs.table.refresh()
241       },
242       onSelectChange (selectedRowKeys, selectedRows) {
243         this.selectedRowKeys = selectedRowKeys
244         this.selectedRows = selectedRows
245       }
246     }
247   }
248 </script>
249 <style lang="less">
250   .table-operator {
251     margin-bottom: 18px;
252   }
253   button {
254     margin-right: 8px;
255   }
256 </style>