This commit is contained in:
parent
4949727bbf
commit
2aa41bf3e4
|
|
@ -0,0 +1,17 @@
|
|||
import request from '@/axios';
|
||||
|
||||
// 档案移交审核列表
|
||||
export function list(params) {
|
||||
return request({
|
||||
url: '/blade-system/rectFeedback/list',
|
||||
method: 'POST',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
export function getRectifyDetailApi(params) {
|
||||
return request({
|
||||
url: '/blade-system/rectFeedback/detail',
|
||||
method: 'POST',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
|
|
@ -116,6 +116,14 @@ export default [
|
|||
title: '移交详情'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/archivesManagement/rectFeedbackDetail',
|
||||
name: 'rectifyDetail',
|
||||
component: () => import('@/views/fileTransfer/components/rectFeedbackDetail.vue'),
|
||||
meta: {
|
||||
title: '整改反馈详情'
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
path: '/fileManager/rectificationList',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,204 @@
|
|||
<template>
|
||||
<div class="rectify-detail-container">
|
||||
<!-- 返回按钮 -->
|
||||
<div>
|
||||
<el-button type="danger" plain :icon="Close" size="mini" @click="handleClose">返回</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 状态标题区域 -->
|
||||
<div class="status-section">
|
||||
<div class="status-icon">
|
||||
<Timer class="status-icon-svg" />
|
||||
</div>
|
||||
<div class="status-text">待整改</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<div class="table-section">
|
||||
<el-table
|
||||
:data="fileList"
|
||||
border
|
||||
style="width: 100%"
|
||||
class="detail-table"
|
||||
max-height="600"
|
||||
>
|
||||
<el-table-column prop="index" label="序号" width="80" align="center">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="proName" label="项目名称" min-width="150">
|
||||
<template #default="scope">
|
||||
{{ scope.row.proName || '--' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="singleProName" label="单项工程名称" min-width="150">
|
||||
<template #default="scope">
|
||||
{{ scope.row.singleProName || '--' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deptName" label="责任单位" min-width="120">
|
||||
<template #default="scope">
|
||||
{{ scope.row.deptName || '--' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="archiveName" label="档案名称" min-width="300">
|
||||
<template #default="scope">
|
||||
{{ scope.row.archiveName || '--' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="整改内容" min-width="200">
|
||||
<template #default="scope">
|
||||
{{ scope.row.description || '--' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 整改信息区域 -->
|
||||
<div class="info-section">
|
||||
<span>整改下发人：{{ issuerName || '--' }}</span>
|
||||
<span>联系方式：{{ issuerPhone || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Close, Timer } from '@element-plus/icons-vue'
|
||||
|
||||
// API（请根据你实际路径调整）
|
||||
import { getRectifyDetailApi } from '@/api/filesTransfer/rectFeedback.js'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// 从 query 获取参数
|
||||
const id = route.query.id || '0'
|
||||
const proId = route.query.proId || '0'
|
||||
|
||||
// 响应式数据
|
||||
const fileList = ref([])
|
||||
const issuerName = ref('')
|
||||
const issuerPhone = ref('')
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
document.body.style.overflow = 'hidden'
|
||||
initData()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.body.style.overflow = 'auto'
|
||||
})
|
||||
|
||||
// 初始化数据
|
||||
const initData = async () => {
|
||||
try {
|
||||
const res = await getRectifyDetailApi({ id, proId })
|
||||
console.log('获取整改详情成功:', res.data)
|
||||
|
||||
if (res.data?.code === 200) {
|
||||
const data = res.data.data || {}
|
||||
|
||||
// 1. 先赋值下发人信息（用于底部）
|
||||
issuerName.value = data.issuerName || '--'
|
||||
issuerPhone.value = data.issuerPhone || '--'
|
||||
// 关键：把单条记录转为数组
|
||||
if (Object.keys(data).length > 0) {
|
||||
fileList.value = [{
|
||||
proName: data.proName || '--',
|
||||
singleProName: data.singleProName || '--',
|
||||
deptName: data.deptName || '', // 避免显示 --
|
||||
archiveName: (data.contentName || ''),
|
||||
description: data.description || '--',
|
||||
id: data.id
|
||||
}]
|
||||
} else {
|
||||
fileList.value = []
|
||||
}
|
||||
} else {
|
||||
fileList.value = []
|
||||
ElMessage.warning(res.data?.msg || '暂无数据')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载整改详情失败:', error)
|
||||
ElMessage.error('加载详情失败')
|
||||
fileList.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 返回
|
||||
const handleClose = () => {
|
||||
router.go(-1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rectify-detail-container {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 返回按钮 */
|
||||
.rectify-detail-container > div:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 状态区域 */
|
||||
.status-section {
|
||||
text-align: center;
|
||||
margin: 0 auto 24px;
|
||||
max-width: 120px;
|
||||
}
|
||||
.status-icon {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.status-icon-svg {
|
||||
font-size: 24px;
|
||||
color: #409eff;
|
||||
}
|
||||
.status-text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 表格区域 */
|
||||
.table-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* 信息区域 */
|
||||
.info-section {
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
border-top: 1px dashed #ebeef5;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
.info-section span {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
.rectify-detail-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.rectify-detail-container::-webkit-scrollbar-thumb {
|
||||
background: #c0c4cc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.rectify-detail-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #909399;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
<template>
|
||||
<basic-container>
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
:data="tableData"
|
||||
:table-loading="loading"
|
||||
:option="tableOption"
|
||||
:page="page"
|
||||
@search-change="searchChange"
|
||||
@size-change="sizeChange"
|
||||
@current-change="currentChange"
|
||||
@refresh-change="refreshChange"
|
||||
>
|
||||
<!-- 整改状态插槽 -->
|
||||
<template #rectifyStatus="{ row }">
|
||||
<el-tag size="small" :type="getStatusType(row.rectifyStatus)">
|
||||
{{ getStatusText(row.rectifyStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<template #menu="{ row }">
|
||||
<el-button
|
||||
plain
|
||||
size="small"
|
||||
type="success"
|
||||
v-hasPermi="['rectify:feedback:query']"
|
||||
@click="handleDetail(row)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
// 假设你有对应的 API（请根据实际路径调整）
|
||||
import { list } from '@/api/filesTransfer/rectFeedback'
|
||||
|
||||
const router = useRouter()
|
||||
const crudRef = ref()
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const page = reactive({
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
singleProName: '',
|
||||
proType: '',
|
||||
voltageLevel: ''
|
||||
})
|
||||
|
||||
// 字典数据
|
||||
const dictData = reactive({
|
||||
pro_type: [],
|
||||
voltage_level: []
|
||||
})
|
||||
|
||||
// 表格配置
|
||||
const tableOption = computed(() => ({
|
||||
border: true,
|
||||
index: true,
|
||||
indexLabel: '序号',
|
||||
menuWidth: 120,
|
||||
align: 'center',
|
||||
headerAlign: 'center',
|
||||
labelWidth: 120,
|
||||
searchMenuSpan: 8,
|
||||
searchLabelWidth: 80,
|
||||
addBtn: false,
|
||||
delBtn: false,
|
||||
editBtn: false,
|
||||
viewBtn: false,
|
||||
column: [
|
||||
{
|
||||
label: '项目名称',
|
||||
prop: 'proName',
|
||||
width: 200,
|
||||
overHidden: true,
|
||||
showOverflowTooltip: true
|
||||
},
|
||||
{
|
||||
label: '单项工程名称',
|
||||
prop: 'singleProName',
|
||||
width: 200,
|
||||
overHidden: true,
|
||||
showOverflowTooltip: true,
|
||||
search: true,
|
||||
searchLabel: '单项工程名称',
|
||||
searchPlaceholder: '请输入单项工程名称',
|
||||
searchSpan: 8
|
||||
},
|
||||
{
|
||||
label: '责任单位',
|
||||
prop: 'deptName',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: '下发时间',
|
||||
prop: 'issueTime',
|
||||
type: 'datetime',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: '整改状态',
|
||||
prop: 'rectifyStatus',
|
||||
slot: true,
|
||||
align: 'center',
|
||||
formatter: (row) => getStatusText(row.rectifyStatus)
|
||||
}
|
||||
]
|
||||
}))
|
||||
|
||||
// 获取列表
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
...searchForm,
|
||||
pageNum: page.currentPage,
|
||||
pageSize: page.pageSize
|
||||
}
|
||||
// 清理空值
|
||||
Object.keys(params).forEach(k => {
|
||||
if (params[k] === '' || params[k] == null) delete params[k]
|
||||
})
|
||||
|
||||
const res = await list(params)
|
||||
if (res.data?.code === 200) {
|
||||
tableData.value = res.data.rows || []
|
||||
page.total = res.data.total || 0
|
||||
} else {
|
||||
tableData.value = []
|
||||
page.total = 0
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取列表失败', err)
|
||||
tableData.value = []
|
||||
page.total = 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 事件处理
|
||||
const searchChange = (params, done) => {
|
||||
Object.assign(searchForm, params)
|
||||
page.currentPage = 1
|
||||
getList()
|
||||
done()
|
||||
}
|
||||
const sizeChange = (val) => {
|
||||
page.pageSize = val
|
||||
getList()
|
||||
}
|
||||
const currentChange = (val) => {
|
||||
page.currentPage = val
|
||||
getList()
|
||||
}
|
||||
const refreshChange = () => {
|
||||
getList()
|
||||
}
|
||||
|
||||
// 详情
|
||||
const handleDetail = (row) => {
|
||||
router.push({
|
||||
name: 'rectifyDetail',
|
||||
query: {
|
||||
id: row.id ?? '0',
|
||||
proId: row.proId ?? '0',
|
||||
viewStatus: 'rectify',
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 状态文本
|
||||
const getStatusText = (status) => {
|
||||
switch (status) {
|
||||
case '0': return '整改中'
|
||||
case '1': return '已反馈'
|
||||
case '2': return '已完成'
|
||||
default: return '未知'
|
||||
}
|
||||
}
|
||||
const getStatusType = (status) => {
|
||||
switch (status) {
|
||||
case '0': return 'warning'
|
||||
case '1': return 'primary'
|
||||
case '2': return 'success'
|
||||
default: return 'info'
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(async () => {
|
||||
await getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 复用 audit.vue 的样式 */
|
||||
:deep(.avue-crud__search) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
:deep(.avue-crud__search .el-form-item) {
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
:deep(.avue-crud__search .el-form-item__label) {
|
||||
width: auto !important;
|
||||
padding-right: 12px;
|
||||
}
|
||||
:deep(.avue-crud__search .el-input),
|
||||
:deep(.avue-crud__search .el-select) {
|
||||
width: 200px !important;
|
||||
}
|
||||
:deep(.avue-crud__search .el-form--inline .el-form-item) {
|
||||
display: inline-flex;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
vertical-align: top;
|
||||
}
|
||||
:deep(.avue-crud__table) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue