Newer
Older
KaiFengPC / src / views / document / dataArchive / archAudit / index.vue
@zhangdeliang zhangdeliang on 23 May 4 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="archiveName">
  6. <el-input v-model="form.archiveName" placeholder="请输入归档名称" />
  7. </el-form-item>
  8. <el-form-item label="审核状态:" prop="status">
  9. <el-select v-model="form.status" placeholder="请选择审核状态" clearable>
  10. <el-option label="待审核" value="approve" />
  11. <el-option label="已审核" value="end" />
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item>
  15. <el-button type="primary" icon="Search" @click="search"> 查询</el-button>
  16. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  17. </el-form-item>
  18. </el-form>
  19. <el-row>
  20. <el-button type="primary" icon="Plus" plain @click="openDialog({}, 'batch')">批量归档</el-button>
  21. </el-row>
  22. </div>
  23. <el-table ref="multipleTableRef" :data="tableData" v-loading="loading" stripe :max-height="600">
  24. <!-- <el-table-column type="selection" width="55" /> -->
  25. <el-table-column type="index" width="55" label="序号" />
  26. <el-table-column label="归档名称" prop="archiveName" show-overflow-tooltip width="300" />
  27. <el-table-column label="归档项目" prop="projectName" show-overflow-tooltip />
  28. <el-table-column label="归档时间" prop="createTime" show-overflow-tooltip width="160" />
  29. <el-table-column label="审核状态" prop="status" show-overflow-tooltip width="160">
  30. <template #default="{ row }">
  31. <el-tag v-if="row.status === 'end'" type="success">{{ statusMap.get(row.status) }}</el-tag>
  32. <el-tag type="danger" v-else>{{ statusMap.get(row.status) }}</el-tag>
  33. </template>
  34. </el-table-column>
  35. <el-table-column label="操作" show-overflow-tooltip width="160">
  36. <template #default="{ row }">
  37. <el-button type="primary" link @click="openDialog2(row, 'view')">详情</el-button>
  38. <el-button type="primary" link @click="openDialog2(row, 'audit')" v-if="row.status === 'approve'">审核</el-button>
  39. </template>
  40. </el-table-column>
  41. </el-table>
  42. <pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" />
  43.  
  44. <el-dialog v-model="visible" title="工程资料归档" :close-on-click-modal="false" width="40%" :before-close="close" class="dialog">
  45. <operate v-if="visible" ref="operateRef" @close="close"></operate>
  46. <template #footer>
  47. <div class="dialog-footer">
  48. <el-button type="primary" @click="submit">确定</el-button>
  49. <el-button @click="close">取消</el-button>
  50. </div>
  51. </template>
  52. </el-dialog>
  53. <el-dialog
  54. v-model="visible2"
  55. :title="`工程资料归档${opts === 'audit' ? '审核' : '详情'}`"
  56. :close-on-click-modal="false"
  57. width="40%"
  58. :before-close="close2"
  59. class="dialog"
  60. >
  61. <audit v-if="visible2" ref="auditRef" :cur-row="curRow" @close="close2"></audit>
  62. <template #footer v-if="opts === 'audit'">
  63. <div class="dialog-footer">
  64. <el-button type="primary" @click="submit2">通过</el-button>
  65. <el-button @click="close2">取消</el-button>
  66. </div>
  67. </template>
  68. </el-dialog>
  69. </div>
  70. </template>
  71.  
  72. <script setup>
  73. import { reactive, ref, onMounted, computed, shallowRef } from 'vue';
  74. import { usePagination } from '@/hooks';
  75. import operate from './operate.vue';
  76. import audit from './audit.vue';
  77. import { getProjectArchivePage } from '@/api/document/dataArchive/archAudit';
  78. const { proxy } = getCurrentInstance();
  79. const statusMap = new Map([
  80. ['approve', '待审核'],
  81. ['end', '已审核'],
  82. ]);
  83. const form = reactive({
  84. archiveName: '',
  85. status: '',
  86. });
  87.  
  88. const visible = ref(false);
  89. const curRow = shallowRef({});
  90. const opts = ref('');
  91. const visible2 = ref(false);
  92.  
  93. const { pageNum, pageSize, tableData, total, loading, getTableList } = usePagination(getProjectArchivePage, { value: form });
  94.  
  95. const search = () => {
  96. pageNum.value = 1;
  97. getTableList();
  98. };
  99.  
  100. const resetQuery = () => {
  101. proxy.$refs.ruleForm.resetFields();
  102. search();
  103. };
  104.  
  105. const openDialog = data => {
  106. visible.value = true;
  107. };
  108.  
  109. const close = result => {
  110. if (result?.isRefresh) search();
  111. visible.value = false;
  112. };
  113.  
  114. const openDialog2 = (data, type) => {
  115. visible2.value = true;
  116. curRow.value = data;
  117. opts.value = type;
  118. };
  119.  
  120. const close2 = result => {
  121. if (result?.isRefresh) getTableList();
  122. visible2.value = false;
  123. curRow.value = {};
  124. opts.value = '';
  125. };
  126.  
  127. const submit = () => {
  128. proxy.$refs.operateRef.submit();
  129. };
  130.  
  131. const submit2 = () => {
  132. proxy.$refs.auditRef.submit();
  133. };
  134.  
  135. onMounted(() => {
  136. getTableList();
  137. });
  138. </script>
  139.  
  140. <style lang="scss" scoped>
  141. .arch {
  142. padding: 20px;
  143. height: 90vh;
  144. overflow-y: hidden;
  145. .top {
  146. margin-bottom: 15px;
  147. }
  148. }
  149.  
  150. :deep(.dialog) {
  151. .el-dialog__body {
  152. padding-bottom: 20px !important;
  153. }
  154. .el-dialog__footer {
  155. padding-top: 0 !important;
  156. }
  157. }
  158. </style>