forked from liweijie/education
前端代码
This commit is contained in:
liumengyu
@@ -0,0 +1,419 @@
|
||||
<template>
|
||||
<div class="app-container joint-training-page">
|
||||
<div class="list-title">联教联训管理</div>
|
||||
|
||||
<!-- ==================== 1. 查询条件区域 ==================== -->
|
||||
<el-card shadow="never" class="search-card">
|
||||
<el-form :model="searchForm" label-width="110px" class="search-form">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="searchForm.mc" placeholder="请输入名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="年度">
|
||||
<el-input v-model="searchForm.nd" placeholder="如 2026" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="教员编号">
|
||||
<el-input v-model="searchForm.jybh" placeholder="如 JY00128" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="合班类型">
|
||||
<el-select v-model="searchForm.hflx" placeholder="请选择" clearable class="w-full">
|
||||
<el-option v-for="item in hflxOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="search-actions">
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- ==================== 2. 文件操作区域 ==================== -->
|
||||
<el-card shadow="never" class="upload-card">
|
||||
<div class="upload-row">
|
||||
<div class="upload-left">
|
||||
<el-button type="primary" @click="handleDownloadTemplate">【联教联训数据文件模板】下载</el-button>
|
||||
<el-button type="primary" plain @click="handleChooseFile">选择文件</el-button>
|
||||
<span class="file-name" :class="{ 'has-file': selectedFile }">{{ fileName }}</span>
|
||||
<input ref="fileInputRef" type="file" style="display: none" @change="handleFileChange" />
|
||||
</div>
|
||||
<div class="upload-right">
|
||||
<el-button type="primary" @click="handleUpload">上传数据</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload-tip">您还没建立 联教联训证明。</div>
|
||||
</el-card>
|
||||
|
||||
<!-- ==================== 3. 数据表格 ==================== -->
|
||||
<el-card shadow="never" class="table-card">
|
||||
<div class="table-title">联教联训记录列表</div>
|
||||
<el-table v-loading="tableLoading" :data="tableData" border stripe style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="55" align="center" />
|
||||
<el-table-column prop="bh" label="任务编号" width="150" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="mc" label="名称" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="jybh" label="教员编号" width="100" align="center" />
|
||||
<el-table-column prop="rwlb" label="任务类别" width="110" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="ksl" label="课时量" width="80" align="center" />
|
||||
<el-table-column label="合班类型" width="90" align="center">
|
||||
<template slot-scope="{ row }">{{ formatHflx(row.hflx) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="是否评优" width="90" align="center">
|
||||
<template slot-scope="{ row }">{{ formatSfpy(row.sfpy) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="nd" label="年度" width="80" align="center" />
|
||||
<el-table-column prop="xq" label="学期" width="110" align="center" />
|
||||
<el-table-column prop="sm" label="说明" min-width="180" show-overflow-tooltip />
|
||||
</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"
|
||||
@current-change="handlePageChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- ==================== 4. 新增联教联训记录区域 ==================== -->
|
||||
<el-card shadow="never" class="search-card">
|
||||
<div class="form-title">新增联教联训记录</div>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="search-form">
|
||||
<el-row :gutter="0">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="任务编号" prop="bh">
|
||||
<el-input v-model="form.bh" placeholder="如 RW20260810001" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="mc">
|
||||
<el-input v-model="form.mc" placeholder="请输入名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="教员编号" prop="jybh">
|
||||
<el-input v-model="form.jybh" placeholder="如 JY00128" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务类别" prop="rwlb">
|
||||
<el-input v-model="form.rwlb" placeholder="如 理论授课" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="课时量" prop="ksl">
|
||||
<el-input v-model="form.ksl" placeholder="如 16.5" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="合班类型">
|
||||
<el-radio-group v-model="form.hflx">
|
||||
<el-radio :label="0">未合班</el-radio>
|
||||
<el-radio :label="1">合班</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否评优">
|
||||
<el-radio-group v-model="form.sfpy">
|
||||
<el-radio :label="0">否</el-radio>
|
||||
<el-radio :label="1">是</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="年度" prop="nd">
|
||||
<el-input v-model="form.nd" placeholder="如 2026" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="学期" prop="xq">
|
||||
<el-input v-model="form.xq" placeholder="如 2026-2027-1" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="说明" prop="sm">
|
||||
<el-input v-model="form.sm" type="textarea" :rows="3" placeholder="请输入说明" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="search-actions">
|
||||
<el-button type="primary" :loading="addLoading" @click="handleAdd">添加</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 模拟列表数据（后端接口未提供，接口就绪后可删除并改为接口加载）
|
||||
const mockTableData = [
|
||||
{ bh: 'RW20260810001', mc: '某型装备联合训练', jybh: 'JY00128', rwlb: '理论授课', ksl: 16.5, hflx: 1, sfpy: 1, nd: '2026', xq: '2026-2027-1', sm: '' },
|
||||
{ bh: 'RW20260810002', mc: '通信保障联合演练', jybh: 'JY00302', rwlb: '实践教学', ksl: 24, hflx: 0, sfpy: 0, nd: '2026', xq: '2026-2027-1', sm: '跨单位合练' },
|
||||
{ bh: 'RW20260721003', mc: '联合教学研讨', jybh: 'JY00511', rwlb: '教学研究', ksl: 8, hflx: 1, sfpy: 1, nd: '2025', xq: '2025-2026-2', sm: '' }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'JointTrainingIndex',
|
||||
data() {
|
||||
return {
|
||||
// ==================== 1. 查询条件 ====================
|
||||
searchForm: {
|
||||
mc: '',
|
||||
jybh: '',
|
||||
nd: '',
|
||||
hflx: ''
|
||||
},
|
||||
hflxOptions: [
|
||||
{ label: '未合班', value: '0' },
|
||||
{ label: '合班', value: '1' }
|
||||
],
|
||||
|
||||
// ==================== 2. 文件操作 ====================
|
||||
selectedFile: null,
|
||||
|
||||
// ==================== 3. 表格数据 ====================
|
||||
tableLoading: false,
|
||||
tableData: [],
|
||||
allData: [],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
|
||||
// ==================== 4. 新增联教联训记录表单 ====================
|
||||
form: {
|
||||
bh: this.genBh(),
|
||||
mc: '',
|
||||
jybh: '',
|
||||
rwlb: '',
|
||||
ksl: '',
|
||||
hflx: 0,
|
||||
sfpy: 0,
|
||||
nd: '2026',
|
||||
xq: '2026-2027-1',
|
||||
sm: ''
|
||||
},
|
||||
rules: {
|
||||
bh: [{ required: true, message: '请输入任务编号', trigger: 'blur' }],
|
||||
mc: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
jybh: [{ required: true, message: '请输入教员编号', trigger: 'blur' }],
|
||||
rwlb: [{ required: true, message: '请输入任务类别', trigger: 'blur' }],
|
||||
ksl: [{ required: true, message: '请输入课时量', trigger: 'blur' }],
|
||||
nd: [{ required: true, message: '请输入年度', trigger: 'blur' }]
|
||||
},
|
||||
addLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
fileName() {
|
||||
return (this.selectedFile && this.selectedFile.name) || '未选择任何文件'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.handleQuery()
|
||||
},
|
||||
methods: {
|
||||
/** 生成任务编号（RW+日期+序号） */
|
||||
genBh() {
|
||||
const d = new Date()
|
||||
const ymd = '' + d.getFullYear() + (d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1) + (d.getDate() < 10 ? '0' + d.getDate() : d.getDate())
|
||||
const seq = String(Math.floor(Math.random() * 900) + 100)
|
||||
return `RW${ymd}${seq}`
|
||||
},
|
||||
|
||||
// ==================== 查询 ====================
|
||||
// TODO: 后端接口未提供，暂用模拟数据；接口就绪后替换为 getJointTrainingList
|
||||
handleQuery() {
|
||||
this.tableLoading = true
|
||||
setTimeout(() => {
|
||||
let records = mockTableData.slice()
|
||||
if (this.searchForm.mc.trim()) {
|
||||
records = records.filter((item) => (item.mc || '').includes(this.searchForm.mc.trim()))
|
||||
}
|
||||
if (this.searchForm.jybh.trim()) {
|
||||
records = records.filter((item) => (item.jybh || '').includes(this.searchForm.jybh.trim()))
|
||||
}
|
||||
if (this.searchForm.nd.trim()) {
|
||||
records = records.filter((item) => String(item.nd || '').includes(this.searchForm.nd.trim()))
|
||||
}
|
||||
if (this.searchForm.hflx !== '') {
|
||||
records = records.filter((item) => String(item.hflx) === this.searchForm.hflx)
|
||||
}
|
||||
this.allData = records
|
||||
this.total = records.length
|
||||
this.pageNum = 1
|
||||
this.applyPage()
|
||||
this.$message.success(`查询完成，共 ${records.length} 条记录（前端模拟）`)
|
||||
this.tableLoading = false
|
||||
}, 200)
|
||||
},
|
||||
|
||||
applyPage() {
|
||||
const start = (this.pageNum - 1) * this.pageSize
|
||||
this.tableData = this.allData.slice(start, start + this.pageSize)
|
||||
},
|
||||
|
||||
handlePageChange(page) {
|
||||
this.pageNum = page
|
||||
this.applyPage()
|
||||
},
|
||||
|
||||
handleSizeChange(size) {
|
||||
this.pageSize = size
|
||||
this.pageNum = 1
|
||||
this.applyPage()
|
||||
},
|
||||
|
||||
/** 合班类型显示 */
|
||||
formatHflx(val) {
|
||||
if (val === undefined || val === null || val === '') return '-'
|
||||
return String(val) === '1' ? '合班' : '未合班'
|
||||
},
|
||||
|
||||
/** 是否评优显示 */
|
||||
formatSfpy(val) {
|
||||
if (val === undefined || val === null || val === '') return '-'
|
||||
return String(val) === '1' ? '是' : '否'
|
||||
},
|
||||
|
||||
// ==================== 2. 文件操作 ====================
|
||||
handleChooseFile() {
|
||||
this.$refs.fileInputRef && this.$refs.fileInputRef.click()
|
||||
},
|
||||
|
||||
handleFileChange(e) {
|
||||
const input = e.target
|
||||
this.selectedFile = (input.files && input.files[0]) || null
|
||||
},
|
||||
|
||||
/** 下载模板（生成 CSV 模板文件，字段对齐后端接口） */
|
||||
handleDownloadTemplate() {
|
||||
const csvContent = '\uFEFF' + '任务编号,名称,教员编号,任务类别,课时量,合班类型,是否评优,年度,学期,说明\n'
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = '联教联训数据文件模板.csv'
|
||||
link.click()
|
||||
URL.revokeObjectURL(link.href)
|
||||
this.$message.success('已下载联教联训数据文件模板')
|
||||
},
|
||||
|
||||
// TODO: 后端接口未提供，上传为前端模拟；接口就绪后替换为 /log/joint-training/import-excel
|
||||
handleUpload() {
|
||||
if (!this.selectedFile) {
|
||||
this.$message.warning('请先选择文件')
|
||||
return
|
||||
}
|
||||
this.$message.success(`文件「${this.selectedFile.name}」上传成功（前端模拟）`)
|
||||
this.selectedFile = null
|
||||
this.handleQuery()
|
||||
},
|
||||
|
||||
// ==================== 4. 添加 ====================
|
||||
// TODO: 后端接口未提供，提交为前端模拟；接口就绪后替换为 addJointTraining
|
||||
handleAdd() {
|
||||
this.$refs.formRef.validate((valid) => {
|
||||
if (!valid) {
|
||||
this.$message.warning('请完善必填项后再提交')
|
||||
return
|
||||
}
|
||||
this.addLoading = true
|
||||
setTimeout(() => {
|
||||
this.$message.success('添加成功（前端模拟）')
|
||||
Object.assign(this.form, {
|
||||
bh: this.genBh(), mc: '', jybh: '', rwlb: '', ksl: '',
|
||||
hflx: 0, sfpy: 0, nd: '2026', xq: '2026-2027-1', sm: ''
|
||||
})
|
||||
this.handleQuery()
|
||||
this.addLoading = false
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.joint-training-page {
|
||||
.list-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
// ==================== 1. 查询条件区域 ====================
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.search-form {
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 2. 文件操作区域 ====================
|
||||
.upload-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.upload-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
.upload-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.file-name {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
|
||||
&.has-file {
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 3. 数据表格 ====================
|
||||
.table-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.table-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<placeholder-page title="方案管理" icon="documentation"
|
||||
description="用于维护课时的各类方案信息，如教学方案的配置、启用与调整，支持查询与维护。" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PlaceholderPage from "@/components/PlaceholderPage"
|
||||
|
||||
export default {
|
||||
name: "ClassHourPlan",
|
||||
components: { PlaceholderPage }
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="app-container subsidy-page">
|
||||
<div class="list-title">课时补助核算</div>
|
||||
<div class="top-tip">{{ tipText }}</div>
|
||||
|
||||
<!-- ==================== 1. 新增核算区域 ==================== -->
|
||||
<el-card shadow="never" class="search-card">
|
||||
<div class="form-title">新增</div>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" class="search-form">
|
||||
<el-row :gutter="0">
|
||||
<!-- 左栏 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="学期名称" prop="semesterName">
|
||||
<el-input v-model="form.semesterName" placeholder="请输入学期名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="开始日期" prop="startDate">
|
||||
<el-input v-model="form.startDate" placeholder="如：2016-03-01" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="课时补助标准">
|
||||
<el-select v-model="form.subsidyStandard" placeholder="请选择" class="w-full">
|
||||
<el-option v-for="item in subsidyStandardOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 右栏 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item label="任务类别">
|
||||
<el-radio-group v-model="form.taskCategory">
|
||||
<el-radio v-for="item in taskCategoryOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束日期" prop="endDate">
|
||||
<el-input v-model="form.endDate" placeholder="如：2016-08-31" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="课时核算标准">
|
||||
<el-select v-model="form.accountStandard" placeholder="请选择" class="w-full">
|
||||
<el-option v-for="item in accountStandardOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="search-actions">
|
||||
<el-button type="primary" :loading="addLoading" @click="handleAdd">添加</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- ==================== 2. 数据表格 ==================== -->
|
||||
<el-card shadow="never" class="table-card">
|
||||
<el-table v-loading="queryLoading" :data="tableData" border stripe style="width: 100%">
|
||||
<el-table-column label="详细" width="80" fixed align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="handleDetail(row)">详细</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="semesterName" label="学期名称" width="120" />
|
||||
<el-table-column prop="taskCategory" label="任务类别" width="180" />
|
||||
<el-table-column prop="startDate" label="核算开始日期" width="120" />
|
||||
<el-table-column prop="endDate" label="核算结束日期" width="120" />
|
||||
<el-table-column prop="totalHours" label="总课时量" width="100" align="right" />
|
||||
<el-table-column prop="qualityHours" label="优质课时量" width="100" align="right" />
|
||||
<el-table-column prop="qualityRatio" label="优质课时量比例" width="120" align="right" />
|
||||
<el-table-column prop="totalSubsidy" label="总补助金额" width="120" align="right" />
|
||||
<el-table-column prop="accountStandard" label="课时核算标准" show-overflow-tooltip />
|
||||
<el-table-column prop="subsidyStandard" label="课时补助标准" width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="100" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<span :class="row.status === '已核算' ? 'status-done' : 'status-doing'">
|
||||
{{ row.status }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="table-footer">
|
||||
<span>总记录数：{{ tableData.length }} 条</span>
|
||||
<span>总课时量：{{ totalHours }}</span>
|
||||
<span>优质课时量：{{ totalQualityHours }}</span>
|
||||
<span>总补助金额：{{ totalSubsidy }} 元</span>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- ==================== 3. 详情对话框 ==================== -->
|
||||
<el-dialog
|
||||
:visible="detailVisible"
|
||||
title="课时补助核算详情"
|
||||
width="560px"
|
||||
:close-on-click-modal="false"
|
||||
@update:visible="val => detailVisible = val"
|
||||
>
|
||||
<el-descriptions v-if="detailRow" :column="1" border>
|
||||
<el-descriptions-item label="学期名称">{{ detailRow.semesterName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="任务类别">{{ detailRow.taskCategory }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核算开始日期">{{ detailRow.startDate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="核算结束日期">{{ detailRow.endDate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总课时量">{{ detailRow.totalHours }}</el-descriptions-item>
|
||||
<el-descriptions-item label="优质课时量">{{ detailRow.qualityHours }}</el-descriptions-item>
|
||||
<el-descriptions-item label="优质课时量比例">{{ detailRow.qualityRatio }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总补助金额">{{ detailRow.totalSubsidy }} 元</el-descriptions-item>
|
||||
<el-descriptions-item label="课时核算标准">{{ detailRow.accountStandard }}</el-descriptions-item>
|
||||
<el-descriptions-item label="课时补助标准">{{ detailRow.subsidyStandard }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态">{{ detailRow.status }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div slot="footer">
|
||||
<el-button @click="detailVisible = false">关闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 模拟核算列表数据（后端接口未提供，接口就绪后可删除并改为接口加载）
|
||||
const mockSummaryData = [
|
||||
{ bh: 'H001', mc: '2022年秋季学期课时补助核算', rwlb: '全军院校训练规划内任务', hsksrq: '2022-09-01T00:00:00', hsjsrq: '2023-01-15T00:00:00', zksl: 1200, yzksl: 800, yzkslbl: 0.6667, zbzje: 24000, zt: '已核算' },
|
||||
{ bh: 'H002', mc: '2022年春季学期课时补助核算', rwlb: '其他任务（含研究生导师指导）', hsksrq: '2022-03-01T00:00:00', hsjsrq: '2022-08-31T00:00:00', zksl: 900, yzksl: 540, yzkslbl: 0.6, zbzje: 18000, zt: '核算中' },
|
||||
{ bh: 'H003', mc: '2021年秋季学期课时补助核算', rwlb: '全军院校训练规划内任务', hsksrq: '2021-09-01T00:00:00', hsjsrq: '2022-01-15T00:00:00', zksl: 1100, yzksl: 770, yzkslbl: 0.7, zbzje: 22000, zt: '已核算' }
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'SubsidyIndex',
|
||||
data() {
|
||||
return {
|
||||
// ==================== 顶部提示条 ====================
|
||||
tipText: '提示："课时核算"和"补助核算"要花费稍微长一点时间，操作后请耐心等待系统"操作成功"的提示！',
|
||||
|
||||
// ==================== 下拉选项 ====================
|
||||
subsidyStandardOptions: ['2022年秋季学期', '2022年春季学期', '2021年秋季学期', '2021年春季学期'],
|
||||
accountStandardOptions: ['2022年秋季学期课时补助核算', '2022年春季学期课时补助核算', '2021年秋季学期课时补助核算', '2021年春季学期课时补助核算'],
|
||||
taskCategoryOptions: [
|
||||
{ label: '全军院校训练规划内任务', value: '全军院校训练规划内任务' },
|
||||
{ label: '其他任务（含研究生导师指导）', value: '其他任务（含研究生导师指导）' }
|
||||
],
|
||||
|
||||
// ==================== 新增表单 ====================
|
||||
form: {
|
||||
semesterName: '',
|
||||
taskCategory: '全军院校训练规划内任务',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
subsidyStandard: '2022年秋季学期',
|
||||
accountStandard: '2022年秋季学期课时补助核算'
|
||||
},
|
||||
rules: {
|
||||
semesterName: [{ required: true, message: '请输入学期名称', trigger: 'blur' }],
|
||||
startDate: [{ required: true, message: '请输入开始日期', trigger: 'blur' }],
|
||||
endDate: [{ required: true, message: '请输入结束日期', trigger: 'blur' }]
|
||||
},
|
||||
addLoading: false,
|
||||
|
||||
// ==================== 表格数据 ====================
|
||||
tableData: [],
|
||||
queryLoading: false,
|
||||
|
||||
// ==================== 详情对话框 ====================
|
||||
detailVisible: false,
|
||||
detailRow: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totalHours() {
|
||||
return this.tableData.reduce((sum, r) => sum + Number(r.totalHours || 0), 0)
|
||||
},
|
||||
totalQualityHours() {
|
||||
return this.tableData.reduce((sum, r) => sum + Number(r.qualityHours || 0), 0)
|
||||
},
|
||||
totalSubsidy() {
|
||||
return this.tableData.reduce((sum, r) => sum + Number(r.totalSubsidy || 0), 0)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.handleQuery()
|
||||
},
|
||||
methods: {
|
||||
// ==================== 查询核算列表 ====================
|
||||
// TODO: 后端接口未提供，暂用模拟数据；接口就绪后替换为 /log/summary/list
|
||||
handleQuery() {
|
||||
this.queryLoading = true
|
||||
setTimeout(() => {
|
||||
this.tableData = mockSummaryData.map((item, idx) => ({
|
||||
id: idx + 1,
|
||||
_bh: item.bh || '',
|
||||
semesterName: item.mc || '-',
|
||||
taskCategory: item.rwlb || '-',
|
||||
startDate: (item.hsksrq || '').substring(0, 10) || '-',
|
||||
endDate: (item.hsjsrq || '').substring(0, 10) || '-',
|
||||
totalHours: item.zksl || 0,
|
||||
qualityHours: item.yzksl || 0,
|
||||
qualityRatio: item.zksl > 0 ? ((item.yzkslbl || 0) * 100).toFixed(2) + '%' : '0.00%',
|
||||
totalSubsidy: item.zbzje || 0,
|
||||
accountStandard: item.mc || '-',
|
||||
subsidyStandard: '-',
|
||||
status: item.zt || '-'
|
||||
}))
|
||||
this.$message.success(`查询完成，共 ${this.tableData.length} 条记录（前端模拟）`)
|
||||
this.queryLoading = false
|
||||
}, 200)
|
||||
},
|
||||
|
||||
// ==================== 添加 ====================
|
||||
// TODO: 后端接口未提供，提交为前端模拟；接口就绪后替换为 /log/subsidy-project/add
|
||||
handleAdd() {
|
||||
this.$refs.formRef.validate((valid) => {
|
||||
if (!valid) {
|
||||
this.$message.warning('请完善必填项后再提交')
|
||||
return
|
||||
}
|
||||
this.addLoading = true
|
||||
setTimeout(() => {
|
||||
this.$message.success('核算提交成功（前端模拟）')
|
||||
this.handleQuery()
|
||||
this.addLoading = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
|
||||
// ==================== 详情对话框 ====================
|
||||
handleDetail(row) {
|
||||
this.detailRow = row
|
||||
this.detailVisible = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.subsidy-page {
|
||||
.list-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.top-tip {
|
||||
color: #f56c6c;
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.form-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-card {
|
||||
.el-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
.status-done {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.status-doing {
|
||||
color: #e6a23c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user