index.vue 9.6 KB

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