项目资料收集

src/views/project/admin/list.vue

@@ -2,11 +2,37 @@
     <hc-card>
         <template #header>
             <hc-date-year v-model="searchForm.startYear" v-model:end="searchForm.endYear" />
+            <div class="relative ml-3 w-[300px]">
+                <hc-search-input v-model="searchForm.queryValue" text="搜索" @search="searchClick">
+                    <template #prepend>
+                        <el-select v-model="searchForm.year" placeholder="年份" style="width: 75px">
+                            <el-option label="2023" value="2023" />
+                            <el-option label="2024" value="2024" />
+                        </el-select>
+                    </template>
+                </hc-search-input>
+            </div>
         </template>
         <template #extra>
-            自定义标题栏右边
+            <div class="w-[120px]">
+                <el-select v-model="searchForm.key1" filterable clearable block placeholder="项目阶段" @change="searchClick">
+                    <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </div>
+            <div class="ml-2 w-[100px]">
+                <el-select v-model="searchForm.key2" filterable clearable block placeholder="项目类型" @change="searchClick">
+                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </div>
+            <el-button type="success" class="ml-6">生成报告</el-button>
+            <el-button type="danger" class="ml-2">批量删除</el-button>
+            <el-button type="warning" class="ml-2">导入</el-button>
+            <el-button type="primary" class="ml-2">批量导出</el-button>
         </template>
         <HcTableList />
+        <template #action>
+            <hc-pages :pages="searchForm" @change="pageChange" />
+        </template>
     </hc-card>
 </template>
 
@@ -14,11 +40,26 @@
 import { ref } from 'vue'
 import HcTableList from '../modules/project-list.vue'
 
+//项目阶段
+const stateOptions = ref([{ value: '1', label: '新开工项目' }, { value: '2', label: '建成项目' }, { value: '3', label: '在建项目' }])
+
+//项目类型
+const typeOptions = ref([{ value: '1', label: '铁路' }, { value: '2', label: '高速公路' }, { value: '3', label: '在建项目' }])
+
 //搜索条件
 const searchForm = ref({
-    startYear: '', endYear: '',
+    startYear: '', endYear: '', queryValue: '', year: '',
     current: 1, size: 20, total: 0,
 })
+const searchClick = () => {
+
+}
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
 </script>
 
 <style lang="scss">