<template> 
 | 
    <GlobalWindow 
 | 
        :title="title" 
 | 
        width="100%" 
 | 
        :withFooter="false" 
 | 
        :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.correctWarnTime}}</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">批增生效:</div> 
 | 
                    <div class="info_list_item_val">{{form.addValidDays||0}} 天</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">批减生效:</div> 
 | 
                    <div class="info_list_item_val">{{form.delValidDays||0}} 天</div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">批改支持:</div> 
 | 
                    <div class="info_list_item_val"> 
 | 
                        <span style="margin-right: 50px">加保 <i  :class="form.canAdd ==1?'el-icon-circle-check':'el-icon-circle-close'" :style="form.canAdd ==1?'color:green;font-weight:bold':'color:red;font-weight:bold'"></i></span> 
 | 
                        <span  style="margin-right: 50px">减保  <i   :class="form.canReduce ==1?'el-icon-circle-check':'el-icon-circle-close'" :style="form.canReduce ==1?'color:green;font-weight:bold':'color:red;font-weight:bold'"></i></span> 
 | 
                        <span>更换派遣单位 <i   :class="form.canChangeUnit ==1?'el-icon-circle-check':'el-icon-circle-close'" :style="form.canChangeUnit ==1?'color:green;font-weight:bold':'color:red;font-weight:bold'"></i></span> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <div class="info_list_item"> 
 | 
                    <div class="info_list_item_label">批减仅支持替换:</div> 
 | 
                    <div class="info_list_item_val">是</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 v-html="form.specialAgreement"></div></div> 
 | 
                <div class="info_agree_label">特别说明:<div v-html="form.specialInfo"></div></div> 
 | 
                <div class="info_agree_label">其他说明:<div v-html="form.ortherInfo"></div></div> 
 | 
            </div> 
 | 
        </div> 
 | 
        <!-- 修改 --> 
 | 
        <OperaSolutionsWindow ref="operaSolutionsWindow" @success="callback"/> 
 | 
        <OperaPdfViewerWindow ref="OperaPdfViewerWindow"  /> 
 | 
    </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
  import BaseOpera from '@/components/base/BaseOpera' 
 | 
  import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
  import OperaSolutionsWindow from '@/components/business/OperaSolutionsWindow' 
 | 
  import OperaPdfViewerWindow from '@/components/business/OperaPdfViewerWindow' 
 | 
  import { solutionsBaseId } from '@/api/business/solutionsBase' 
 | 
  import { mapState } from 'vuex' 
 | 
  export default { 
 | 
    name: 'OperaSolutionsBaseDescWindow', 
 | 
    extends: BaseOpera, 
 | 
    components: { GlobalWindow, OperaPdfViewerWindow,OperaSolutionsWindow }, 
 | 
    data () { 
 | 
      return { 
 | 
        // 表单数据 
 | 
        form: { 
 | 
          id: null, 
 | 
          name: '', 
 | 
          companyName: '', 
 | 
          insuranceId: '', 
 | 
          validType: 0, 
 | 
          type: 0, 
 | 
          minAge: '', 
 | 
          maxAge: '', 
 | 
          price: '', 
 | 
          timeUnit: '', 
 | 
          insureCycle: '', 
 | 
          shopName: '', 
 | 
          insureCycleUnit: '', 
 | 
          validTypeNum: '', 
 | 
          email: '', 
 | 
          canReduce: 0, 
 | 
          canChangeUnit: 0, 
 | 
          addValidDays: 0, 
 | 
          delValidDays: 0, 
 | 
          delOnlyReplace: 0, 
 | 
          canAdd: 0, 
 | 
          correctWarnTime: '', 
 | 
          specialAgreement: '', 
 | 
          specialInfo: '', 
 | 
          ortherInfo: '', 
 | 
          insuranceName: '', 
 | 
          signKeyword: '', 
 | 
          worktypeList: [], 
 | 
          worktypeIdList: [] 
 | 
        } 
 | 
      } 
 | 
    }, 
 | 
    computed: { 
 | 
      ...mapState(['userInfo']) 
 | 
    }, 
 | 
    created () { 
 | 
      this.config({ 
 | 
        api: '/business/solutionsBase', 
 | 
        'field.id': 'id' 
 | 
      }) 
 | 
    }, 
 | 
    methods: { 
 | 
      open (title, target) { 
 | 
        this.title = title 
 | 
        this.visible = true 
 | 
        this.form = { 
 | 
          id: null, 
 | 
          name: '', 
 | 
          companyName: '', 
 | 
          insuranceId: '', 
 | 
          validType: 0, 
 | 
          type: 0, 
 | 
          minAge: '', 
 | 
          maxAge: '', 
 | 
          price: '', 
 | 
          timeUnit: '', 
 | 
          insureCycle: '', 
 | 
          shopName: '', 
 | 
          insureCycleUnit: '', 
 | 
          validTypeNum: '', 
 | 
          email: '', 
 | 
          specialAgreement: '', 
 | 
          specialInfo: '', 
 | 
          ortherInfo: '', 
 | 
          fanganFile: null, 
 | 
          canReduce: 0, 
 | 
          canChangeUnit: 0, 
 | 
          addValidDays: 0, 
 | 
          correctWarnTime: '', 
 | 
          delValidDays: 0, 
 | 
          delOnlyReplace: 0, 
 | 
          canAdd: 0, 
 | 
          insuranceName: '', 
 | 
          signKeyword: '', 
 | 
          worktypeList: [], 
 | 
          worktypeIdList: [] 
 | 
        } 
 | 
  
 | 
        this.$nextTick(() => { 
 | 
          for (const key in this.form) { 
 | 
            this.form[key] = target[key] 
 | 
          } 
 | 
          this.getDetails() 
 | 
        }) 
 | 
      }, 
 | 
      openFile (url) { 
 | 
        setTimeout(() => { 
 | 
          this.$refs.OperaPdfViewerWindow.open('方案确认书',url) 
 | 
          // window.open(url) 
 | 
        }, 500) 
 | 
      }, 
 | 
      getDetails () { 
 | 
        solutionsBaseId(this.form.id) 
 | 
          .then(res => { 
 | 
            for (const key in this.form) { 
 | 
              this.form[key] = res[key] 
 | 
            } 
 | 
            if (res.worktypeList) { 
 | 
              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 { 
 | 
  
 | 
                    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> 
 |