Newer
Older
KaiFengPC / src / views / document / fileManagement / updateRecord / index.vue
@鲁yixuan 鲁yixuan on 22 Aug 4 KB 1
  1. <template>
  2. <div class="updateRecord">
  3. <div class="top">
  4. <el-form ref="ruleForm" inline :model="form">
  5. <el-form-item label="所属分类:" prop="typeId">
  6. <el-tree-select
  7. v-model="form.typeId"
  8. :data="treeData"
  9. node-key="id"
  10. :render-after-expand="false"
  11. :props="{ label: 'typeName' }"
  12. check-strictly
  13. clearable
  14. style="width: 100%"
  15. class="fileTreeSel"
  16. />
  17. </el-form-item>
  18. <el-form-item label="文件名称:" prop="fileName">
  19. <el-input v-model="form.fileName" placeholder="请输入文件名称" />
  20. </el-form-item>
  21. <el-form-item>
  22. <el-button type="primary" icon="Search" @click="search"> 搜索</el-button>
  23. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  24. </el-form-item>
  25. </el-form>
  26. </div>
  27. <el-table :data="tableData" v-loading="loading" stripe :max-height="600">
  28. <el-table-column type="index" width="55" label="序号" />
  29. <el-table-column label="文件名称" prop="fileName" show-overflow-tooltip width="200" />
  30. <el-table-column label="文件编号" prop="fileId" show-overflow-tooltip />
  31. <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip />
  32. <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip />
  33. <el-table-column label="更新前大小" prop="beforeSize" show-overflow-tooltip>
  34. <template #default="{ row }">
  35. <span>{{
  36. row.beforeSize
  37. ? row.beforeSize > 1024
  38. ? (row.beforeSize / 1024 / 1024).toFixed(2) + 'M'
  39. : (row.beforeSize / 1024).toFixed(2) + 'KB'
  40. : '-'
  41. }}</span>
  42. </template>
  43. </el-table-column>
  44. <el-table-column label="更新后大小" prop="afterSize" show-overflow-tooltip>
  45. <template #default="{ row }">
  46. <span>{{
  47. row.afterSize
  48. ? row.afterSize > 1024
  49. ? (row.afterSize / 1024 / 1024).toFixed(2) + 'M'
  50. : (row.afterSize / 1024).toFixed(2) + 'KB'
  51. : '-'
  52. }}</span>
  53. </template>
  54. </el-table-column>
  55. <el-table-column label="累计更新次数" prop="modifyCount" show-overflow-tooltip />
  56. <el-table-column label="操作" show-overflow-tooltip width="120">
  57. <template #default="{ row }">
  58. <el-button type="primary" icon="View" link @click="previewFile(row)">查看文件</el-button>
  59. </template>
  60. </el-table-column>
  61. </el-table>
  62. <pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
  63. </div>
  64. </template>
  65.  
  66. <script setup>
  67. import { reactive, ref, onMounted } from 'vue';
  68. import { usePagination } from '@/hooks';
  69. import { documentTypeTree } from '@/api/document/dataClassify';
  70. import { documentModifyHsitoryPage } from '@/api/document/fileManagement/updateRecord';
  71. import { documentAccessRecordAdd } from '@/api/document/fileManagement/loanRecord';
  72. const { proxy } = getCurrentInstance();
  73. const form = reactive({
  74. typeId: '',
  75. fileName: '',
  76. });
  77. const treeData = ref([]);
  78. const { pageNum, pageSize, tableData, total, loading, getTableList } = usePagination(documentModifyHsitoryPage, { value: form });
  79.  
  80. const search = () => {
  81. pageNum.value = 1;
  82. getTableList();
  83. };
  84.  
  85. const resetQuery = () => {
  86. proxy.$refs.ruleForm.resetFields();
  87. search();
  88. };
  89.  
  90. const getTreeData = async () => {
  91. const res = await documentTypeTree();
  92. if (res?.code !== 200) return;
  93. treeData.value = res.data || [];
  94. };
  95.  
  96. const previewFile = row => {
  97. const file = row?.sysFileList?.[0] || null;
  98. if (!file) return;
  99. window.open(file.url);
  100. documentAccessRecordAdd({
  101. fileId: row.id,
  102. });
  103. };
  104.  
  105. onMounted(() => {
  106. getTableList();
  107. getTreeData();
  108. });
  109. </script>
  110.  
  111. <style lang="scss">
  112. .updateRecord {
  113. padding: 20px;
  114. height: 90vh;
  115. overflow-y: hidden;
  116. .top {
  117. margin-bottom: 15px;
  118. }
  119. }
  120.  
  121. ::v-deep(.dialog) {
  122. .el-dialog__body {
  123. padding-bottom: 20px !important;
  124. }
  125. .el-dialog__footer {
  126. padding-top: 0 !important;
  127. }
  128. }
  129. .fileTreeSel {
  130. .el-tree-node__children {
  131. .el-tree-node__expand-icon {
  132. visibility: hidden;
  133. }
  134. }
  135. }
  136. </style>