TechEnclosure.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <template>
  2. <div class="app-container">
  3. <h3 class="toolbar">
  4. <div class="tool">
  5. <el-button type="primary" plain icon="el-icon-upload2" size="mini" @click="handleUpload" v-if="userType == 'ENT_TECH' || userType == 'ENT_ADMIN_TECH'">一键上传</el-button>
  6. <el-button type="primary" plain icon="el-icon-download" size="mini" @click="handleDownloadBatch">批量下载</el-button>
  7. <el-button type="primary" plain icon="el-icon-delete" size="mini" @click="handleBatchDelte" v-if="userType == 'ENT_TECH' || userType == 'ENT_ADMIN_TECH'">批量删除</el-button>
  8. </div>
  9. </h3>
  10. <el-table v-loading="loading" :data="list" border @selection-change="handleSelectionChange" style="width: 100%" @select-all="selectAll">
  11. <el-table-column type="selection" width="55"></el-table-column>
  12. <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
  13. <el-table-column label="文件名称" prop="fileName" align="center"></el-table-column>
  14. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  15. <template slot-scope="scope">
  16. <el-button type="text" @click="handleView(scope.row)">查看</el-button>
  17. <el-button type="text" @click="handleDownload(scope.row)">下载</el-button>
  18. <el-button type="text" @click="handleDelete(scope.row)" v-if="userType == 'ENT_TECH' || userType == 'ENT_ADMIN_TECH'">删除</el-button>
  19. </template>
  20. </el-table-column>
  21. </el-table>
  22. <pagination
  23. v-show="total>0"
  24. :total="total"
  25. :page.sync="queryParams.pageNum"
  26. :limit.sync="queryParams.pageSize"
  27. @pagination="getList"/>
  28. <upload-enclosure ref="uploadEnclosure" v-if="enclosureVisible" @refreshData="getList()" :dataId="dataId" :attachType="'PROJECT'"></upload-enclosure>
  29. <div class="container" style="margin-top: 20px;">
  30. <div v-show="loading" class="well loading">正在加载中,请耐心等待...</div>
  31. <div v-show="!loading" class="well" ref="output"></div>
  32. </div>
  33. </div>
  34. </template>
  35. <script>
  36. import {getEnclosureApi,deleteEnclosureApi,getProjectInfoApi} from '@/api/enterprise/project/project'
  37. import UploadEnclosure from './UploadEnclosure'
  38. import { getExtend, readBuffer, render } from '@/utils/util';
  39. import { parse } from 'qs';
  40. import axios from 'axios'
  41. export default {
  42. components: {
  43. UploadEnclosure
  44. },
  45. data() {
  46. return {
  47. total: 0,
  48. enclosureVisible: false,
  49. list: [],
  50. id: this.$route.query.id,
  51. dataId: undefined,
  52. attachType: 'PROJECT',
  53. loading: false,
  54. selectionList: [],
  55. ids: '',
  56. queryParams: {
  57. pageNum: 1,
  58. pageSize: 10
  59. }
  60. };
  61. },
  62. computed: {
  63. userType() {
  64. return this.$store.state.user.userType
  65. }
  66. },
  67. created() {
  68. this.id = this.$route.query.id || undefined;
  69. this.getData()
  70. },
  71. methods: {
  72. getData() {
  73. getProjectInfoApi(this.id).then(res => {
  74. let obj = res.data.techProject || {}
  75. this.dataId = obj.id //技术资料id
  76. this.getList()
  77. })
  78. },
  79. getList() {
  80. getEnclosureApi(this.attachType,this.dataId).then(res => {
  81. if(res.code == 200) {
  82. this.list = res.data.records
  83. this.total = res.data.total
  84. }
  85. })
  86. },
  87. handleUpload() {
  88. this.enclosureVisible = true
  89. this.$nextTick(() => {
  90. this.$refs.uploadEnclosure.init()
  91. })
  92. },
  93. handleDownload(row) {
  94. window.open("http://124.232.146.72:7015/api/common/attach/"+row.id)
  95. },
  96. handleDownloadBatch() {
  97. if(this.selectionList.length <=0) {
  98. this.$message.error('请选择要下载的数据');
  99. return
  100. }
  101. window.open("http://124.232.146.72:7015/api/common/attach/"+this.ids)
  102. this.getList();
  103. },
  104. handleBatchDelte() {
  105. if(this.selectionList.length <=0) {
  106. this.$message.error('请选择要删除的数据');
  107. return
  108. }
  109. this.$confirm('请确认是否删除所选择的数据!', '提示').then(() => {
  110. deleteEnclosureApi(this.ids).then(res => {
  111. if(res.code == 200) {
  112. this.queryParams.pageNum = 1;
  113. this.getList();
  114. this.$modal.msgSuccess("删除成功");
  115. }
  116. })
  117. })
  118. },
  119. // 从url加载
  120. handleView(row) {
  121. let routeUrl = this.$router.resolve({
  122. path: '/enclosurePreview',
  123. query: {url: row.url,fileName: row.fileName,id: row.id}
  124. });
  125. window.open(routeUrl.href, "_blank");
  126. },
  127. handleDelete(row) {
  128. const id = row.id;
  129. this.$confirm('是否确认删除该数据?', "警告", {
  130. confirmButtonText: "确定",
  131. cancelButtonText: "取消",
  132. type: "warning"
  133. }).then(function() {
  134. return deleteEnclosureApi(id);
  135. }).then(() => {
  136. this.queryParams.pageNum = 1;
  137. this.getList();
  138. this.$modal.msgSuccess("删除成功");
  139. })
  140. },
  141. // 取消全选
  142. selectAll(selection) {
  143. if (selection.length == 0) {
  144. let list = this.selectedList.filter(item => !this.list.some(ele => ele.id === item.id));
  145. this.selectionList = list;
  146. }
  147. },
  148. handleSelectionChange(val) {
  149. this.selectionList = val;
  150. if(this.selectionList.length > 0) {
  151. let selectionIds = []
  152. for (let i = 0, len = this.selectionList.length; i < len; i++) {
  153. selectionIds.push(this.selectionList[i].id)
  154. }
  155. this.ids = selectionIds.join(',')
  156. }else {
  157. this.ids = ''
  158. }
  159. }
  160. }
  161. };
  162. </script>
  163. </script>
  164. <style>
  165. </style>