财务管理系统模块优化

liding

2026-10-08 43d00eec5989caa78c44c736853230a13d8e9f6c

 src/views/financialManagement/financialReconciliation/index.vue

@@ -1,291 +1,46 @@
<template>
  <div class="app-container">
    <!-- 搜索区 -->
    <div class="search_form">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="往来单位：">
          <el-input v-model="searchForm.counterparty" placeholder="请输入往来单位" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="对账状态：">
          <el-select v-model="searchForm.status" placeholder="请选择" clearable style="width: 150px">
            <el-option label="未对账" value="pending" />
            <el-option label="对账中" value="processing" />
            <el-option label="已完成" value="done" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="日期：">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            clearable
          />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作区 -->
    <div class="actions">
      <el-button type="primary" @click="openDialog('add')">新增</el-button>
      <el-button type="danger" plain @click="handleDelete">删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      v-loading="tableLoading"
      @selection-change="handleSelectionChange"
      style="width: 100%"
      height="calc(100vh - 280px)"
      :row-key="row => row.id"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="accountDate" label="对账日期" width="130" show-overflow-tooltip />
      <el-table-column prop="counterparty" label="往来单位" width="180" show-overflow-tooltip />
      <el-table-column prop="amount" label="对账金额(元)" width="140" show-overflow-tooltip />
      <el-table-column prop="statusText" label="状态" width="120" show-overflow-tooltip />
      <el-table-column prop="remark" label="备注" show-overflow-tooltip />
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      :page="page.current"
      :limit="page.size"
      @pagination="paginationChange"
  <div class="app-container financial-reconciliation-page">
    <el-alert
      v-if="runtimeError"
      title="财务对账页面加载失败"
      type="error"
      :description="runtimeError"
      show-icon
      :closable="false"
    />

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px" @close="resetForm">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item label="对账日期：" prop="accountDate">
          <el-date-picker v-model="form.accountDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" style="width: 100%" />
        </el-form-item>
        <el-form-item label="往来单位：" prop="counterparty">
          <el-input v-model="form.counterparty" placeholder="请输入往来单位" />
        </el-form-item>
        <el-form-item label="对账金额(元)：" prop="amount">
          <el-input-number v-model="form.amount" :min="0" :precision="2" :step="100" style="width: 100%" />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="form.status" placeholder="请选择" style="width: 100%">
            <el-option label="未对账" value="pending" />
            <el-option label="对账中" value="processing" />
            <el-option label="已完成" value="done" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </div>
      </template>
    </el-dialog>
    <ReconciliationWorkspace v-else :key="workspaceKey" />
    <el-button v-if="runtimeError" type="primary" class="retry-button" @click="retry">
      重新加载
    </el-button>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import pagination from '@/components/PIMTable/Pagination.vue'
import {
  getReconciliationPage,
  addReconciliation,
  updateReconciliation,
  deleteReconciliation
} from '@/api/financialManagement/financialReconciliation.js'
import { nextTick, onErrorCaptured, ref } from "vue";
import ReconciliationWorkspace from "./ReconciliationWorkspace.vue";

const tableData = ref([])
const tableLoading = ref(false)
const selectedRows = ref([])
const dialogVisible = ref(false)
const dialogTitle = ref('新增')
const formRef = ref(null)
const runtimeError = ref("");
const workspaceKey = ref(0);

const page = reactive({
  current: 1,
  size: 100
})
const total = ref(0)
onErrorCaptured((error) => {
  console.error("财务对账页面运行异常：", error);
  runtimeError.value = error?.stack || error?.message || String(error);
  return false;
});

const searchForm = reactive({
  counterparty: '',
  status: '',
  dateRange: []
})

const form = reactive({
  id: null,
  accountDate: '',
  counterparty: '',
  amount: null,
  status: '',
  remark: ''
})

const rules = {
  accountDate: [{ required: true, message: '请选择对账日期', trigger: 'change' }],
  counterparty: [{ required: true, message: '请输入往来单位', trigger: 'blur' }],
  amount: [{ required: true, message: '请输入对账金额', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const statusTextMap = {
  pending: '未对账',
  processing: '对账中',
  done: '已完成'
}

// 获取列表
const getList = () => {
  tableLoading.value = true
  const params = {
    ...searchForm,
    current: page.current,
    size: page.size
  }
  if (params.dateRange && params.dateRange.length === 2) {
    params.beginDate = params.dateRange[0]
    params.endDate = params.dateRange[1]
  }
  delete params.dateRange

  getReconciliationPage(params)
    .then(res => {
      if (res.code === 200) {
        tableData.value = (res.data?.records || []).map(item => ({
          ...item,
          statusText: statusTextMap[item.status] || item.status
        }))
        total.value = res.data?.total || 0
      }
    })
    .finally(() => {
      tableLoading.value = false
    })
}

const handleQuery = () => {
  page.current = 1
  getList()
}
const resetQuery = () => {
  searchForm.counterparty = ''
  searchForm.status = ''
  searchForm.dateRange = []
  handleQuery()
}
const paginationChange = (obj) => {
  page.current = obj.page
  page.size = obj.limit
  getList()
}

const handleSelectionChange = (rows) => {
  selectedRows.value = rows
}

const openDialog = (type, row) => {
  dialogTitle.value = type === 'add' ? '新增对账记录' : '编辑对账记录'
  if (type === 'edit' && row) {
    Object.assign(form, row)
  } else {
    resetForm()
  }
  dialogVisible.value = true
}

const resetForm = () => {
  Object.assign(form, {
    id: null,
    date: '',
    counterparty: '',
    amount: null,
    status: '',
    remark: ''
  })
}

const submitForm = () => {
  formRef.value?.validate(valid => {
    if (!valid) return
    const payload = { ...form }
    const request = payload.id ? updateReconciliation(payload) : addReconciliation(payload)
    request
      .then(res => {
        if (res.code === 200) {
          ElMessage.success('提交成功')
          dialogVisible.value = false
          getList()
        }
      })
      .catch(err => {
        ElMessage.error(err.msg || '提交失败')
      })
  })
}

const handleDelete = () => {
  if (!selectedRows.value.length) {
    ElMessage.warning('请选择要删除的记录')
    return
  }
  ElMessageBox.confirm('确认删除选中记录吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const ids = selectedRows.value.map(r => r.id)
    deleteReconciliation(ids).then(res => {
      if (res.code === 200) {
        ElMessage.success('删除成功')
        getList()
        selectedRows.value = []
      }
    }).catch(err => {
      ElMessage.error(err.msg || '删除失败')
    })
  }).catch(() => {})
}

onMounted(() => {
  getList()
})
const retry = async () => {
  runtimeError.value = "";
  await nextTick();
  workspaceKey.value += 1;
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;

  .search_form {
    background: #fff;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 16px;
  }

  .actions {
    margin-bottom: 12px;
  }
<style scoped>
.financial-reconciliation-page {
  min-height: calc(100vh - 84px);
  background: #fff;
}
.retry-button {
  margin-top: 16px;
}
</style>