变更统计表2

src/views/alter/ledgers/table2.vue

@@ -1,15 +1,59 @@
 <template>
     <hc-card>
         <template #header>
-            1
+            <hc-new-switch :datas="tabTab" :keys="tabKey" :round="false" size="default" @change="tabChange" />
+            <div v-if="tabKey === 'key2'" class="ml-3 w-40">
+                <el-select v-model="searchForm.key1" filterable block placeholder="选择工区">
+                    <el-option label="工区1" value="1" />
+                    <el-option label="工区2" value="2" />
+                    <el-option label="工区3" value="3" />
+                </el-select>
+            </div>
+            <div class="ml-3 w-40">
+                <el-date-picker v-model="searchForm.key2" placeholder="截止日期" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
+            </div>
         </template>
         <template #extra>
             <el-button hc-btn type="primary">
-                <HcIcon name="add" />
-                <span>新增</span>
+                <HcIcon name="download-2" />
+                <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%" border>
+                <el-table-column type="index" label="序号" width="60" />
+                <el-table-column prop="key1" label="合同段号" />
+                <el-table-column prop="key2" label="变更申请资料编号" />
+                <el-table-column prop="key3" label="变更令号" />
+                <el-table-column prop="key4" label="批准单位及文号" />
+                <el-table-column prop="key4" label="变更类别" />
+                <el-table-column prop="key4" label="涉及细目号" />
+                <el-table-column prop="key4" label="细目名称	" />
+                <el-table-column prop="key4" label="单位	" />
+                <el-table-column label="变更前数据(合同数据)	" align="center">
+                    <el-table-column prop="key5" label="数量" />
+                    <el-table-column prop="key6" label="单价" />
+                    <el-table-column prop="key7" label="金额" />
+                </el-table-column>
+                <el-table-column label="变更后数据" align="center">
+                    <el-table-column prop="key9" label="数量" />
+                    <el-table-column prop="key10" label="单价" />
+                    <el-table-column prop="key11" label="金额" />
+                </el-table-column>
+                <el-table-column label="申请变更数据" align="center">
+                    <el-table-column prop="key9" label="数量" />
+                    <el-table-column prop="key10" label="单价" />
+                    <el-table-column prop="key11" label="金额" />
+                </el-table-column>
+                <el-table-column label="批复变更数据" align="center">
+                    <el-table-column prop="key9" label="数量" />
+                    <el-table-column prop="key10" label="单价" />
+                    <el-table-column prop="key11" label="金额" />
+                </el-table-column>
+                <el-table-column prop="key13" label="是否计量在哪一期" />
+                <el-table-column prop="key14" label="计量金额(元)" />
+            </el-table>
+        </div>
     </hc-card>
 </template>
 
@@ -24,8 +68,22 @@ defineOptions({
 onMounted(() => {
 
 })
-</script>
 
-<style scoped lang="scss">
+//类型tab数据和相关处理
+const tabKey = ref('key1')
+const tabTab = ref([
+    { key: 'key1', name: '普通变更' },
+    { key: 'key2', name: '工区变更' },
+])
+
+const tabChange = (item) => {
+    tabKey.value = item?.key
+    console.log(item)
+}
 
-</style>
+const searchForm = ref({})
+
+const tableData = ref([
+    { key1: '1111' },
+])
+</script>