digital_park_static/digital-park-web/digital-park/src/views/park-enterprises/components/OtherInfo.vue

<!-- 其他信息 -->
<template>
    <div class="basic_info_box">
        <div class="title">
            其他信息：
        </div>
        <table class="table_box" cellspacing="0">
            <tr>
                <td class="table_title">企业优势：</td>
                <td class="content">
                    <el-input
                        v-if="companyInfo.enterpriseAdvantage"
                        :disabled="!isEditing"
                        :resize="isEditing ? 'vertical' : ' none'"
                        type="textarea"
                        maxlength="200"
                        v-model="companyInfo.enterpriseAdvantage"
                    ></el-input>
                    <span v-else>--</span>
                </td>
            </tr>
            <tr>
                <td class="table_title">企业文化：</td>
                <td class="content">
                    <el-input
                        v-if="companyInfo.enterpriseCulture"
                        :disabled="!isEditing"
                        :resize="isEditing ? 'vertical' : ' none'"
                        type="textarea"
                        maxlength="200"
                        v-model="companyInfo.enterpriseCulture"
                    ></el-input>
                    <span v-else>--</span>
                </td>
            </tr>
            <tr>
                <td class="table_title">企业风采：</td>
                <td class="content">
                    <div style="display:flex" v-if="!isEditing">
                        <template v-if="uploadFileList.length > 0">
                            <img
                                v-for="(item, index) in uploadFileList"
                                :key="index"
                                class="company_img"
                                :src="formatImg(item)"
                                alt="企业风采"
                            />
                        </template>
                        <span v-else>--</span>
                    </div>
                    <div v-else class="img_box">
                        <el-upload
                            :limit="5"
                            class="avatar-uploader"
                            :file-list="fileList"
                            action="#"
                            list-type="picture-card"
                            accept=".jpg,.png,.jpeg"
                            :http-request="
                                file => {
                                    afterReadUrl(file);
                                }
                            "
                            :before-remove="handleBeforeRemove"
                        >
                            <div slot="default" class="upload_text">
                                <img
                                    class="company_img"
                                    src="@assets/image/company/bg_upload.png"
                                    alt=""
                                />
                            </div>
                        </el-upload>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="table_title">其他信息：</td>
                <td class="content">
                    <div>
                        <el-input
                            v-if="companyInfo.otherInfo"
                            :disabled="!isEditing"
                            :resize="isEditing ? 'vertical' : ' none'"
                            type="textarea"
                            v-model="companyInfo.otherInfo"
                            maxlength="200"
                        ></el-input>
                        <span v-else>--</span>
                    </div>
                </td>
            </tr>
        </table>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { uploadFile } from "@mixin/uploadFile";
import { formatImg } from "@/utils/common.js";

export default {
    props: {
        companyInfo: {
            type: Object,
            default: () => {},
        },
        isEditing: {
            type: Boolean,
            default: false,
        },
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    mixins: [uploadFile],
    data() {
        //这里存放数据
        return {
            fileList: [],
            uploadFileList: [], // 上传的图片数组
            dialogImageUrl: "",
            dialogVisible: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        formatImg,
        // 删除图片
        handleBeforeRemove(file, fileList) {
            console.log(fileList);
            const index = fileList.findIndex(e => e.uid === file.uid);
            this.uploadFileList.splice(index, 1);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        async afterReadUrl(file) {
            let photo2Url = await this.uploadFile(file, null);
            this.uploadFileList.push(photo2Url);
            // console.log(this.uploadFileList);
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.uploadFileList = this.companyInfo.enterpriseFeatures
            ? JSON.parse(this.companyInfo.enterpriseFeatures)
            : [];
        if (this.companyInfo.enterpriseFeatures) {
            this.uploadFileList.forEach(item => {
                this.fileList.push({
                    url: this.formatImg(item),
                });
            });
        }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.basic_info_box {
    width: 100%;
    .title {
        @include font(16px, #334a5f);
        font-weight: 600;
        padding: 20px 0;
        @include border-box;
    }
    .table_box {
        width: 100%;
        border: 1px solid #bcd8e9;
        tr {
            height: 48px;
            td {
                @include font(14px, #334a5f);
                padding: 10px;
                @include border-box;
            }
            > td + td {
                border-left: 1px solid #bcd8e9;
            }
        }
        > tr + tr {
            td {
                border-top: 1px solid #bcd8e9;
            }
        }
        .table_title {
            height: 48px;
            @include font(14px, #637485);
            @include size(110px, auto);
            background: #f2f7fb;
            text-align: center;
        }
        .content {
            padding: 20px;
            @include border-box;

            .avatar-uploader {
                // @include size(120px, 96px);
                @include flex(row, flex-start, center, wrap);
                .upload_text {
                    @include border-box;
                    @include size(120px, 96px);
                }
                ::v-deep .el-upload {
                    @include size(120px, 96px);
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    margin-bottom: 8px;
                }
            }
            ::v-deep .el-upload-list--picture-card {
                display: inline-flex;
            }
            ::v-deep .el-upload-list--picture-card .el-upload-list__item {
                @include size(120px, 96px);
                border: none;
                border-radius: 0px;
                margin-right: 25px;

                > div {
                    width: 100%;
                    height: 100%;
                }
            }
            ::v-deep .el-upload--picture-card {
                border: none;
            }
            .company_img {
                @include size(120px, 96px);
                margin-right: 25px;
            }
        }
        ::v-deep .el-textarea.is-disabled .el-textarea__inner {
            background: #fff;
            border: none;
            padding: 5px 0;
            @include font(14px, #334a5f);
        }
    }
}
</style>