You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
13 KiB
376 lines
13 KiB
<template>
|
|
<div class="app-container row-container">
|
|
<div class="connection-header collect-header" style="padding: 0; border-top: none; height: auto; margin-bottom: 20px;">
|
|
<div class="head-search" style="margin-bottom: 0;">
|
|
<el-select
|
|
v-model="fondsIds"
|
|
multiple
|
|
collapse-tags
|
|
placeholder="请选择所属全宗"
|
|
style="width: 320px;"
|
|
>
|
|
<el-option
|
|
v-for="item in fondsOptions"
|
|
:key="item.id"
|
|
:label="item.fondsName"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
<el-select
|
|
v-model="years"
|
|
multiple
|
|
collapse-tags
|
|
placeholder="请选择年份"
|
|
style="width: 150px;"
|
|
>
|
|
<el-option
|
|
v-for="item in yearsOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="getTotalStatistics">查询</el-button>
|
|
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
|
|
</div>
|
|
<el-button size="mini" :loading="addLoading" @click="toAdd">
|
|
<i class="iconfont icon-xinzeng" />
|
|
新增
|
|
</el-button>
|
|
</div>
|
|
<el-table v-loading="loading" class="archives-table" :data="allData" style="width: 100%;">
|
|
<el-table-column prop="year" label="年度" align="center" />
|
|
<el-table-column prop="archivesCount" label="填报单位" />
|
|
<el-table-column prop="username" label="创建人" align="center" />
|
|
<el-table-column prop="createTime" label="创建时间" align="center">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.createTime | parseTime }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="modelName" label="统计模板" />
|
|
<el-table-column prop="handle" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" @click="handleDetail(scope.row)">查看详情</el-button>
|
|
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
|
|
<el-button size="mini" @click="handleDelete(scope.row)">删除</el-button>
|
|
<!-- <el-button :loading="btnLoading" class="packing-handle-btn iconfont" @click="handleCartoning(scope.row)"><svg-icon icon-class="zhuanghe" class="svg-arc-style" />装盒</el-button> -->
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
v-if="allData.length !== 0"
|
|
:current-page="page.page"
|
|
:total="page.total"
|
|
:page-size="page.size"
|
|
:pager-count="5"
|
|
layout="total, prev, pager, next, sizes"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentPage"
|
|
/>
|
|
<!-- 年报新增/编辑弹框 -->
|
|
<el-dialog class="dialog-middle" :modal-append-to-body="false" :close-on-click-modal="false" :before-close="closeFormDialog" :visible="formVisible" :title="dialogTitle" width="560px">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog">
|
|
<el-form ref="form" :model="form" :rules="formRules" label-width="90px">
|
|
<el-form-item label="全宗" prop="fondsId">
|
|
<el-select v-model="form.fondsId" :disabled="isEdit" placeholder="请选择全宗" style="width: 100%;">
|
|
<el-option
|
|
v-for="item in fondsOptions"
|
|
:key="item.id"
|
|
:label="item.fondsName"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="年度" prop="year">
|
|
<el-date-picker v-model="form.year" type="year" value-format="yyyy" :disabled="isEdit" placeholder="请选择年度" style="width: 100%;" />
|
|
</el-form-item>
|
|
<el-form-item label="统计模板" prop="modelId">
|
|
<el-select v-model="form.modelId" :disabled="isEdit" placeholder="请选择统计模板" style="width: 100%;">
|
|
<el-option
|
|
v-for="item in modelOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remarks">
|
|
<el-input v-model="form.remarks" type="textarea" :rows="3" placeholder="请输入备注" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button v-if="isEdit" type="primary" @click="handleEditDetail">编辑详情</el-button>
|
|
<el-button type="text" @click="closeFormDialog">取消</el-button>
|
|
<el-button :loading="submitLoading" type="primary" @click="handleSubmit">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 年报详情弹框 -->
|
|
<el-dialog class="dialog-middle" :modal-append-to-body="false" :close-on-click-modal="false" :before-close="closeDetailDialog" :visible="detailVisible" title="年报详情" width="600px">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog detail-content">
|
|
<div class="detail-item"><span class="detail-label">统计年度：</span>{{ detailData.year }}</div>
|
|
<div class="detail-item"><span class="detail-label">填报单位：</span>{{ detailData.archivesCount }}</div>
|
|
<div class="detail-item"><span class="detail-label">填报人：</span>{{ detailData.username }}</div>
|
|
<div class="detail-item"><span class="detail-label">填报时间：</span>{{ detailData.createTime | parseTime }}</div>
|
|
<div class="detail-item"><span class="detail-label">备注：</span>{{ detailData.remarks || '-' }}</div>
|
|
<div class="detail-item"><span class="detail-label">统计模板：</span>{{ detailData.modelName }}</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="handleReportDetail">报表详情</el-button>
|
|
<el-button type="primary" @click="closeDetailDialog">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchFondsAll } from '@/api/system/fonds'
|
|
import { FetchTotalStatistics, FetchArchivedAllYear } from '@/api/statistics/statistics'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'AnnualReport',
|
|
data() {
|
|
return {
|
|
allData: [],
|
|
fondsOptions: [],
|
|
fondsIds: [],
|
|
yearsOptions: [],
|
|
years: [],
|
|
loading: false,
|
|
// 新增/编辑共用弹框
|
|
formVisible: false,
|
|
dialogMode: 'add', // 'add' | 'edit'
|
|
submitLoading: false,
|
|
form: {
|
|
id: null,
|
|
fondsId: null,
|
|
year: String(new Date().getFullYear()),
|
|
modelId: null,
|
|
remarks: null
|
|
},
|
|
formRules: {
|
|
fondsId: [{ required: true, message: '请选择全宗', trigger: 'change' }],
|
|
year: [{ required: true, message: '请选择年度', trigger: 'change' }],
|
|
modelId: [{ required: true, message: '请选择统计模板', trigger: 'change' }]
|
|
},
|
|
addLoading: false,
|
|
// 详情弹框
|
|
detailVisible: false,
|
|
detailData: {},
|
|
// 统计模板 mock 数据
|
|
modelOptions: [
|
|
{ id: 1, name: '《档案室基本情况表》(2025版)' }
|
|
],
|
|
page: {
|
|
page: 1,
|
|
total: 0,
|
|
size: 10
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'baseApi',
|
|
'user'
|
|
]),
|
|
isEdit() {
|
|
return this.dialogMode === 'edit'
|
|
},
|
|
dialogTitle() {
|
|
return this.isEdit ? '年报编辑' : '年报新增'
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getFondsDatas()
|
|
this.getArchivedAllYearDatas()
|
|
this.getTotalStatistics()
|
|
},
|
|
methods: {
|
|
toAdd() {
|
|
this.dialogMode = 'add'
|
|
this.form = {
|
|
id: null,
|
|
fondsId: null,
|
|
year: String(new Date().getFullYear()),
|
|
modelId: null,
|
|
remarks: null
|
|
}
|
|
this.formVisible = true
|
|
},
|
|
handleEdit(row) {
|
|
this.dialogMode = 'edit'
|
|
const modelItem = this.modelOptions.find(m => m.name === row.modelName)
|
|
const fondsItem = this.fondsOptions.find(f => f.fondsName === row.archivesCount)
|
|
this.form = {
|
|
id: row.id,
|
|
fondsId: fondsItem ? fondsItem.id : null,
|
|
year: row.year,
|
|
modelId: modelItem ? modelItem.id : null,
|
|
remarks: row.remarks
|
|
}
|
|
this.formVisible = true
|
|
},
|
|
closeFormDialog() {
|
|
this.formVisible = false
|
|
this.$refs.form.resetFields()
|
|
},
|
|
handleSubmit() {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
this.submitLoading = true
|
|
if (this.isEdit) {
|
|
// TODO: 替换为实际编辑接口
|
|
const index = this.allData.findIndex(item => item.id === this.form.id)
|
|
if (index !== -1) {
|
|
this.allData[index].remarks = this.form.remarks
|
|
}
|
|
this.$message({ message: '编辑成功', type: 'success', offset: 8 })
|
|
} else {
|
|
// TODO: 替换为实际新增接口
|
|
const modelName = this.modelOptions.find(item => item.id === this.form.modelId)?.name
|
|
const fondsName = this.fondsOptions.find(item => item.id === this.form.fondsId)?.fondsName
|
|
const newRow = {
|
|
id: Date.now(),
|
|
year: this.form.year,
|
|
archivesCount: fondsName,
|
|
username: this.user?.username || '',
|
|
createTime: new Date().getTime(),
|
|
modelName: modelName,
|
|
remarks: this.form.remarks
|
|
}
|
|
this.allData.unshift(newRow)
|
|
this.$message({ message: '新增成功', type: 'success', offset: 8 })
|
|
}
|
|
this.submitLoading = false
|
|
this.closeFormDialog()
|
|
}
|
|
})
|
|
},
|
|
handleEditDetail() {
|
|
const route = this.$router.resolve({ path: '/da3Report', query: { mode: 'edit' }})
|
|
window.open(route.href, '_blank')
|
|
},
|
|
handleSizeChange(val) {
|
|
this.page.size = val
|
|
this.getTotalStatistics()
|
|
},
|
|
handleCurrentPage(val) {
|
|
this.page.page = val
|
|
this.getTotalStatistics()
|
|
},
|
|
handleDetail(row) {
|
|
this.detailData = { ...row }
|
|
this.detailVisible = true
|
|
},
|
|
closeDetailDialog() {
|
|
this.detailVisible = false
|
|
this.detailData = {}
|
|
},
|
|
handleReportDetail() {
|
|
const route = this.$router.resolve({ path: '/da3Report', query: { mode: 'view' }})
|
|
window.open(route.href, '_blank')
|
|
},
|
|
handleDelete() {
|
|
this.$confirm('此操作将删除当前数据' + '<span>你是否还要继续？</span>', '提示', {
|
|
confirmButtonText: '继续',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
dangerouslyUseHTMLString: true
|
|
}).then(() => {
|
|
console.log('确认删除')
|
|
}).catch(() => {
|
|
console.log('取消')
|
|
})
|
|
},
|
|
resetQuery() {
|
|
this.fondsIds = []
|
|
this.years = []
|
|
this.getTotalStatistics()
|
|
},
|
|
getFondsDatas() {
|
|
FetchFondsAll().then(res => {
|
|
this.fondsOptions = res
|
|
// 默认全选所有档案库
|
|
// this.fondsIds = res.map(item => item.id)
|
|
// this.checkAndQuery()
|
|
})
|
|
},
|
|
getArchivedAllYearDatas() {
|
|
FetchArchivedAllYear().then(res => {
|
|
this.yearsOptions = res.map(item => ({
|
|
id: item,
|
|
name: item
|
|
}))
|
|
// 默认全选所有年份
|
|
// this.years = res.map(item => item)
|
|
// this.checkAndQuery()
|
|
})
|
|
},
|
|
checkAndQuery() {
|
|
// 当两个数据都加载完成后才执行查询
|
|
if (this.fondsOptions.length > 0 && this.yearsOptions.length > 0) {
|
|
this.getTotalStatistics()
|
|
}
|
|
},
|
|
getTotalStatistics() {
|
|
this.loading = true
|
|
FetchTotalStatistics({
|
|
fondsIds: this.fondsIds,
|
|
years: this.years
|
|
}).then(res => {
|
|
this.allData = res
|
|
this.loading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
height: calc(100vh - 140px);
|
|
.head-search{
|
|
.el-select,
|
|
.el-button{
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
::v-deep .el-table__footer{
|
|
font-size: 14px;
|
|
}
|
|
::v-deep .el-table__empty-block{
|
|
border-bottom: 1px solid #e4e7ed;
|
|
}
|
|
::v-deep .summary-row {
|
|
background-color: #f5f7fa !important;
|
|
td{
|
|
border-top: 1px solid #dfe6ec !important;
|
|
border-bottom: 1px solid #dfe6ec !important;
|
|
}
|
|
}
|
|
.detail-content {
|
|
padding: 10px 20px;
|
|
.detail-item {
|
|
margin-bottom: 16px;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: #545B65;
|
|
.detail-label {
|
|
display: inline-block;
|
|
color: #0C0E1E;
|
|
font-weight: 500;
|
|
width: 70px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-dialog__footer{
|
|
padding: 20px 0;
|
|
}
|
|
}
|
|
</style>
|