工区计量支付汇总

src/views/periods/ledgers/summary.vue

@@ -1,15 +1,29 @@
 <template>
     <hc-card>
         <template #header>
-            1
+            <el-date-picker v-model="searchForm.key1" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" placeholder="截止日期" />
         </template>
         <template #extra>
             <el-button hc-btn type="primary">
-                <HcIcon name="add" />
-                <span>新增</span>
+                <HcIcon name="download" />
+                <span>导出</span>
             </el-button>
         </template>
-        1111
+        <div class="hc-table-ref-box no-border">
+            <el-table class="w-full" :data="tableData" row-key="id" height="100%" highlight-current-row border>
+                <el-table-column prop="key1" label="工区段" />
+                <el-table-column label="工区金额" align="center">
+                    <el-table-column prop="key2" label="工区金额" />
+                    <el-table-column prop="key3" label="变更金额" />
+                    <el-table-column prop="key4" label="变更后金额" />
+                </el-table-column>
+                <el-table-column prop="key1" label="累计计量金额" />
+                <el-table-column prop="key1" label="完成比例(%)" />
+            </el-table>
+        </div>
+        <template #action>
+            <hc-pages :pages="searchForm" @change="pageChange" />
+        </template>
     </hc-card>
 </template>
 
@@ -24,6 +38,27 @@ defineOptions({
 onMounted(() => {
 
 })
+
+//搜索表单
+const searchForm = ref({
+    current: 1, size: 10, total: 0,
+})
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+const tableData = ref([
+    {
+        id: 1,
+        key1: '2016',
+        key2: '名称名称名称',
+        key3: '总额',
+        hasChildren: true,
+    },
+])
 </script>
 
 <style scoped lang="scss">