settle_down_web/src/views/industrySupervision/schemeDetail.vue

<template>
    <div class="schemeDetailPage">
        <div class="title">
            <span>预案详情</span>
            <img src="./images/close.png" alt="" @click="close">
        </div>
        <div class="head">
            <div class="name">{{row.name}} <span>{{row.number}}</span></div>
            <div class="scene">{{row.scene}}</div>
            <img src="./images/down.png" alt="" @click="handleDownload(row,'是否下载应急预案文档？')">
        </div>
        <div class="info">
            <div class="item inline">
                <div class="label">预案类型：</div>
                <div class="word">{{row.type}}</div>
            </div>
            <div class="item inline">
                <div class="label">预案状态：</div>
                <div class="word" :class="row.state=='已开启'?'green':'red'">{{row.state}}</div>
            </div>
            <div class="item">
                <div class="label">预案编制单位：</div>
                <div class="word">{{row.yabzdw}}</div>
            </div>
            <div class="item bq">
                <div class="it" v-for="item in bq">{{item}}</div>
            </div>
        </div>
        <div class="main">
            <div class="left">
                <div class="item" :class="tab==1?'active':''" @click="changeTab(1)">
                    <img :src="tab==1?require('./images/Group01.png'):require('./images/Group1.png')" alt="">
                    <span>适用范围</span>
                </div>
                <div class="item" :class="tab==2?'active':''" @click="changeTab(2)">
                    <img :src="tab==2?require('./images/Group02.png'):require('./images/Group2.png')" alt="">
                    <span>预案主流程</span>
                </div>
                <div class="item" :class="tab==3?'active':''" @click="changeTab(3)">
                    <img :src="tab==3?require('./images/Group03.png'):require('./images/Group3.png')" alt="">
                    <span>预案内容</span>
                </div>
                <div class="item" :class="tab==4?'active':''" @click="changeTab(4)">
                    <img :src="tab==4?require('./images/Group04.png'):require('./images/Group4.png')" alt="">
                    <span>预案节点</span>
                </div>
                <div class="item" :class="tab==5?'active':''" @click="changeTab(5)">
                    <img :src="tab==5?require('./images/Group05.png'):require('./images/Group5.png')" alt="">
                    <span>资源保障</span>
                </div>
            </div>
            <div class="right">
                <div v-if="tab==1">
                    <QuillEditor :height="100" :value="content" @onEditorChange="getContent" v-if="dialogfrom!='index'"/>
                    <div class="ql-container "  v-else>
                        <div class="ql-editor">
                        <div v-html="content" />
                        </div>
                    </div>
                </div>
                <div v-if="tab==2">
                    <div class="upload" v-if="flowsheet==''&&dialogfrom!='index'">
                        <el-upload
                        class="upload-demo"
                        action="#"
                        :http-request="imageUpload"
                        :multiple="false"
                        :limit="1" :show-file-list="false"
                        accept=".jpg,.jpeg,.png,.bmp,.JPG,.JPEG,PNG,.BMP"
                      >
                        <el-button
                          size="small"
                          class="" type="primary"
                          style="argin-top: 4px"
                        >上传附件
                        </el-button>
                      </el-upload>
                      <div>上传jpg、png、bmp格式图片</div>
                    </div>
                    
                      <div class="sheet" v-else>
                        <img :src="flowsheet" alt="" >
                        <i class="el-icon-delete" @click="delImg" v-if="dialogfrom!='index'"></i>
                      </div>
                </div>
                <div v-if="tab==3">
                    <QuillEditor :height="100" :value="msg" @onEditorChange="getContent2"  v-if="dialogfrom!='index'"/>
                    <div class="ql-container " v-else>
                        <div class="ql-editor">
                        <div v-html="msg" />
                        </div>
                    </div>
                </div>
                <div v-if="tab==4">
                    <schemeNode :schemeid="schemeid" :dialogfrom="dialogfrom"/>
                </div>
                <div v-if="tab==5">
                    <schemeResource :schemeid="schemeid"  :dialogfrom="dialogfrom"/>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Base from '@/views/base/base'
    import QuillEditor from '@/components/QuillEditor'
    import axios from 'axios'
    import schemeNode from '@/views/industrySupervision/schemeNode'
    import schemeResource from '@/views/industrySupervision/schemeResource'
    export default {
        name: 'Scheme',
        components: {
            QuillEditor,schemeNode,schemeResource
        },
        props:['row','dialogfrom'],
        mixins: [Base],
        data() {
            return{
                tab:1,
                content:'',
                bq:[],
                flowsheet:'',
                msg:'',
                schemeid:''
            }
        },
        mounted(){
            console.log(this.dialogfrom)
            this.bq=this.row.bqName.split(',')
            this.content=this.row.syfw
            this.msg=this.row.yanr
            this.flowsheet=this.row.yazlc==null?'':this.row.yazlc
            this.schemeid=this.row.id
        },
        methods:{
            changeTab(num){
                this.tab=num
            },
            getContent(content) {
                this.content = content
                this.$emit('getsyfw',content)
            },
            getContent2(content){
                this.msg = content
                this.$emit('getyanr',content)
            },
            close(){
                this.$emit('closeDetail','false')
            },
            imageUpload(item) {
                console.log(item)
                const formParam = new FormData() // 创建form对象
                formParam.append('file', item.file)// 通过append向form对象添加数据
                const config = {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'MVVM-Key': String(new Date().getTime()),
                        'xx': 'anything'
                    }
                } // 添加请求头
                return new Promise((resolve, reject) => {
                    axios.defaults.withCredentials = true
                    axios.post(this.$constant.BASE_URI + '/SocialPublicFeedbackController/upload', formParam, config)
                        .then(response => {
                            console.log('Upload success file:', response.data)
                            if (response.data.code == 500) {
                                this.$message.error(response.data.msg)
                            } else {
                                this.flowsheet = response.data.data.msg
                                this.$emit('getSheet',this.flowsheet)
                            }
                        }).catch((err, x) => {
                            reject(err, x)
                        })
                })
            },
            delImg(){
                this.flowsheet=''
                this.$emit('getSheet',this.flowsheet)
            }
        }
    }
