yxk-electronic-archives/src/views/archivesStatistics/annualReport‌/index.vue

<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>