<template> 
 | 
    <GlobalWindow 
 | 
        :title="title" 
 | 
        width="50%" 
 | 
        submitText="修改" 
 | 
        :visible.sync="visible" 
 | 
        :confirm-working="isWorking" 
 | 
        @confirm="$refs.operaSolutionsWindow.open('编辑方案', form)" 
 | 
    > 
 | 
        <div class="info"> 
 | 
            <div class="info_list"> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">方案名称:</div> 
 | 
                    <div class="info_list_item_val">{{form.name}}</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">保险公司:</div> 
 | 
                    <div class="info_list_item_val">{{form.insuranceName}}</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">承保公司:</div> 
 | 
                    <div class="info_list_item_val">{{form.companyName}}</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">投保年龄:</div> 
 | 
                    <div class="info_list_item_val">{{form.minAge}}至{{form.maxAge}}</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">投保类型:</div> 
 | 
                    <div class="info_list_item_val">平台投保</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">保险费用:</div> 
 | 
                    <div class="info_list_item_val"> 
 | 
                        {{form.price}}元/人/ 
 | 
                        <span v-if="form.timeUnit === 0">天</span> 
 | 
                        <span v-if="form.timeUnit === 1">半月</span> 
 | 
                        <span v-if="form.timeUnit === 2">月</span> 
 | 
                        <span v-if="form.timeUnit === 3">年</span> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">投保周期:</div> 
 | 
                    <div class="info_list_item_val"> 
 | 
                        {{form.insureCycle}} 
 | 
                        <span v-if="form.insureCycleUnit === 0">天</span> 
 | 
                        <span v-if="form.insureCycleUnit === 1">半月</span> 
 | 
                        <span v-if="form.insureCycleUnit === 2">月</span> 
 | 
                        <span v-if="form.insureCycleUnit === 3">年</span> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">生效时间:</div> 
 | 
                    <div class="info_list_item_val">{{form.validType === 0 ? '日后生效' : '次月生效'}}</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">投保类型:</div> 
 | 
                    <div class="info_list_item_val">{{form.type === 0 ? '直保' : '委托投保'}}</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">接收文件邮箱:</div> 
 | 
                    <div class="info_list_item_val">{{form.email}}</div> 
 | 
                </div> 
 | 
            </div> 
 | 
            <el-table 
 | 
                :data="form.worktypeList" 
 | 
                border 
 | 
                style="width: 100%; margin-bottom: 20px;"> 
 | 
                <el-table-column 
 | 
                    label="序号" 
 | 
                    align="center" 
 | 
                    width="80"> 
 | 
                    <template slot-scope="scope"> 
 | 
                        <span>{{scope.$index + 1}}</span> 
 | 
                    </template> 
 | 
                </el-table-column> 
 | 
                <el-table-column 
 | 
                    prop="worktypeName" 
 | 
                    align="center" 
 | 
                    label="所属工种"> 
 | 
                </el-table-column> 
 | 
            </el-table> 
 | 
            <div class="info_agree"> 
 | 
                <div class="info_agree_label">保险声明:</div> 
 | 
                <div class="info_agree_label">特别约定:</div> 
 | 
                <div class="info_agree_val"> 
 | 
                    {{form.specialAgreement}} 
 | 
                </div> 
 | 
            </div> 
 | 
        </div> 
 | 
        <!-- 修改 --> 
 | 
        <OperaSolutionsWindow ref="operaSolutionsWindow" @success="callback"/> 
 | 
    </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    import BaseOpera from '@/components/base/BaseOpera' 
 | 
    import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
    import OperaSolutionsWindow from '@/components/business/OperaSolutionsWindow' 
 | 
    import { solutionsId } from '@/api/business/solutions' 
 | 
    export default { 
 | 
        name: 'OperaSolutionsDescWindow', 
 | 
        extends: BaseOpera, 
 | 
        components: { GlobalWindow, OperaSolutionsWindow }, 
 | 
        data () { 
 | 
            return { 
 | 
                // 表单数据 
 | 
                form: { 
 | 
                    id: null, 
 | 
                    name: '', 
 | 
                    companyName: '', 
 | 
                    insuranceId: '', 
 | 
                    validType: 0, 
 | 
                    type: 0, 
 | 
                    minAge: '', 
 | 
                    maxAge: '', 
 | 
                    price: '', 
 | 
                    timeUnit: '', 
 | 
                    insureCycle: '', 
 | 
                    insureCycleUnit: '', 
 | 
                    email: '', 
 | 
                    specialAgreement: '', 
 | 
                    specialInfo: '', 
 | 
                    ortherInfo: '', 
 | 
                    insuranceName: '', 
 | 
                    signKeyword: '', 
 | 
                    worktypeList: [], 
 | 
                    worktypeIdList: [] 
 | 
                } 
 | 
            } 
 | 
        }, 
 | 
        created () { 
 | 
            this.config({ 
 | 
                api: '/business/solutions', 
 | 
                'field.id': 'id' 
 | 
            }) 
 | 
        }, 
 | 
        methods: { 
 | 
            open (title, target) { 
 | 
                this.title = title 
 | 
                this.visible = true 
 | 
                this.$nextTick(() => { 
 | 
                    for (const key in this.form) { 
 | 
                        this.form[key] = target[key] 
 | 
                    } 
 | 
                    this.getDetails() 
 | 
                }) 
 | 
            }, 
 | 
            getDetails() { 
 | 
                solutionsId(this.form.id) 
 | 
                    .then(res => { 
 | 
                        for (const key in this.form) { 
 | 
                            this.form[key] = res[key] 
 | 
                        } 
 | 
                        this.form.worktypeIdList = res.worktypeList.map(item => { 
 | 
                            return { 
 | 
                                worktypeId: item.worktypeId 
 | 
                            } 
 | 
                        }) 
 | 
                    }) 
 | 
            }, 
 | 
            callback() { 
 | 
                this.$emit('success') 
 | 
                this.visible = false 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
    .info { 
 | 
        width: 100%; 
 | 
        .info_agree { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            flex-direction: column; 
 | 
            margin-top: 20px; 
 | 
            .info_agree_label { 
 | 
                font-size: 14px; 
 | 
                font-weight: 500; 
 | 
                color: #000000; 
 | 
                margin-top: 5px; 
 | 
            } 
 | 
            .info_agree_val { 
 | 
                font-size: 14px; 
 | 
                font-weight: 500; 
 | 
                color: #000000; 
 | 
                margin-top: 5px; 
 | 
            } 
 | 
        } 
 | 
        .info_label { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            justify-content: space-between; 
 | 
            margin-bottom: 20px; 
 | 
            span { 
 | 
                font-size: 18px; 
 | 
                font-weight: 500; 
 | 
                color: #000000; 
 | 
            } 
 | 
        } 
 | 
        .info_fwb { 
 | 
            width: 100%; 
 | 
            margin-top: 20px; 
 | 
        } 
 | 
        .info_list { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            flex-wrap: wrap; 
 | 
            .info_list_item { 
 | 
                width: 50%; 
 | 
                display: flex; 
 | 
                align-items: start; 
 | 
                margin-bottom: 20px; 
 | 
                .info_list_item_label { 
 | 
                    width: 130px; 
 | 
                    flex-shrink: 0; 
 | 
                } 
 | 
                .info_list_item_val { 
 | 
                    flex: 1; 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    .image { 
 | 
                        width: 100px; 
 | 
                        height: 100px; 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        justify-content: center; 
 | 
                        overflow: hidden; 
 | 
                        img { 
 | 
                            width: 100%; 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |