Gyyq-Upstairs/src/views/components/analysis/projectList.vue

<template>
    <div>
        <!-- 表格内容区 -->
        <div class="tablebox">
            <!-- 标签行 -->
            <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" stripe>
                <el-table-column label="项目名称" align="center" width="150" >
                    <template slot-scope="scope">
                        <span style="color: #2B62F1;cursor: pointer;" @click="getInfo(scope.row, 'detail')">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="总投资额（万元）" align="center" prop="ztze" />
                <el-table-column label="所在区域" align="center" width="100" prop="ssgnq">
                    <template slot-scope="scope">
                        <span>{{ ssgnqMap[scope.row.ssgnq] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="总用地面积（平方米）" align="center" width="100" prop="zydmj" />
                <el-table-column label="状态" align="center" width="100" prop="xzfl">
                    <template slot-scope="scope">
                        <span :style="{ color: xzflColors[xzflMap[scope.row.xzfl]] }">{{
                            xzflMap[scope.row.xzfl] }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { getBasicInformationPage } from "@/api/ManageApi/index";
import { checkPermi, checkRole } from "@/utils/permission";

export default {
    name: "TableContent",
    dicts: ["xzfl"],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 项目表格数据
            postList: [],
            // 状态颜色映射
            xzflColors: {
                '在建': '#6EDABE',
                '拟建': '#FFBF6B',
                '已建': '#2B62F1'
            },
            //状态文本映射
            ssgnqMap: {
                1: '高贸区',
                2: '科创区',
                3: '度假区',
                4: '商务区',
                5: '苏相合作区'
            },
            xzflMap: {
                1: '已建',
                2: '在建',
                3: '拟建'
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                xzfl: '',
                name: '',
                xmfrdwxz: '',
                dateRange: '', // 日期范围
                status: ''
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        checkPermi,
        checkRole,
        /** 查询项目列表 */
        getList() {
            this.loading = true;

            // 处理日期范围参数
            const params = {
                ...this.queryParams,
                begainTime: this.queryParams.dateRange ? this.queryParams.dateRange[0] : undefined,
                endTime: this.queryParams.dateRange ? this.queryParams.dateRange[1] : undefined
            };

            console.log('【查询参数】', params); // 打印查询参数

            getBasicInformationPage(params).then((response) => {
                this.postList = response.data.records;
                this.total = response.data.total;
                this.loading = false;
            }).catch(error => {
                console.error('查询失败:', error);
                this.loading = false;
            });
        },

        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },

        /** 详情按钮操作 */
        getInfo(row, type) {
            this.$store.commit("SET_CRUMBS", this.$route.meta.title + "详情");
            const id = row.id || this.ids[0];
            this.$router.push({ path: `/manage-info/${id}`, query: { action: type } });
        },
    },
};
</script>

<style scoped>
.tablebox {
    background-color: #fff;
    border-radius: .5rem;
    margin: .5rem;
}

.tablehead {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tablebtntwo {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
</style>