Newer
Older
KaiFengPC / src / views / document / fileManagement / accessStatistics / index.vue
@鲁yixuan 鲁yixuan on 22 Aug 3 KB 1
  1. <template>
  2. <div class="accessStatistics">
  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="fileCode" show-overflow-tooltip />
  31. <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip />
  32. <el-table-column label="文件大小" prop="size" show-overflow-tooltip>
  33. <template #default="{ row }">
  34. <span>{{
  35. row.size ? (row.size > 1024 ? (row.size / 1024 / 1024).toFixed(2) + 'M' : (row.size / 1024).toFixed(2) + 'KB') : '-'
  36. }}</span>
  37. </template>
  38. </el-table-column>
  39. <el-table-column label="阅读统计(次数)" show-overflow-tooltip>
  40. <el-table-column label="最近一年" prop="yearCount" show-overflow-tooltip />
  41. <el-table-column label="最近三个月" prop="threeMonthCount" show-overflow-tooltip />
  42. <el-table-column label="最近一周" prop="weekCount" show-overflow-tooltip />
  43. <el-table-column label="昨日" prop="yesterdayCount" show-overflow-tooltip />
  44. <el-table-column label="今日" prop="todayCount" show-overflow-tooltip />
  45. </el-table-column>
  46. </el-table>
  47. <pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
  48. </div>
  49. </template>
  50.  
  51. <script setup>
  52. import { reactive, ref, onMounted } from 'vue';
  53. import { usePagination } from '@/hooks';
  54. import { documentTypeTree } from '@/api/document/dataClassify';
  55. import { documentAccessRecordReadCount } from '@/api/document/fileManagement/loanRecord';
  56. const { proxy } = getCurrentInstance();
  57. const form = reactive({
  58. typeId: '',
  59. fileName: '',
  60. });
  61. const fileList = ref([]);
  62. const treeData = ref([]);
  63.  
  64. const { pageNum, pageSize, tableData, total, loading, getTableList } = usePagination(documentAccessRecordReadCount, { value: form });
  65.  
  66. const search = () => {
  67. pageNum.value = 1;
  68. getTableList();
  69. };
  70.  
  71. const resetQuery = () => {
  72. proxy.$refs.ruleForm.resetFields();
  73. search();
  74. };
  75.  
  76. const getTreeData = async () => {
  77. const res = await documentTypeTree();
  78. if (res?.code !== 200) return;
  79. treeData.value = res.data || [];
  80. };
  81.  
  82. onMounted(() => {
  83. getTableList();
  84. getTreeData();
  85. });
  86. </script>
  87.  
  88. <style lang="scss" scoped>
  89. .accessStatistics {
  90. padding: 20px;
  91. height: 90vh;
  92. overflow-y: hidden;
  93. .top {
  94. margin-bottom: 15px;
  95. }
  96. }
  97.  
  98. ::v-deep(.dialog) {
  99. .el-dialog__body {
  100. padding-bottom: 20px !important;
  101. }
  102. .el-dialog__footer {
  103. padding-top: 0 !important;
  104. }
  105. }
  106. .fileTreeSel {
  107. .el-tree-node__children {
  108. .el-tree-node__expand-icon {
  109. visibility: hidden;
  110. }
  111. }
  112. }
  113. </style>