<template> <div class="arch"> <div class="top"> <el-form ref="ruleForm" inline :model="form"> <el-form-item label="归档名称:" prop="archiveName"> <el-input v-model="form.archiveName" placeholder="请输入归档名称" /> </el-form-item> <el-form-item label="审核状态:" prop="status"> <el-select v-model="form.status" placeholder="请选择审核状态" clearable> <el-option label="待审核" value="approve" /> <el-option label="已审核" value="end" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="search"> 搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row> <el-button type="primary" icon="Plus" plain @click="openDialog({}, 'batch')">批量归档</el-button> </el-row> </div> <el-table ref="multipleTableRef" :data="tableData" v-loading="loading" stripe :max-height="600"> <!-- <el-table-column type="selection" width="55" /> --> <el-table-column type="index" width="55" label="序号" align="center" /> <el-table-column label="归档名称" prop="archiveName" show-overflow-tooltip width="300" /> <el-table-column label="归档项目" prop="projectName" show-overflow-tooltip /> <el-table-column label="归档时间" align="center" prop="createTime" show-overflow-tooltip width="160" /> <el-table-column label="审核状态" align="center" prop="status" show-overflow-tooltip width="160"> <template #default="{ row }"> <el-tag v-if="row.status === 'end'" type="success">{{ statusMap.get(row.status) }}</el-tag> <el-tag type="danger" v-else>{{ statusMap.get(row.status) }}</el-tag> </template> </el-table-column> <el-table-column label="操作" align="center" show-overflow-tooltip width="160"> <template #default="{ row }"> <el-button type="primary" icon="View" link @click="openDialog2(row, 'view')">详情</el-button> <el-button type="primary" icon="Edit" link @click="openDialog2(row, 'audit')" v-if="row.status === 'approve'">审核</el-button> </template> </el-table-column> </el-table> <pagination :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getTableList" /> <el-dialog v-model="visible" title="工程资料归档" :close-on-click-modal="false" width="40%" :before-close="close" class="dialog"> <operate v-if="visible" ref="operateRef" @close="close"></operate> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="submit">确定</el-button> <el-button @click="close">取消</el-button> </div> </template> </el-dialog> <el-dialog v-model="visible2" :title="`工程资料归档${opts === 'audit' ? '审核' : '详情'}`" :close-on-click-modal="false" width="40%" :before-close="close2" class="dialog" > <audit v-if="visible2" ref="auditRef" :cur-row="curRow" @close="close2"></audit> <template #footer v-if="opts === 'audit'"> <div class="dialog-footer"> <el-button type="primary" @click="submit2">通过</el-button> <el-button @click="close2">取消</el-button> </div> </template> </el-dialog> </div> </template> <script setup> import { reactive, ref, onMounted, computed, shallowRef } from 'vue'; import { usePagination } from '@/hooks'; import operate from './operate.vue'; import audit from './audit.vue'; import { getProjectArchivePage } from '@/api/document/dataArchive/archAudit'; const { proxy } = getCurrentInstance(); const statusMap = new Map([ ['approve', '待审核'], ['end', '已审核'], ]); const form = reactive({ archiveName: '', status: '', }); const visible = ref(false); const curRow = shallowRef({}); const opts = ref(''); const visible2 = ref(false); const { pageNum, pageSize, tableData, total, loading, getTableList } = usePagination(getProjectArchivePage, { value: form }); const search = () => { pageNum.value = 1; getTableList(); }; const resetQuery = () => { proxy.$refs.ruleForm.resetFields(); search(); }; const openDialog = data => { visible.value = true; }; const close = result => { if (result?.isRefresh) search(); visible.value = false; }; const openDialog2 = (data, type) => { visible2.value = true; curRow.value = data; opts.value = type; }; const close2 = result => { if (result?.isRefresh) getTableList(); visible2.value = false; curRow.value = {}; opts.value = ''; }; const submit = () => { proxy.$refs.operateRef.submit(); }; const submit2 = () => { proxy.$refs.auditRef.submit(); }; onMounted(() => { getTableList(); }); </script> <style lang="scss" scoped> .arch { padding: 20px; height: 90vh; overflow-y: hidden; .top { margin-bottom: 15px; } } ::v-deep(.dialog) { .el-dialog__body { padding-bottom: 20px !important; } .el-dialog__footer { padding-top: 0 !important; } } </style>