</script>
<style scoped  lang="scss">
.schemeDetailPage{
    >.title{
        padding-bottom: 16px;
        border-bottom: 1px solid #DDDDDD;
        position: relative;
        margin-bottom: 16px;
        padding-top: 0;
        span{
            font-size: 18px;color: #333333;
        }
        img{
            position: absolute;
            right: 0;
            top: 0;cursor: pointer;
        }
    }
    .head{
        margin-bottom: 12px;
        >div{
            display: inline-block;
            vertical-align: middle;
        }
        .name{
            font-size: 16px;color: #1F6AFF;
            text-decoration: underline;
            margin-right: 8px;
            span{
                font-size: 14px;
            }
        }
        .scene{
            height: 24px;
background: rgba(31,106,255,0.2);
border-radius: 2px 2px 2px 2px;
opacity: 1;
border: 1px solid #1F6AFF;font-size: 12px;color: #1F6AFF;
            line-height: 24px;
            padding: 0 12px;
            margin-right: 12px;
        }
        img{
            vertical-align: middle;
            cursor: pointer;
        }
    }
    .info{
        font-size: 14px;
        padding-bottom: 6px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 16px;
        .inline{
            display: inline-block;
        }
        .item:nth-child(1){
            width: 300px;
        }
        .item{
            margin-bottom: 11px;
            >div{
                display: inline-block;
            }
        }
        .item:nth-child(2){
            .word{
                height: 22px;
                border-radius: 18px 18px 18px 18px;
                opacity: 1;
                font-size: 12px;
                line-height: 22px;
                padding: 0 8px;

            }
            .green{
                 background: rgba(76,220,168,0.2);
                border: 1px solid #4CDCA8;
                color: #4CDCA8;
            }
            .red{
                background: rgba(220,76,86,0.2);
                border: 1px solid #DC4C56;
                color: #DC4C56;
            }
        }
        .label{
            color: #333333;
        }
        .word{
            color: #666666;
        }
        .bq{
            .it{
                display: inline-block;
                height: 29px;
                background: #F1F6FF;
                border-radius: 2px 2px 2px 2px;
                font-size: 14px;
                color: #1F6AFF;
                line-height: 29px;
                padding: 0 12px;
                margin-right: 8px;
            }
        }
    }
    .main{
        height: 701px;
        background: #F5F5F5;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #CCCCCC;
        >div{
            display: inline-block;
            vertical-align: top;
        }
        .left{
            width: 168px;
            height: 100%;
            background: #FFFFFF;
            box-shadow: inset 1px 0px 0px 0px #CCCCCC, inset 0px 1px 0px 0px #CCCCCC, inset 0px -1px 0px 0px #CCCCCC, 3px 0px 7px 0px rgba(0,0,0,0.12);
            border-radius: 4px 0px 0px 4px;
            box-sizing: border-box;
            padding: 8px;
            .item{
                height: 40px;
                background: #F5F5F5;
                border-radius: 4px 4px 4px 4px;
                box-sizing: border-box;
                padding: 0 16px;
                line-height: 40px;
                margin-bottom: 8px;
                cursor: pointer;
                img{
                    vertical-align: middle;
                }
                span{
                    vertical-align: middle;
                    font-size: 16px;
                    color: #999999;
                }
            }
            .active{
                background: #1F6AFF;
                span{
                    color: #FFFFFF;
                }
            }
        }
        .right{
            padding: 16px;
            width: 985px;
            .upload{
                text-align: center;
                margin-top: 200px;
                .upload-demo{
                    margin-bottom: 10px;
                }
            }
            .sheet{
                text-align: center;
                height: 667px;
                overflow: auto;
                position: relative;
                img{
                    width: 740px;
                }
                .el-icon-delete{
                    color: #DC4C56;
                    position: absolute;
                    top: 0;
                    right: 0;
                    font-size: 32px;
                    cursor: pointer;
                }
            }
        }
    }
    .ql-container{
        height: 666px;overflow: auto;
    }
}
</style>
<style  lang="scss">
.schemeDetailPage{
    .quill-editor{
    height: 600px;
    }
    .edit_container .ql-editor{
        height: 600px;
    }
}
</style>