查看详情弹窗模式

核心代码

<template>
    <el-dialog title="查看详情" width="1280px" append-to-body v-dialogDrag v-bind="$attrs" v-on="$listeners">
        <div class="seeTitle">
            <div class="line"></div>
            <div>基本信息</div>
        </div>
        <el-row class="detail_form">
            <el-col :span="spanNum" class="detail_col">
                <div class="title">企业类型</div>
                <div class="value">{{seeData.type==1?'贸易公司':'运输公司'}}</div>
            </el-col>
            <el-col :span="spanNum" class="detail_col">
                <div class="title">公司名称</div>
                <div class="value">{{seeData.name}}</div>
            </el-col>
            <el-col :span="spanNum" class="detail_col">
                <div class="title">营业执照</div>
                <div class="value">
                    <div v-if="seeData.businessLicense">
                        <el-image class="seeImg" :src="filterImg(seeData.businessLicense)" :preview-src-list="[filterImg(seeData.businessLicense)]"></el-image>
                    </div>
                </div>
            </el-col>
            <el-col :span="spanNum" class="detail_col">
                <div class="title">其他资料</div>
                <div class="value">
                    <div v-for="item,index in seeData.otherInformation" :key="index">
                        <el-image class="seeImg" :src="filterImg(item)" :preview-src-list="[filterImg(item)]"></el-image>
                    </div>
                </div>
            </el-col>
            <el-col :span="spanNum" class="detail_col">
                <div class="title">统一社会信用代码</div>
                <div class="value">{{seeData.unifiedSocialCreditCode}}</div>
            </el-col>
            <el-col :span="24" class="detail_col">
                <div class="title">备注</div>
                <div class="value">{{seeData.remark}}</div>
            </el-col>
        </el-row>
        <div class="seeTitle mt16" v-if="seeData.type==1">
            <div class="line"></div>
            <div>贸易公司</div>
        </div>
        <div slot="footer">
            <el-button type="primary" @click="handleClose">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: ['seeData'],
    data() {
        return {
            spanNum: 12,
        }
    },
    created() {
    },
    methods: {
        handleClose() {
            this.$emit('update:visible', false)
        },
        filterName(url) {
            if (url) {
                var name = url.match(/.*\/(.*)$/)[1]
                if (name) {
                    return name
                }
            }
            return ''
        },
        filterImg(url) {
            if (url) {
                url = Util.global.httpImage + url
                return url
            }
            return ''
        },
        filterPeriod(val) {
            if (val) {
                val = JSON.parse(val)
                if (val.checked) {
                    return val.startDate + '到' + '长期'
                } else {
                    return val.startDate + '到' + val.endDate
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
</style>

<view-details :visible.sync="openView" :seeData="formData"></view-details>
import viewDetails from './viewDetails'
            //查看详情
            openView: false,//详情弹窗
    components: {
        longDate,
        uploadImg,
        orc_mixin,
        uploadImg2,
        viewDetails
    },

//查看详情
        async handleView(row){
            this.reset();
            var id = row.id
            var res = await Util.getCompany(id)
            if (res.code == '200') {
                if (res.data.type) {
                    res.data.type += ''
                }
                this.formData = res.data;
                this.openView = true;
            }
        },

//弹窗增加滚动条
.overflow600 .el-dialog__body {
    height: 600px;
    overflow-y: auto;
}
.detail_form {
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    .detail_col {
        margin-top: -1px;
        border: 1px solid #e6e9f0;
        min-height: 50px;
        box-sizing: border-box;
        display: flex;
        & > div {
            padding-left: 20px;
            padding-right: 12px;
            display: flex;
            align-items: center;
        }
        & > .title {
            width: 150px;
            flex-shrink: 0;
            background-color: #f5f5f5; //F6F7FB
            color: #696c72;
            height: 100%;
            font-weight: bold;
        }
        & > .value {
            padding-top: 8px;
            padding-bottom: 8px;
            width: 100%;
            border-left: 1px solid #e6e9f0;
            color: #333;
        }
        & > .imgUrl {
            flex-wrap: wrap;
            padding: 5px;
            width: 100%;
            border-left: 1px solid #e6e9f0;
            color: #333;
        }
    }
    .seeImg {
        height: 100px;
        width: auto;
    }
    .subtable {
        margin-left: 0 !important;
        padding: 0 !important;
        position: relative;
        width: 100%;
        line-height: unset;
    }
}
.seeTitle {
    display: flex;
    align-items: center;
    font-size: 18px;
    height: 24px;
    margin-bottom: 16px;
    & > div:nth-child(1) {
        width: 5px;
        background: #1890ff;
        height: 20px;
    }
    & > div:nth-child(2) {
        font-weight: bold;
        padding-left: 10px;
    }
}