汇星与博达-会计核算页面

gaoluyang

5 天以前 d9034590bf44fe8858679cff822f60a15fd23f05

汇星与博达-会计核算页面

 src/views/financialManagement/accounting/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,231 @@
<template>
  <div class="app-container">
    <el-row :gutter="16" class="mb-16">
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="section-title">统一会计科目体系</div>
          <el-tree
            :data="accountTree"
            node-key="code"
            :props="{ label: 'label', children: 'children' }"
            highlight-current
            default-expand-all
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="section-title">凭证模板</div>
          <el-table :data="voucherTemplates" border size="small">
            <el-table-column prop="name" label="模板名称" min-width="140" />
            <el-table-column prop="bizScene" label="业务场景" min-width="140" />
            <el-table-column prop="debit" label="借方科目" min-width="160" />
            <el-table-column prop="credit" label="贷方科目" min-width="160" />
            <el-table-column prop="auxDims" label="辅助核算维度" min-width="180">
              <template #default="scope">
                <el-space wrap>
                  <el-tag v-for="dim in scope.row.auxDims" :key="dim" size="small" type="info">{{ dim }}</el-tag>
                </el-space>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" class="mb-16">
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="section-title">业务流程 â†’ å‡­è¯è‡ªåŠ¨ç”Ÿæˆ</div>
          <div class="toolbar">
            <el-text type="info">演示数据仅用于展示结构与字段</el-text>
          </div>
          <el-table :data="generatedVouchers" border size="small">
            <el-table-column prop="date" label="日期" width="110" />
            <el-table-column prop="bizScene" label="业务场景" min-width="120" />
            <el-table-column prop="summary" label="摘要" min-width="160" />
            <el-table-column prop="amount" label="金额(Â¥)" width="110" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === '已生成' ? 'success' : 'warning'">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="section-title">多维辅助核算</div>
          <div class="dims">
            <el-tag type="success">客户</el-tag>
            <el-tag type="warning">项目</el-tag>
            <el-tag type="info">部门</el-tag>
            <el-tag type="primary">管理员</el-tag>
          </div>
          <el-table :data="auxSummary" size="small" border>
            <el-table-column prop="dimension" label="维度" width="100" />
            <el-table-column prop="category" label="类别" min-width="140" />
            <el-table-column prop="debit" label="借方(本期)" width="110" />
            <el-table-column prop="credit" label="贷方(本期)" width="110" />
            <el-table-column prop="balance" label="余额" width="100" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" class="mb-16">
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="section-title">结账任务（月/å­£/年）</div>
          <div class="toolbar">
            <el-space>
              <el-button size="small" @click="runClose('月结')">执行月结</el-button>
              <el-button size="small" @click="runClose('季报')">执行季报</el-button>
              <el-button size="small" @click="runClose('年度结账')">执行年度结账</el-button>
            </el-space>
          </div>
          <el-timeline style="margin-top: 6px;">
            <el-timeline-item
              v-for="item in closingTasks"
              :key="item.id"
              :type="item.type"
              :timestamp="item.time"
              placement="top"
            >
              <div class="close-item">
                <div class="title">{{ item.name }}</div>
                <el-tag :type="item.status === '完成' ? 'success' : 'info'" size="small">{{ item.status }}</el-tag>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="section-title">审计留痕与审批权限</div>
          <el-table :data="auditTrail" border size="small">
            <el-table-column prop="time" label="时间" width="160" />
            <el-table-column prop="action" label="动作" min-width="160" />
            <el-table-column prop="bizScene" label="关联业务" min-width="140" />
            <el-table-column prop="role" label="执行角色" width="120" />
            <el-table-column prop="result" label="结果" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.result === '通过' ? 'success' : (scope.row.result === '驳回' ? 'danger' : 'info')">
                  {{ scope.row.result }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
  
</template>

<script setup>
import { ref } from 'vue'

// ç§‘目树（示例）
const accountTree = ref([
  { code: '1001', label: '资产', children: [
    { code: '100101', label: '库存现金' },
    { code: '100102', label: '银行存款' },
    { code: '1122', label: '应收账款' },
    { code: '1601', label: '固定资产' },
  ]},
  { code: '2001', label: '负债', children: [
    { code: '2202', label: '应付账款' },
    { code: '2241', label: '其他应付款' },
  ]},
  { code: '3001', label: '所有者权益', children: [
    { code: '3103', label: '本年利润' },
  ]},
  { code: '4001', label: '成本费用', children: [
    { code: '5601', label: '制造费用' },
    { code: '6602', label: '管理费用' },
  ]},
])

// å‡­è¯æ¨¡æ¿ï¼ˆç¤ºä¾‹ï¼‰
const voucherTemplates = ref([
  { name: '销售收入确认', bizScene: '销售出库', debit: '1122 åº”收账款', credit: '6001 ä¸»è¥ä¸šåŠ¡æ”¶å…¥', auxDims: ['客户','项目'] },
  { name: '采购应付确认', bizScene: '采购入库', debit: '1403 åœ¨é€”物资', credit: '2202 åº”付账款', auxDims: ['项目','部门'] },
  { name: '费用报销', bizScene: '费用单', debit: '6602 ç®¡ç†è´¹ç”¨', credit: '1002 é“¶è¡Œå­˜æ¬¾', auxDims: ['部门'] },
  { name: '固定资产折旧', bizScene: '月末折旧', debit: '6602 ç®¡ç†è´¹ç”¨', credit: '1602 ç´¯è®¡æŠ˜æ—§', auxDims: ['部门'] },
])

// è‡ªåŠ¨ç”Ÿæˆçš„凭证（示例）
const generatedVouchers = ref([
  { date: '2025-10-01', bizScene: '销售出库', summary: '确认应收与收入', amount: 128000, status: '已生成' },
  { date: '2025-10-03', bizScene: '采购入库', summary: '确认到货应付', amount: 56000, status: '已生成' },
  { date: '2025-10-05', bizScene: '费用单', summary: '办公费用报销', amount: 3200, status: '已生成' },
])

// æ— æ¨¡æ‹Ÿç”Ÿæˆæ“ä½œï¼Œä»…展示静态示例数据

// è¾…助核算示例汇总（无个人姓名，仅维度类别）
const auxSummary = ref([
  { dimension: '客户', category: '重点客户集合', debit: 320000, credit: 210000, balance: 110000 },
  { dimension: '项目', category: '项目A', debit: 150000, credit: 120000, balance: 30000 },
  { dimension: '部门', category: '运营中心', debit: 42000, credit: 18000, balance: 24000 },
  { dimension: '管理员', category: '系统角色', debit: 0, credit: 0, balance: 0 },
])

// ç»“账任务
const closingTasks = ref([
  { id: 1, name: '2025å¹´10月 æœˆç»“', time: '2025-10-31 18:00', status: '完成', type: 'success' },
  { id: 2, name: '2025å¹´Q4 å­£æŠ¥', time: '2025-12-31 18:00', status: '计划', type: 'info' },
  { id: 3, name: '2025年度 å¹´åº¦ç»“è´¦', time: '2025-12-31 23:00', status: '计划', type: 'info' },
])

function runClose(kind) {
  closingTasks.value.unshift({
    id: Date.now(),
    name: `${new Date().getFullYear()}å¹´${kind}`,
    time: new Date().toISOString().replace('T',' ').slice(0,16),
    status: '完成',
    type: 'success',
  })
}

// å®¡è®¡ç•™ç—•ï¼ˆä¸å«ä¸ªäººå§“名，仅角色/机制）
const auditTrail = ref([
  { time: '2025-10-01 09:12', action: '销售出库触发凭证生成', bizScene: '销售出库', role: '系统自动化', result: '通过' },
  { time: '2025-10-03 14:20', action: '采购入库触发应付确认', bizScene: '采购入库', role: '系统自动化', result: '通过' },
  { time: '2025-10-05 10:03', action: '费用单审批', bizScene: '费用单', role: '财务审批', result: '通过' },
  { time: '2025-10-08 16:45', action: '凭证过账', bizScene: '总账', role: '会计审核', result: '通过' },
  { time: '2025-10-31 18:05', action: '月结完成并锁账', bizScene: '总账', role: '系统自动化', result: '通过' },
])
</script>

<style scoped lang="scss">
.app-container {
  padding: 16px;
}
.page-header {
  margin-bottom: 12px;
  h2 { margin: 0 0 6px 0; font-weight: 600; }
  p { margin: 0; color: #666; }
}
.section-title {
  position: relative;
  padding-left: 10px;
  margin-bottom: 10px;
  font-weight: 700;
}
.section-title::before {
  content: '';
  position: absolute;
  left: 0; top: 0.2em;
  width: 4px; height: 1.2em;
  background: #002FA7;
  border-radius: 2px;
}
.mb-16 { margin-bottom: 16px; }
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dims { display: flex; gap: 8px; margin-bottom: 10px; }
.close-item { display: flex; align-items: center; gap: 8px; }
</style>