OSSFileList.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 查询区域 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="searchQuery">
  6. <a-row :gutter="24">
  7. <a-col :md="6" :sm="8">
  8. <a-form-item label="文件名称">
  9. <a-input placeholder="请输入文件名称" v-model="queryParam.fileName"></a-input>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="8">
  13. <a-form-item label="文件地址">
  14. <a-input placeholder="请输入文件地址" v-model="queryParam.url"></a-input>
  15. </a-form-item>
  16. </a-col>
  17. </a-row>
  18. </a-form>
  19. </div>
  20. <!-- 操作按钮区域 -->
  21. <div class="table-operator">
  22. <!-- <a-button type="primary" icon="download" @click="handleExportXls('文件列表')">导出</a-button>-->
  23. <a-upload
  24. name="file"
  25. :multiple="false"
  26. :action="uploadAction"
  27. :headers="tokenHeader"
  28. :showUploadList="false"
  29. :beforeUpload="beforeUpload"
  30. @change="handleChange">
  31. <a-button>
  32. <a-icon type="upload"/>
  33. 文件上传
  34. </a-button>
  35. </a-upload>
  36. </div>
  37. <!-- table区域-begin -->
  38. <div>
  39. <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
  40. <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
  41. style="font-weight: 600">{{
  42. selectedRowKeys.length }}</a>项
  43. <a style="margin-left: 24px" @click="onClearSelected">清空</a>
  44. </div>
  45. <a-table
  46. ref="table"
  47. size="middle"
  48. bordered
  49. rowKey="id"
  50. :columns="columns"
  51. :dataSource="dataSource"
  52. :pagination="ipagination"
  53. :loading="loading"
  54. :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  55. @change="handleTableChange">
  56. <span slot="action" slot-scope="text, record">
  57. <a @click="ossDelete(record.id)">删除</a>
  58. </span>
  59. </a-table>
  60. </div>
  61. <!-- table区域-end -->
  62. </a-card>
  63. </template>
  64. <script>
  65. import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  66. export default {
  67. name: "OSSFileList",
  68. mixins: [JeecgListMixin],
  69. data() {
  70. return {
  71. description: '文件列表',
  72. // 表头
  73. columns: [
  74. {
  75. title: '#',
  76. dataIndex: '',
  77. key: 'rowIndex',
  78. width: 60,
  79. align: "center",
  80. customRender: function (t, r, index) {
  81. return parseInt(index) + 1;
  82. }
  83. },
  84. {
  85. title: '文件名称',
  86. align: "center",
  87. dataIndex: 'fileName'
  88. },
  89. {
  90. title: '文件地址',
  91. align: "center",
  92. dataIndex: 'url'
  93. },
  94. {
  95. title: '操作',
  96. dataIndex: 'action',
  97. align: "center",
  98. scopedSlots: {customRender: 'action'},
  99. }
  100. ],
  101. url: {
  102. upload: "/oss/file/upload",
  103. list: "/oss/file/list",
  104. delete: "/oss/file/delete"
  105. }
  106. }
  107. },
  108. computed: {
  109. uploadAction() {
  110. return window._CONFIG['domianURL'] + this.url.upload;
  111. }
  112. },
  113. methods: {
  114. beforeUpload(file) {
  115. var fileType = file.type;
  116. if (fileType === 'image') {
  117. if (fileType.indexOf('image') < 0) {
  118. this.$message.warning('请上传图片');
  119. return false;
  120. }
  121. } else if (fileType === 'file') {
  122. if (fileType.indexOf('image') >= 0) {
  123. this.$message.warning('请上传文件');
  124. return false;
  125. }
  126. }
  127. return true
  128. },
  129. handleChange(info) {
  130. if (info.file.status === 'done') {
  131. if (info.file.response.success) {
  132. this.loadData()
  133. this.$message.success(`${info.file.name} 上传成功!`);
  134. } else {
  135. this.$message.error(`${info.file.name} 上传失败.`);
  136. }
  137. } else if (info.file.status === 'error') {
  138. this.$message.error(`${info.file.name} 上传失败.`);
  139. }
  140. },
  141. ossDelete(id) {
  142. var that = this;
  143. that.$confirm({
  144. title: "确认删除",
  145. content: "是否删除选中文件?",
  146. onOk: function () {
  147. that.handleDelete(id)
  148. }
  149. });
  150. }
  151. }
  152. }
  153. </script>
  154. <style scoped>
  155. @import '~@assets/less/common.less'
  156. </style>