forked from liweijie/education
257 lines
8.4 KiB
Vue
257 lines
8.4 KiB
Vue
<template>
|
||
<div class="app-container warning-result-page">
|
||
<!-- ==================== 1. 查询条件 ==================== -->
|
||
<el-card shadow="never" class="search-card">
|
||
<el-form ref="searchFormRef" :model="searchForm" label-width="110px" class="search-form">
|
||
<el-row :gutter="24">
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
||
<el-form-item label="年度">
|
||
<el-input v-model="searchForm.nd" placeholder="请输入年度" clearable @keyup.enter.native="handleSearch" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
||
<el-form-item label="预警条件编号">
|
||
<el-input v-model="searchForm.yjtjbh" placeholder="请输入预警条件编号" clearable @keyup.enter.native="handleSearch" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
||
<el-form-item label="学员编号">
|
||
<el-input v-model="searchForm.xybh" placeholder="请输入学员编号" clearable @keyup.enter.native="handleSearch" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
||
<el-form-item label="发布">
|
||
<el-select v-model="searchForm.fb" placeholder="请选择发布状态" clearable class="w-full">
|
||
<el-option label="未发布" :value="0" />
|
||
<el-option label="已发布" :value="1" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row class="search-actions-row">
|
||
<el-col :span="24" class="search-actions">
|
||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
|
||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<!-- ==================== 2. 列表 ==================== -->
|
||
<el-card shadow="never" class="table-card">
|
||
<div class="table-header">
|
||
<span class="table-title">预警结果列表：</span>
|
||
</div>
|
||
<el-table v-loading="loading" :data="tableData" stripe border highlight-current-row>
|
||
<el-table-column prop="bh" label="编号" min-width="140" show-overflow-tooltip />
|
||
<el-table-column prop="nd" label="年度" width="90" align="center" />
|
||
<el-table-column prop="yjtjbh" label="预警条件编号" min-width="140" show-overflow-tooltip />
|
||
<el-table-column prop="xybh" label="学员编号" min-width="120" show-overflow-tooltip />
|
||
<el-table-column prop="cjsj" label="创建时间" width="160" show-overflow-tooltip />
|
||
<el-table-column label="发布" width="90" align="center">
|
||
<template slot-scope="{ row }">
|
||
<el-tag :type="Number(row.fb) === 1 ? 'success' : 'info'" size="mini">
|
||
{{ Number(row.fb) === 1 ? '是' : '否' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="fbsj" label="发布时间" width="160" show-overflow-tooltip />
|
||
<el-table-column label="操作" width="100" align="center" fixed="right" class-name="table-action-column">
|
||
<template slot-scope="{ row }">
|
||
<el-button type="text" size="small" icon="el-icon-view" @click="handleDetail(row)">详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-pagination
|
||
:current-page="pageNum"
|
||
:page-size="pageSize"
|
||
:total="total"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
class="pagination-wrapper"
|
||
@current-change="handlePageChange"
|
||
@size-change="handleSizeChange"
|
||
/>
|
||
</el-card>
|
||
|
||
<!-- ==================== 3. 详情对话框 ==================== -->
|
||
<el-dialog title="预警结果详情" :visible="detailDialogVisible" width="560px" :close-on-click-modal="false"
|
||
@update:visible="val => detailDialogVisible = val">
|
||
<div v-loading="detailLoading" class="detail-body">
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="编号">{{ detailForm.bh || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="年度">{{ detailForm.nd || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="预警条件编号">{{ detailForm.yjtjbh || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="学员编号">{{ detailForm.xybh || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="创建时间">{{ detailForm.cjsj || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="发布时间">{{ detailForm.fbsj || '-' }}</el-descriptions-item>
|
||
<el-descriptions-item label="发布">
|
||
<el-tag :type="Number(detailForm.fb) === 1 ? 'success' : 'info'" size="mini">
|
||
{{ Number(detailForm.fb) === 1 ? '是' : '否' }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div slot="footer">
|
||
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
listWarningResult,
|
||
getWarningResult
|
||
} from '@/api/studentRecords/warningResult'
|
||
|
||
export default {
|
||
name: 'WarningResult',
|
||
data() {
|
||
return {
|
||
// ==================== 查询条件 ====================
|
||
searchForm: {
|
||
nd: '',
|
||
yjtjbh: '',
|
||
xybh: '',
|
||
fb: undefined
|
||
},
|
||
|
||
// ==================== 列表数据 ====================
|
||
loading: false,
|
||
tableData: [],
|
||
total: 0,
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
|
||
// ==================== 详情 ====================
|
||
detailDialogVisible: false,
|
||
detailLoading: false,
|
||
detailForm: {}
|
||
}
|
||
},
|
||
created() {
|
||
this.fetchList()
|
||
},
|
||
methods: {
|
||
// ==================== 查询列表 ====================
|
||
fetchList() {
|
||
this.loading = true
|
||
const params = {
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize
|
||
}
|
||
// 文本条件非空时才传
|
||
;['nd', 'yjtjbh', 'xybh'].forEach(key => {
|
||
const value = this.searchForm[key]
|
||
if (value !== '' && value !== null && value !== undefined) {
|
||
params[key] = String(value).trim()
|
||
}
|
||
})
|
||
// 发布：等值筛选（选中时才传）
|
||
if (this.searchForm.fb !== undefined && this.searchForm.fb !== '' && this.searchForm.fb !== null) {
|
||
params.fb = this.searchForm.fb
|
||
}
|
||
listWarningResult(params).then(response => {
|
||
const data = response.data || {}
|
||
this.tableData = data.records || []
|
||
this.total = data.total || 0
|
||
this.loading = false
|
||
}).catch(() => {
|
||
this.tableData = []
|
||
this.total = 0
|
||
this.loading = false
|
||
})
|
||
},
|
||
|
||
handleSearch() {
|
||
this.pageNum = 1
|
||
this.fetchList()
|
||
},
|
||
|
||
handleReset() {
|
||
this.$refs.searchFormRef.resetFields()
|
||
this.pageNum = 1
|
||
this.fetchList()
|
||
},
|
||
|
||
handlePageChange(current) {
|
||
this.pageNum = current
|
||
this.fetchList()
|
||
},
|
||
|
||
handleSizeChange(size) {
|
||
this.pageSize = size
|
||
this.pageNum = 1
|
||
this.fetchList()
|
||
},
|
||
|
||
// ==================== 详情 ====================
|
||
handleDetail(row) {
|
||
this.detailDialogVisible = true
|
||
this.detailLoading = true
|
||
this.detailForm = {}
|
||
getWarningResult(row.bh).then(response => {
|
||
this.detailForm = response.data || {}
|
||
this.detailLoading = false
|
||
}).catch(() => {
|
||
this.detailLoading = false
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.app-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.warning-result-page {
|
||
.search-card {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.search-form {
|
||
.w-full {
|
||
width: 100%;
|
||
}
|
||
|
||
.search-actions-row {
|
||
margin-top: 2px;
|
||
border-top: 1px dashed #ebeef5;
|
||
padding-top: 14px;
|
||
}
|
||
|
||
.search-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
|
||
.table-card {
|
||
.table-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16px;
|
||
|
||
.table-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
.pagination-wrapper {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 16px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|