Newer
Older
KaiFengPC / src / views / document / dataArchive / archDetali / index.vue
@zhangdeliang zhangdeliang on 23 May 3 KB 初始化项目
  1. <template>
  2. <div class="arch">
  3. <div class="top">
  4. <el-form ref="ruleForm" inline :model="form">
  5. <el-form-item label="文件名称:" prop="fileName">
  6. <el-input v-model="form.fileName" placeholder="请输入文件名称" />
  7. </el-form-item>
  8. <el-form-item label="文件标签:" prop="fileTag">
  9. <el-select v-model="form.fileTag" placeholder="请选择文件标签" clearable multiple collapse-tags>
  10. <el-option v-for="dict in document_tag" :key="dict.value" :label="dict.label" :value="dict.value" />
  11. </el-select>
  12. </el-form-item>
  13. <el-form-item>
  14. <el-button type="primary" icon="Search" @click="search"> 查询</el-button>
  15. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  16. </el-form-item>
  17. </el-form>
  18. </div>
  19. <el-table ref="multipleTableRef" :data="tableData" v-loading="loading" stripe :max-height="600">
  20. <el-table-column type="index" width="55" label="序号" />
  21. <el-table-column label="文件名称" prop="fileName" show-overflow-tooltip width="200" />
  22. <el-table-column label="所属项目" prop="projectName" show-overflow-tooltip />
  23. <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip />
  24. <el-table-column label="文件标签" prop="fileTagNames" show-overflow-tooltip />
  25. <el-table-column label="电子档名称" prop="sysFileList" show-overflow-tooltip>
  26. <template #default="{ row }">
  27. <span>{{ row?.sysFileList?.[0]?.name || '-' }}</span>
  28. </template>
  29. </el-table-column>
  30. <el-table-column label="电子档大小" prop="sysFileList" show-overflow-tooltip>
  31. <template #default="{ row }">
  32. <span>{{ handleFileSize(row?.sysFileList?.[0].size) || '-' }}</span>
  33. </template>
  34. </el-table-column>
  35. <el-table-column label="电子档格式" prop="sysFileList" show-overflow-tooltip>
  36. <template #default="{ row }">
  37. <span>{{ row?.sysFileList?.[0]?.extension || '-' }}</span>
  38. </template>
  39. </el-table-column>
  40. </el-table>
  41. <pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
  42. </div>
  43. </template>
  44.  
  45. <script setup>
  46. import { reactive, ref, onMounted, computed, shallowRef } from 'vue';
  47. import { usePagination } from '@/hooks';
  48. import { handleFileSize } from '@/utils';
  49. import { getDocumentArchiveListPage } from '@/api/document/dataArchive/archDetali';
  50. const { proxy } = getCurrentInstance();
  51. const { document_tag } = proxy.useDict('document_tag');
  52. const form = reactive({
  53. fileName: '',
  54. fileTag: [],
  55. });
  56.  
  57. const params = computed(() => {
  58. const fileTag = form.fileTag.join();
  59. return {
  60. ...form,
  61. fileTag,
  62. };
  63. });
  64.  
  65. const { pageNum, pageSize, tableData, total, loading, getTableList } = usePagination(getDocumentArchiveListPage, params);
  66.  
  67. const search = () => {
  68. pageNum.value = 1;
  69. getTableList();
  70. };
  71.  
  72. const resetQuery = () => {
  73. proxy.$refs.ruleForm.resetFields();
  74. search();
  75. };
  76.  
  77. onMounted(() => {
  78. getTableList();
  79. });
  80. </script>
  81.  
  82. <style lang="scss" scoped>
  83. .arch {
  84. padding: 20px;
  85. height: 90vh;
  86. overflow-y: hidden;
  87. .top {
  88. margin-bottom: 15px;
  89. }
  90. }
  91.  
  92. :deep(.dialog) {
  93. .el-dialog__body {
  94. padding-bottom: 20px !important;
  95. }
  96. .el-dialog__footer {
  97. padding-top: 0 !important;
  98. }
  99. }
  100. </style>