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