analysis/src/views/project/admin/list.vue

<template>
    <hc-card class="hc-project-collect-admin-list">
        <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 v-del-com:[delTableItem] type="danger" class="ml-2" :disabled="tableCheckKeys.length <= 0">批量删除</el-button>
            <el-button type="warning" class="ml-2">导入</el-button>
            <el-button v-yes-com:[deriveTableItem] type="primary" class="ml-2" :disabled="tableCheckKeys.length <= 0">批量导出</el-button>
        </template>
        <HcTableList ref="tableRef" is-admin @tap="rowNameClick" @check="tableCheck" />
        <template #action>
            <div>建设规模：共计 xx 公里</div>
            <hc-pages :pages="searchForm" @change="pageChange" />
        </template>
    </hc-card>
</template>

<script setup>
import { ref } from 'vue'
import HcTableList from '../modules/project-list.vue'

const tableRef = ref(null)

//项目阶段
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: '', queryValue: '', year: '',
    current: 1, size: 20, total: 0,
})
const searchClick = () => {

}

//分页
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
}

//表格被选择
const tableCheckKeys = ref([])
const tableCheck = (row) => {
    tableCheckKeys.value = row
}

//项目名称被点击
const rowNameClick = (row) => {
    console.log(row)
}

//批量删除
const delTableItem = () => {
    tableRef.value?.batchRemove()
}

//批量导出
const deriveTableItem = () => {
    tableRef.value?.batchExport()
}
</script>

<style lang="scss">
.hc-project-collect-admin-list {
    .hc-card-action {
        display: flex;
        align-items: center;
    }
}
</style>