ticket-system/src/views/invoiceInOut/summary/detail.vue

<script setup lang="ts">
import { ref } from "vue"
import { useDetail } from "/@/hooks/core/useDetail"

import { 
  ElCollapseItem,
  ElTableColumn,
  ElDatePicker,
  ElPagination,
  ElFormItem,
  ElCollapse, 
  ElTabPane,
  ElInput,
  ElTable,
  ElForm,
  ElTabs,
  ElRow,
  ElCol
} from "element-plus"

const { title, collapses } = useDetail({ baseName: '收发存汇总', collapseLen: 2 });
</script>

<template>
  <div class="padding__container">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem :title="title" name="1">
            <ElForm>
              <ElRow :gutter="10">
                <ElCol :span="12">
                  <ElFormItem label="记账月份">
                    <ElDatePicker style="width: 100%" type="month" :modelValue="'2024-11'" />
                  </ElFormItem>
                </ElCol>
              
                <ElCol :span="12">
                  <ElFormItem label="公司名称">
                    <ElInput :model-value="'百辰荣达'" />
                  </ElFormItem>
                </ElCol>

                <ElCol :span="24">
                  <ElTable size="small">
                    <ElTableColumn label="存货" align="center">
                        <ElTableColumn label="编码" />
                        <ElTableColumn label="代码" />
                        <ElTableColumn label="名称" />
                        <ElTableColumn label="规格" />
                        <ElTableColumn label="单位" />
                        <ElTableColumn label="重量" />
                        <ElTableColumn label="分光" />
                    </ElTableColumn>

                    <ElTableColumn label="期初" align="center">
                      <ElTableColumn label="数量" />
                      <ElTableColumn label="单价" />
                      <ElTableColumn label="金额" />
                    </ElTableColumn>

                    <ElTableColumn label="收入" align="center">
                      <ElTableColumn label="数量" />
                      <ElTableColumn label="单价" />
                      <ElTableColumn label="金额" />
                    </ElTableColumn>

                     <ElTableColumn label="发出" align="center">
                      <ElTableColumn label="数量" />
                      <ElTableColumn label="单价" />
                      <ElTableColumn label="金额" />
                    </ElTableColumn>

                    <ElTableColumn label="结存" align="center">
                      <ElTableColumn label="数量" />
                      <ElTableColumn label="单价" />
                      <ElTableColumn label="金额" />
                    </ElTableColumn>
                  </ElTable>

                  <ElPagination />
                </ElCol>
              </ElRow>
            </ElForm>
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>