工程变更台账，封面、预变更台账

src/views/alter/ledgers/cover.vue

@@ -1,15 +1,22 @@
 <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>
         </template>
         <template #extra>
             <el-button hc-btn type="primary">
-                <HcIcon name="add" />
-                <span>新增</span>
+                <HcIcon name="download-2" />
+                <span>导出</span>
             </el-button>
         </template>
-        1111
+        文档文件
     </hc-card>
 </template>
 
@@ -24,8 +31,18 @@ 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({})
+</script>

src/views/alter/ledgers/ledger.vue

@@ -1,12 +1,19 @@
 <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>
         </template>
         <template #extra>
             <el-button hc-btn type="primary">
-                <HcIcon name="add" />
-                <span>新增</span>
+                <HcIcon name="download-2" />
+                <span>导出</span>
             </el-button>
         </template>
         1111
@@ -24,8 +31,18 @@ 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({})
+</script>

src/views/alter/ledgers/pre-ledger.vue

@@ -1,15 +1,22 @@
 <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>
         </template>
         <template #extra>
             <el-button hc-btn type="primary">
-                <HcIcon name="add" />
-                <span>新增</span>
+                <HcIcon name="download-2" />
+                <span>导出</span>
             </el-button>
         </template>
-        1111
+        表格文件
     </hc-card>
 </template>
 
@@ -24,8 +31,18 @@ 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({})
+</script>