Newer
Older
KaiFengPC / src / views / document / fileManagement / readAuth / index.vue
@zhangdeliang zhangdeliang on 23 May 5 KB 初始化项目
  1. <template>
  2. <div class="readAuth">
  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="fileTag">
  18. <el-select v-model="form.fileTag" placeholder="请选择文件标签" clearable multiple style="width: 200px">
  19. <el-option v-for="dict in document_tag" :key="dict.value" :label="dict.label" :value="dict.value" />
  20. </el-select>
  21. </el-form-item>
  22. <el-form-item label="文件名称:" prop="fileName">
  23. <el-input v-model="form.fileName" placeholder="请输入文件名称" />
  24. </el-form-item>
  25. <el-form-item>
  26. <el-button type="primary" icon="Search" @click="search"> 查询</el-button>
  27. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  28. </el-form-item>
  29. </el-form>
  30. </div>
  31. <el-table :data="tableData" v-loading="loading" stripe :max-height="600">
  32. <el-table-column type="index" width="55" label="序号" />
  33. <el-table-column label="文件名称" prop="fileName" show-overflow-tooltip width="200" />
  34. <el-table-column label="权限用户数" prop="authUserNum" show-overflow-tooltip />
  35. <el-table-column label="资料权属单位" prop="deptName" show-overflow-tooltip />
  36. <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip />
  37. <el-table-column label="创建人" prop="nickName" show-overflow-tooltip />
  38. <el-table-column label="文件标签" prop="fileTagNames" show-overflow-tooltip />
  39. <el-table-column label="电子档名称" prop="sysFileList" show-overflow-tooltip>
  40. <template #default="{ row }">
  41. <span>{{ row.originalName || '-' }}</span>
  42. </template>
  43. </el-table-column>
  44. <el-table-column label="电子档大小" prop="sysFileList" show-overflow-tooltip>
  45. <template #default="{ row }">
  46. <span>{{ handleFileSize(row.size) || '-' }}</span>
  47. </template>
  48. </el-table-column>
  49. <el-table-column label="电子档格式" prop="sysFileList" show-overflow-tooltip>
  50. <template #default="{ row }">
  51. <span>{{ row.extension || '-' }}</span>
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="操作" show-overflow-tooltip width="100">
  55. <template #default="{ row }">
  56. <el-button type="primary" link @click="openDialog(row)">调整权限</el-button>
  57. </template>
  58. </el-table-column>
  59. </el-table>
  60. <pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
  61.  
  62. <el-dialog v-model="visible" title="调整权限" :close-on-click-modal="false" width="25%" :before-close="close" class="dialog">
  63. <operate v-if="visible" ref="operateRef" :cur-row="curRow" @close="close"></operate>
  64. <template #footer>
  65. <div class="dialog-footer">
  66. <el-button type="primary" @click="submit">保存</el-button>
  67. <el-button @click="close">取消</el-button>
  68. </div>
  69. </template>
  70. </el-dialog>
  71. </div>
  72. </template>
  73.  
  74. <script setup>
  75. import { reactive, ref, onMounted, computed, shallowRef } from 'vue';
  76. import { optTextMap, statusMap } from '@/utils/map';
  77. import { usePagination } from '@/hooks';
  78. import { handleFileSize } from '@/utils';
  79. import operate from './operate.vue';
  80. import { getDocumentFileList } from '@/api/document/fileManagement/readAuth';
  81. import { documentTypeTree } from '@/api/document/dataClassify';
  82. import { getDocumentFilePage } from '@/api/document/fileManagement/list';
  83. const { proxy } = getCurrentInstance();
  84. const { document_tag } = proxy.useDict('document_tag');
  85.  
  86. const form = reactive({
  87. typeId: '',
  88. fileTag: [],
  89. fileName: '',
  90. });
  91.  
  92. const params = computed(() => {
  93. const fileTag = form.fileTag.join();
  94. return {
  95. ...form,
  96. fileTag,
  97. };
  98. });
  99.  
  100. const { pageNum, pageSize, tableData, total, loading, getTableList } = usePagination(getDocumentFilePage, params);
  101.  
  102. const visible = ref(false);
  103. const curRow = shallowRef({});
  104. const fileList = ref([]);
  105. const treeData = ref([]);
  106.  
  107. const search = () => {
  108. pageNum.value = 1;
  109. getTableList();
  110. };
  111.  
  112. const resetQuery = () => {
  113. proxy.$refs.ruleForm.resetFields();
  114. search();
  115. };
  116.  
  117. const openDialog = (data, type) => {
  118. visible.value = true;
  119. curRow.value = data;
  120. };
  121.  
  122. const close = result => {
  123. if (result.isRefresh) getTableList();
  124. visible.value = false;
  125. curRow.value = {};
  126. };
  127.  
  128. const del = row => {
  129. proxy.$modal
  130. .confirm('是否确认删除?')
  131. .then(async () => {
  132. const res = await documentFileDel(row.id);
  133. if (res?.code !== 200) return;
  134. getTableList();
  135. })
  136. .catch(() => {});
  137. };
  138.  
  139. const submit = () => {
  140. proxy.$refs.operateRef.submit();
  141. };
  142.  
  143. const getFileList = async () => {
  144. const res = await getDocumentFileList();
  145. if (res?.code !== 200) return;
  146. fileList.value = res.data || [];
  147. };
  148.  
  149. const getTreeData = async () => {
  150. const res = await documentTypeTree();
  151. if (res?.code !== 200) return;
  152. treeData.value = res.data || [];
  153. };
  154.  
  155. onMounted(() => {
  156. getTableList();
  157. getFileList();
  158. getTreeData();
  159. });
  160. </script>
  161.  
  162. <style lang="scss" scoped>
  163. .readAuth {
  164. padding: 20px;
  165. height: 90vh;
  166. overflow-y: hidden;
  167. .top {
  168. margin-bottom: 15px;
  169. }
  170. }
  171.  
  172. :deep(.dialog) {
  173. .el-dialog__body {
  174. padding-bottom: 20px !important;
  175. }
  176. .el-dialog__footer {
  177. padding-top: 0 !important;
  178. }
  179. }
  180. </style>