shuili_manager/jwtech-pc-page/src/views/creditStatistics/components/certificationTable.vue

<template>
    <div class="certification-wrap">
        <div class="certification-header">
            <span class="certification-title">{{ title }}</span>
            <div class="more-btn" @click="toMore()">
                <span>更多</span>
                <img src="@/assets/image/icon_more.png" alt="">
            </div>
        </div>
        <div class="certification-main">
            <div class="table-title">
                <span>企业名称</span>
                <span>所在区域</span>
                <span>信用分数</span>
            </div>
            <div class="table-list" v-if="tableList.length>0">
                <div class="table-item" v-for="(item, index) in tableList" :key="(item, index)">
                    <span @click="toDetail(item)">{{ item.enterpriseName }}</span>
                    <span>{{ functionArea(item) }}</span>
                    <span>{{ item.dynamicCreditScore }}</span>
                </div>
            </div>
            <div class="table-list" v-else style="text-align: center;margin-top: 20px;">
                暂无数据！
            </div>
        </div>
    </div>
</template>
<script>
import { regionData, codeToText, TextToCode } from "element-china-area-data";
export default {
    props: {
        title: {
            type: String,
            default: ""
        },
        tableList: {
            type: Array,
            default: () => {
                return []
            }
        },
        codeText:{
            type: String,
            default: ""
        },
        qualificationCategory:{
            type: String,
            default: ""
        }
    },
    data() {
        return {
        }
    },
    methods: {
        functionArea(row) {
            if (row.adcd) {
                let provinceCode = row.adcd.slice(0, 2);
                let cityCode = row.adcd.slice(2, 4);
                let areaCode = row.adcd.slice(4, 6);
                if (areaCode != "00") {
                    return (
                        codeToText[provinceCode] +
                        "/" +
                        codeToText[provinceCode + cityCode] +
                        "/" +
                        codeToText[provinceCode + cityCode + areaCode]
                    );
                } else if (cityCode != "00") {
                    return (
                        codeToText[provinceCode] + "/" + codeToText[provinceCode + cityCode]
                    );
                } else {
                    return codeToText[provinceCode];
                }
            }
        },
        toDetail(item) {
            this.$router.push({
                path: '/enterpriseInDetail',
                query:{
                    enterpriseId:item.enterpriseId
                }
            })
        },
        toMore() {
            this.$router.push({
                path: "/certificationPage",
                query:{
                    codeText:this.codeText,
                    qualificationCategory:this.qualificationCategory
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.certification-wrap {
    width: 400px;
    height: 310px;
    margin-top: 20px;
    margin-right: 40px;

    .certification-header {
        height: 46px;
        background: #F6F6F6;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .certification-title {
            display: block;
            font-size: 20px;
            font-weight: 600;
            color: #333333;
            padding-left: 10px;
            border-left: 3px solid #005EB7;
        }

        .more-btn {
            display: flex;
            align-items: center;
            margin-right: 10px;
            cursor: pointer;

            span {
                display: block;
                font-size: 16px;
                color: #666666;
            }

            img {
                display: block;
            }
        }
    }

    .certification-main {
        margin-top: 20px;

        .table-title {
            display: flex;

            span {
                display: block;
                font-size: 16px;
                font-weight: 600;
                color: #005EB7;
            }

            span:nth-child(1) {
                width: 50%;
                // border: 1px solid red;
            }

            span:nth-child(2) {
                width: 30%;
                // border: 1px solid blue;
                text-align: center;
                margin-right: 2%;
            }

            span:nth-child(3) {
                width: 18%;
                // border: 1px solid olive;
                text-align: center;
            }
        }

        .table-list {
            margin-top: 10px;
            height: 225px;
            overflow: hidden;

            .table-item {
                height: 44px;
                line-height: 44px;
                border-top: 1px solid #d8d6d6;
                display: flex;

                span {
                    display: block;
                }

                span:nth-child(1) {
                    width: 50%;
                    font-size: 16px;
                    color: #005EB7;
                    cursor: pointer;
                }

                span:nth-child(2) {
                    width: 30%;
                    font-size: 16px;
                    color: #333333;
                    text-align: center;
                    margin-right: 2%;
                    line-height: 25px;
                }

                span:nth-child(3) {
                    width: 18%;
                    font-size: 16px;
                    color: #333333;
                    text-align: center;
                }
            }
        }
    }
}

.certification-wrap:nth-child(2n) {
    margin-right: 0;
}
</style>