JSDW/src/views/Tenement/FinishedProject/index.vue

<!-- 物业模块-项目完工复核管理-列表 -->
<template>
    <div class="MainBox">
        <el-form :model="queryForm" inline class="card-box mb-4">
            <el-form-item label="项目名称或编号">
                <el-input v-model="queryForm.projectName" placeholder="请输入项目名称或编号"></el-input>
            </el-form-item>
            <el-form-item label="施工单位">
                <el-input v-model="queryForm.constructionUnit" placeholder="请输入施工单位"></el-input>
            </el-form-item>
            <el-form-item label="复核状态">
                <el-select v-model="queryForm.reviewStatus" placeholder="全部">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="item in StatusList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button size="default">重置</el-button>
                <el-button type="primary" size="default">查询</el-button>
            </el-form-item>
        </el-form>

        <div class="card-box">
            <el-table :data="tableData" class="mt-2">
                <el-table-column prop="projectName" label="项目名称"></el-table-column>
                <el-table-column prop="constructionUnit" label="施工单位"></el-table-column>
                <el-table-column prop="workLocation" label="作业地点"></el-table-column>
                <el-table-column prop="supervisorReviewStatus" label="监理复核状态">
                    <template #default="scope">
                        <el-tag :type="scope.row.supervisorReviewStatus == '已完成' ? 'success' : 'warning'">
                            {{ scope.row.supervisorReviewStatus }}
                        </el-tag>
                    </template>
                </el-table-column>
                 <el-table-column prop="ballheadStatus" label="球机状态">
                    <template #default="scope">
                        <el-tag :type="scope.row.ballheadStatus == '已入库' ? 'success' : 'warning'">
                            {{ scope.row.ballheadStatus }}
                        </el-tag>
                    </template>
                </el-table-column>
                 <el-table-column prop="reviewStatus" label="复核状态">
                    <template #default="scope">
                        <el-tag :type="scope.row.reviewStatus == '已完成复核' ? 'success' : 'warning'">
                            {{ scope.row.reviewStatus }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="260">
                    <template #default="scope">
                        <el-button size="small" type="primary" link @click="handleReview(scope.row)">现场复核施工结果</el-button>
                        <el-button size="small" type="primary" link>查看复核详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination-container">
                <span class="total-count">显示第 {{ (pageNum - 1) * pageSize + 1 }} 到 {{ pageNum * pageSize }} 条记录，共 {{
                    total }}
                    条</span>
                <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 20]"
                    :total="total" layout="prev, pager, next"></el-pagination>
            </div>
        </div>
        
    </div>
</template>
<script setup name="Index">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();



// 查询表单数据
const queryForm = ref({
    projectName: "",
    constructionUnit: "",
    reviewStatus: ""
});

// 状态列表
const StatusList = ref([
    {
        label: "待现场复核",
        value: "0"
    },
    {
        label: "待球机入库",
        value: "1"
    },
    {
        label: "已完成复核",
        value: "2"
    },
]);

// 表格数据
const tableData = ref([
    {
        id: 1,
        projectName: "项目1",
        constructionUnit: "施工单位1",
        workLocation: "作业地点1",
        supervisorReviewStatus: "已完成",
        ballheadStatus: "已入库",
        reviewStatus: "已完成复核",
        submitEndTime: "2023-08-01 10:00:00"
    },
    {
        id: 2,
        projectName: "项目2",
        constructionUnit: "施工单位2",
        workLocation: "作业地点2",
        supervisorReviewStatus: "待完成",
        ballheadStatus: "待入库",
        reviewStatus: "待复核",
        submitEndTime: "2023-08-02 10:00:00",
        returnStatus: "待回收"
    },
    {
        id: 3,
        projectName: "项目3",
        constructionUnit: "施工单位3",
        workLocation: "作业地点3",
        supervisorReviewStatus: "待完成",
        ballheadStatus: "待入库",
        reviewStatus: "待复核",
        submitEndTime: "2023-08-03 10:00:00",
        returnStatus: "已回收待入库"
    },

]);

const pageNum = ref(1); // 当前页码
const pageSize = ref(5); // 每页显示条数
const total = ref(20); // 总记录数

// 现场复核施工结果弹窗-打开
const handleReview = (row) => {
    router.push({
        path: "/Tenement/FinishedProject/particulars",
        query: {
            id: row.id
        }
    })
}




</script>
<style scoped lang="scss">
.MainBox {
    padding: 20px;
    height: 100%;
    background: #F9FAFB;
}

.FlexBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.TitleBox {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
}


.mt-2 {
    margin-top: 20px;
}


.card-box {
    background: #fff;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.total-count {
    color: #606266;
}
</style>