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