water-design-const-app/src/pages/projectSelect/index.vue

<template>
    <!-- 项目选择 -->
    <up-navbar
        title="项目选择"
        :leftIconSize="0"
        :titleStyle="{ color: '#333', fontWeight: 'bold' }"
    />

    <!-- 查询 -->
    <view class="project-select-container" :style="{ paddingTop: safeAreaInsets?.top + 44 + 'px' }">
        <up-row :gutter="10" class="project-select-row">
            <up-col span="3">
                <up-input placeholder="项目名称" border="surround" v-model="queryParams.proName" />
            </up-col>
            <!-- <up-col span="3">
                <up-input placeholder="项目类型" border="surround" v-model="queryParams.proType" />
            </up-col>
            <up-col span="3">
                <up-input
                    border="surround"
                    placeholder="项目经理"
                    v-model="queryParams.proManager"
                />
            </up-col> -->
            <up-col span="3">
                <view class="project-select-button-box">
                    <up-button type="primary" text="查询" @click="onHandleSearch" />
                    <up-button
                        type="primary"
                        :plain="true"
                        :hairline="true"
                        text="重置"
                        @click="onHandleReset"
                    />
                </view>
            </up-col>
        </up-row>

        <!-- 表格 -->
        <view class="project-select-table-box">
            <!-- 表头 -->
            <up-row class="table-th">
                <up-col class="table-td" span="1"> 序号 </up-col>
                <up-col class="table-td" span="2.5"> 项目名称 </up-col>
                <up-col class="table-td" span="2.5"> 项目层级 </up-col>
                <up-col class="table-td" span="2.5"> 项目经理 </up-col>
                <up-col class="table-td" span="4.5"> 项目所在地 </up-col>
            </up-row>

            <!-- 表格内容 -->
            <up-row
                :key="index"
                class="table-tbody"
                v-for="(item, index) in projectList"
                @tap="onHandleSelectProject(item)"
                :style="{
                    borderBottom: index !== projectList.length - 1 ? '1px solid #f7f8fa' : 'none',
                }"
            >
                <up-col class="table-td" span="1"> {{ index + 1 }} </up-col>
                <up-col class="table-td" span="2.5"> {{ item.proName }} </up-col>
                <up-col class="table-td" span="2.5"> {{ item.level }} </up-col>
                <up-col class="table-td" span="2.5"> {{ item.manager }} </up-col>
                <up-col class="table-td" span="4.5"> {{ item.location }} </up-col>
            </up-row>
        </view>

        <!-- 分页 -->
        <view class="pagination-box">
            <u-pagination
                :total="total"
                :current-page="queryParams.pageNum"
                layout="prev, pager, next"
                :page-size="queryParams.pageSize"
                @current-change="onHandleCurrentChange"
            />
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getProjectListApi } from '@/services/projectSelect'

const { safeAreaInsets } = uni.getSystemInfoSync()

const projectList = ref([
    { proId: 1, proName: '项目1', level: '一级', manager: '张三', location: '北京' },
    { proId: 2, proName: '项目2', level: '二级', manager: '李四', location: '上海' },
    { proId: 3, proName: '项目3', level: '三级', manager: '王五', location: '广州' },
    { proId: 4, proName: '项目4', level: '四级', manager: '赵六', location: '深圳' },
    { proId: 5, proName: '项目5', level: '五级', manager: '孙七', location: '成都' },
    { proId: 6, proName: '项目6', level: '六级', manager: '周八', location: '重庆' },
    { proId: 7, proName: '项目7', level: '七级', manager: '吴九', location: '西安' },
])
const total = ref(100)

// 定义查询条件
const queryParams = ref({
    proName: '', // 项目名称
    // proType: '', // 项目类型
    // proManager: '', // 项目经理
    pageNum: 1, // 页码
    pageSize: 10, // 每页条数
})

// 获取项目数据
const getProjectList = async () => {
    const res = await getProjectListApi(queryParams.value)
    projectList.value = res?.rows
    total.value = res?.total
}

// 查询按钮
const onHandleSearch = () => {
    getProjectList()
}

// 重置按钮
const onHandleReset = () => {
    queryParams.value = {
        proName: '',
        // proType: '',
        // proManager: '',
        pageNum: 1,
        pageSize: 10,
    }
    getProjectList()
}

// 分页
const onHandleCurrentChange = (page) => {
    // console.log(page,'页码')
    queryParams.value.pageNum = page
    // getProjectList()
}

// 点击行跳转
const onHandleSelectProject = (item) => {
    // console.log('点击行跳转', item)
    // const { id, projectName } = item
    // uni.navigateTo({
    //     url: `/pages/projectSelect/projectSelectDetail?id=${id}&projectName=${projectName}`,
    // })
    uni.navigateTo({
        url: `/pages/workHome/index?proId=${item.proId}&projectName=${item.proName}`,
    })
}

onMounted(() => {
    // getProjectList()
})
</script>

<style lang="scss" scoped>
.project-select-container {
    height: 100%;
    background-color: #f7f8fa;
    box-sizing: border-box;
    padding-bottom: 20rpx;

    .project-select-row,
    .project-select-table-box {
        background-color: #fff;
        margin-top: 20rpx;
        padding: 20rpx;
    }

    .project-select-button-box {
        display: flex;
        align-items: center;
        gap: 10rpx;
    }

    .table-td {
        text-align: center !important;
    }

    .table-th {
        padding: 20rpx 0;
        background-color: #f7f8fa;
    }

    .table-tbody {
        padding: 20rpx 0;
    }

    .table-tbody:hover {
        background-color: #f7f8fa;
    }

    .pagination-box {
        margin-top: 20rpx;

        display: flex;
        justify-content: flex-end;
    }
}
</style>