<template> 
 | 
    <GlobalWindow 
 | 
        :title="title" 
 | 
        width="60%" 
 | 
        :visible.sync="visible" 
 | 
        :confirm-working="isWorking" 
 | 
        @confirm="confirm" 
 | 
    > 
 | 
        <!--    退回申请    --> 
 | 
        <el-form v-if="visible1==true" :model="form" ref="form1" :rules="rules1" style="width: 100%;"> 
 | 
          <el-form-item label="填写退回说明:" prop="backCheckInfo"> 
 | 
            <el-input type="textarea" v-model="form.backCheckInfo" placeholder="请输入" v-trim/> 
 | 
          </el-form-item> 
 | 
        </el-form> 
 | 
        <el-form v-if="visible2==true" :model="form" ref="form2" :rules="rules2" style="width: 100%;"> 
 | 
          <el-form-item label="上传投保单:" prop="toubaodanFile"> 
 | 
            <UploadFile @remove="dele2" :uploadData="{ folder: 'apply',fileType:'.pdf' }" :fileList="form.fileList" @uploadSuccess="toubaoFileUploaded" /> 
 | 
          </el-form-item> 
 | 
<!--          <div v-for="(item,index) in this.model.applyList" :key="index">--> 
 | 
<!--            <el-form-item :label="(index+1)+'.被保险人('+item.companyName+'):'" prop="tbdMultifileList[index]">--> 
 | 
<!--              <UploadFile  @remove="deleIndex(0,index)"  :uploadData="{ folder: 'apply',fileType:'.pdf' }"  :fileIndex="index"  :showTips="showTips" :fileList="model.applyList[index].fileList" @uploadSuccess="toubaoFileUploaded2" />--> 
 | 
<!--            </el-form-item>--> 
 | 
<!--          </div>--> 
 | 
        </el-form> 
 | 
        <!--    上传保险单    --> 
 | 
      <el-form v-if="visible3==true" :model="form" ref="form3" :rules="rules3" style="width: 100%;"> 
 | 
        <el-form-item label="期望保险生效期:"> 
 | 
          <span >{{( form.startTime|| '-') +'  至  '+( form.endTime|| '-')}}</span> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="" > 
 | 
          <el-radio-group v-model="form.selectRadio" @change="selectChange"> 
 | 
            <el-radio :label="0" >与保单一致</el-radio> 
 | 
            <el-radio :label="1" >与保单不一致</el-radio> 
 | 
          </el-radio-group> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="保险生效起期:" prop="startTime" v-if="form.selectRadio === 1"> 
 | 
          <el-date-picker 
 | 
              v-model="form.startTime" 
 | 
              type="date" 
 | 
              value-format="yyyy-MM-dd HH:mm:ss" 
 | 
              placeholder="选择日期"> 
 | 
          </el-date-picker> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="保险生效止期:" prop="endTime" v-if="form.selectRadio === 1"> 
 | 
          <el-date-picker 
 | 
              v-model="form.endTime" 
 | 
              @change="changEndTime" 
 | 
              type="date" 
 | 
              value-format="yyyy-MM-dd HH:mm:ss" 
 | 
              placeholder="选择日期"> 
 | 
          </el-date-picker> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="保单号:" prop="code"> 
 | 
          <el-input v-model="form.code" placeholder="请输入" v-trim/> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="上传保险单:" prop="baoxianFile"> 
 | 
          <UploadFile @remove="dele3"  :uploadData="{ folder: 'apply',fileType:'.pdf' }" :fileList="form.fileList1" @uploadSuccess="baoxianFileUploaded" /> 
 | 
        </el-form-item> 
 | 
        <div class="box_table" v-if="false"> 
 | 
          <div class="box_table_head"> 
 | 
            <div class="box_table_head_item">序号</div> 
 | 
            <div class="box_table_head_item">被保险人</div> 
 | 
            <div  class="box_table_head_item">在保/投保人数</div> 
 | 
            <div class="box_table_head_item">操作</div> 
 | 
            <div class="box_table_head_item">服务费(当前保单)</div> 
 | 
          </div> 
 | 
          <div class="box_table_content" v-for="(item, index) in model.applyList" :key="index"> 
 | 
            <div class="box_table_content_item">{{index + 1}}</div> 
 | 
            <div class="box_table_content_item" >{{ item.companyName }}</div> 
 | 
            <div class="box_table_content_item">{{item.guaranteeNum}} / {{ item.insureNum }}</div> 
 | 
            <div class="box_table_content_item"> 
 | 
              <el-form-item label="" prop="bxdMultifileList[index]"> 
 | 
                <UploadFileLink   @remove="deleIndex(1,index)" :uploadData="{ folder: 'apply',fileType:'.pdf' }" :fileIndex="index" :showTips="showTips" :fileList="model.applyList[index].fileList1" @uploadSuccess="baoxianFileUploaded2" /> 
 | 
              </el-form-item> 
 | 
            </div> 
 | 
            <div class="box_table_content_item">  <el-input style="width: 60%" v-model="form.bxdMultifileList[index].serverMoney" placeholder="请输入"  ></el-input> 
 | 
              <span style="margin-left: 15px">元/人</span></div> 
 | 
          </div> 
 | 
        </div> 
 | 
<!--        <div v-for="(item,index) in this.model.applyList" :key="index"> 
 | 
          <el-form-item :label="item.companyName" prop="bxdMultifileList[index]"> 
 | 
            <UploadFile   :uploadData="{ folder: 'apply',fileType:'.pdf' }" :fileIndex="index" :showTips="showTips" :fileList="model.applyList[index].fileList1" @uploadSuccess="baoxianFileUploaded2" /> 
 | 
          </el-form-item> 
 | 
        </div>--> 
 | 
      </el-form> 
 | 
      <template v-slot:footer> 
 | 
        <el-button type="primary" @click="doSubmit">确 定</el-button> 
 | 
        <el-button @click="visible=false">取消</el-button> 
 | 
      </template> 
 | 
    </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseOpera from '@/components/base/BaseOpera' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
import { 
 | 
  cancel, 
 | 
  uploadBXD, 
 | 
  uploadToubaodan 
 | 
} from '@/api/business/unionApply' 
 | 
import UploadFile from '@/components/common/UploadFile' 
 | 
import UploadFileLink from '@/components/common/UploadFileLink' 
 | 
  
 | 
export default { 
 | 
  name: 'OperaUnionApplyCheckWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { UploadFile, GlobalWindow ,UploadFileLink}, 
 | 
  data () { 
 | 
    return { 
 | 
      // 表单数据 
 | 
      model: {}, 
 | 
      falg: 0, 
 | 
      showTips:false, 
 | 
      rules1: { 
 | 
        backCheckInfo: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ] 
 | 
      }, 
 | 
      rules2: { 
 | 
        toubaodanFile: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ] 
 | 
      }, 
 | 
      rules3: { 
 | 
        code: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ], 
 | 
        startTime: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ], 
 | 
        endTime: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ], 
 | 
        baoxianFile: [ 
 | 
          { required: true, message: '请完善信息' } 
 | 
        ] 
 | 
      }, 
 | 
      form: { 
 | 
        id: null, 
 | 
        backCheckInfo: '', 
 | 
        editCheckInfo: '', 
 | 
        startTime: null, 
 | 
        endTime: null, 
 | 
        code: null, 
 | 
        toubaodanFile: null, 
 | 
        baoxianFile: null, 
 | 
        tbdMultifileList: [], 
 | 
        bxdMultifileList: [], 
 | 
        fileList: [], 
 | 
        fileList1: [], 
 | 
        selectRadio: 0 
 | 
      }, 
 | 
      visible1: false, 
 | 
      visible2: false, 
 | 
      visible3: false 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      api: '/business/insuranceApply', 
 | 
      'field.id': 'id' 
 | 
    }) 
 | 
  }, 
 | 
  methods: { 
 | 
    changEndTime(){ 
 | 
      this.form.endTime=this.form.endTime.replace(" 00:00:00"," 23:59:59") 
 | 
    }, 
 | 
    dele2 () { 
 | 
      this.form.toubaodanFile= null 
 | 
    }, 
 | 
    deleIndex (flag,index) { 
 | 
      if(flag == 0){ 
 | 
        this.form.tbdMultifileList[index].fileurl = null 
 | 
        this.form.tbdMultifileList[index].name = null 
 | 
      }else  if(flag ==1){ 
 | 
        this.form.bxdMultifileList[index].fileUrl = null 
 | 
        this.form.bxdMultifileList[index].fileName = null 
 | 
      } 
 | 
    }, 
 | 
    dele3 () { 
 | 
      this.form.baoxianFile = null 
 | 
    }, 
 | 
    open (title, target, flag) { 
 | 
      this.visible = true 
 | 
      this.model = {} 
 | 
      this.form = { 
 | 
        id: null, 
 | 
        backCheckInfo: '', 
 | 
        dealBackInfo: '', 
 | 
        editCheckInfo: '', 
 | 
        editDate: '', 
 | 
        editCode: '', 
 | 
        startTime: null, 
 | 
        endTime: null, 
 | 
        code: null, 
 | 
        toubaodanFile: null, 
 | 
        baoxianFile: null, 
 | 
        editBaoxianFile: null, 
 | 
        tbdMultifileList:[], 
 | 
        bxdMultifileList:[], 
 | 
        fileList: [], 
 | 
        fileList1: [], 
 | 
        selectRadio: 0 
 | 
      } 
 | 
  
 | 
      this.model = target 
 | 
      console.log(target) 
 | 
      this.form.startTime = target.startTime 
 | 
      this.form.endTime = target.endTime 
 | 
      this.title = title 
 | 
      this.flag = flag 
 | 
      this.visible1 = false 
 | 
      this.visible2 = false 
 | 
      this.visible3 = false 
 | 
      this.form.tbdMultifileList=[] 
 | 
      this.form.bxdMultifileList=[] 
 | 
      if (flag == 1) { 
 | 
        this.visible1 = true 
 | 
      } 
 | 
      if (flag == 2) { 
 | 
        this.visible2 = true 
 | 
        if(this.model.applyList){ 
 | 
          this.model.applyList.forEach(item =>{ 
 | 
            item.fileList =[] 
 | 
            this.form.tbdMultifileList.push({objId:item.id,fileurl:null,name:null}) 
 | 
          }) 
 | 
        } 
 | 
      } 
 | 
      console.log(this.model.applyList) 
 | 
      if (flag == 3) { 
 | 
        this.visible3 = true 
 | 
        if(this.model.applyList){ 
 | 
          this.model.applyList.forEach(item =>{ 
 | 
            item.fileList1 =[] 
 | 
            this.form.bxdMultifileList.push({applyId:item.id,serverMoney:0,fileUrl:null,fileName:null}) 
 | 
          }) 
 | 
        } 
 | 
      } 
 | 
    }, 
 | 
    doSubmit () { 
 | 
      if (this.flag == 1) { 
 | 
        this.$refs.form1.validate((valid) => { 
 | 
          // debugger 
 | 
          if (!valid) { 
 | 
            return 
 | 
          } 
 | 
          this.backDo() 
 | 
        }) 
 | 
      } else if (this.flag == 2) { 
 | 
        this.$refs.form2.validate((valid) => { 
 | 
          // debugger 
 | 
          if (!valid) { 
 | 
            return 
 | 
          } 
 | 
          this.uploadToubaodan() 
 | 
        }) 
 | 
      } else if (this.flag == 3) { 
 | 
        this.$refs.form3.validate((valid) => { 
 | 
          // debugger 
 | 
          if (!valid) { 
 | 
            return 
 | 
          } 
 | 
          this.uploadBaoxiandan() 
 | 
        }) 
 | 
      } 
 | 
    }, 
 | 
    selectChange () { 
 | 
      if (this.form.selectRadio == 0) { 
 | 
        this.form.startTime = this.model.startTime 
 | 
        this.form.endTime = this.model.endTime 
 | 
      } else { 
 | 
        // this.form.startTime = '' 
 | 
        // this.form.endTime = '' 
 | 
      } 
 | 
    }, 
 | 
    toubaoFileUploaded (data) { 
 | 
      this.form.toubaodanFile = data 
 | 
    }, 
 | 
    toubaoFileUploaded2 (data) { 
 | 
      this.form.tbdMultifileList[data.index].fileurl = data.fileurl 
 | 
      this.form.tbdMultifileList[data.index].name = data.name 
 | 
    }, 
 | 
    baoxianFileUploaded (data) { 
 | 
      this.form.baoxianFile = data 
 | 
    }, 
 | 
    baoxianFileUploaded2 (data) { 
 | 
      this.form.bxdMultifileList[data.index].fileUrl = data.fileurl 
 | 
      this.form.bxdMultifileList[data.index].fileName = data.name 
 | 
    }, 
 | 
    backDo () { 
 | 
      this.$dialog.messageConfirm('您确认进行该操作吗?') 
 | 
        .then(() => { 
 | 
          this.isWorking = true 
 | 
          cancel({ id: this.model.id, reason: this.form.backCheckInfo }) 
 | 
            .then(response => { 
 | 
              this.visible = false 
 | 
              this.$emit('success') 
 | 
            }).catch(err => { 
 | 
              this.$tip.apiFailed(err) 
 | 
            }) 
 | 
        }) 
 | 
    }, 
 | 
    uploadToubaodan () { 
 | 
      this.$dialog.messageConfirm('提交后不可修改,请再次核对后确认提交!') 
 | 
        .then(() => { 
 | 
          this.isWorking = true 
 | 
          console.log(this.form.tbdMultifileList ) 
 | 
          uploadToubaodan({ businessId: this.model.id, fileurl: this.form.toubaodanFile.fileurl, name: this.form.toubaodanFile.name, multifileList: this.form.tbdMultifileList }) 
 | 
            .then(response => { 
 | 
              this.visible = false 
 | 
              this.$emit('success') 
 | 
            }).catch(err => { 
 | 
              this.$tip.apiFailed(err) 
 | 
            }) 
 | 
        }) 
 | 
    }, 
 | 
  
 | 
    uploadBaoxiandan () { 
 | 
      this.$dialog.messageConfirm('提交后不可修改,请再次核对后确认提交!') 
 | 
        .then(() => { 
 | 
          this.isWorking = true 
 | 
          var param ={ 
 | 
            id: this.model.id, 
 | 
            startTime: this.form.startTime, 
 | 
            endTime: this.form.endTime, 
 | 
            code: this.form.code, 
 | 
            fileUrl: this.form.baoxianFile.fileurl, 
 | 
            fileName: this.form.baoxianFile.name, 
 | 
            unionApplyBXDDDetailDTOList:this.form.bxdMultifileList 
 | 
          } 
 | 
          console.log(param) 
 | 
          uploadBXD(param) 
 | 
            .then(response => { 
 | 
              this.visible = false 
 | 
              this.$emit('success') 
 | 
            }).catch(err => { 
 | 
              this.$tip.apiFailed(err) 
 | 
            }) 
 | 
        }) 
 | 
    }, 
 | 
    handleRemove (file, fileList) { 
 | 
      console.log(file, fileList) 
 | 
    }, 
 | 
    handlePreview (file) { 
 | 
      console.log(file) 
 | 
    }, 
 | 
    handleExceed (files, fileList) { 
 | 
      this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`) 
 | 
    }, 
 | 
    beforeRemove (file, fileList) { 
 | 
      return this.$confirm(`确定移除 ${file.name}?`) 
 | 
    }, 
 | 
    successEvent () { 
 | 
  
 | 
    }, 
 | 
    handleSizeChange (val) { 
 | 
      console.log(`每页 ${val} 条`) 
 | 
    }, 
 | 
    handleCurrentChange (val) { 
 | 
      console.log(`当前页: ${val}`) 
 | 
    }, 
 | 
    handleClick (tab, event) { 
 | 
      console.log(tab, event) 
 | 
    }, 
 | 
    onSubmit () { 
 | 
  
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
<style> 
 | 
  
 | 
</style> 
 | 
<style lang="scss" scoped> 
 | 
    .form { 
 | 
        width: 100%; 
 | 
        display: flex; 
 | 
        align-items: center; 
 | 
        flex-direction: column; 
 | 
        .form_span { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            align-items: start; 
 | 
            flex-direction: column; 
 | 
            margin-bottom: 20px; 
 | 
            span { 
 | 
                font-size: 14px; 
 | 
                &:nth-child(1) { 
 | 
                    color: black; 
 | 
                    margin-bottom: 5px; 
 | 
                } 
 | 
                &:nth-child(2) { 
 | 
                    color: #8c939d; 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .form_item { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            margin-bottom: 20px; 
 | 
            &:last-child { 
 | 
                margin: 0 !important; 
 | 
            } 
 | 
            .form_item_label { 
 | 
                flex-shrink: 0; 
 | 
                /*width: 170px;*/ 
 | 
                color: black; 
 | 
                font-size: 14px; 
 | 
                span { 
 | 
                    color: red; 
 | 
                    font-size: 14px; 
 | 
                } 
 | 
            } 
 | 
            .form_item_val { 
 | 
                flex: 1; 
 | 
                /*height: 40px;*/ 
 | 
                margin-left: 20px; 
 | 
                textarea { 
 | 
                    width: 100%; 
 | 
                    height: 70px; 
 | 
                    border: 1px solid #cbcbcb; 
 | 
                    padding: 10px; 
 | 
                    outline: none; 
 | 
                    box-sizing: border-box; 
 | 
                } 
 | 
                input { 
 | 
                    width: 100%; 
 | 
                    height: 40px; 
 | 
                    outline: none; 
 | 
                    border-radius: 5px; 
 | 
                    border: 1px solid #cbcbcb; 
 | 
                    padding: 0 20px; 
 | 
                    box-sizing: border-box; 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
    .desc { 
 | 
        width: 100%; 
 | 
        .desc_item { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            flex-direction: column; 
 | 
            .desc_item_label { 
 | 
                width: 100%; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                justify-content: space-between; 
 | 
                margin-bottom: 10px; 
 | 
                span { 
 | 
                    font-size: 14px; 
 | 
                    color: black; 
 | 
                    margin-right: 30px; 
 | 
                } 
 | 
            } 
 | 
            .desc_item_from { 
 | 
                width: 100%; 
 | 
                margin-bottom: 10px; 
 | 
                .desc_item_from_page { 
 | 
                    width: 100%; 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: end; 
 | 
                    margin-top: 10px; 
 | 
                } 
 | 
            } 
 | 
            .desc_item_cate { 
 | 
                width: 100%; 
 | 
                margin-bottom: 10px; 
 | 
            } 
 | 
            .desc_item_search { 
 | 
                width: 100%; 
 | 
                margin-bottom: 20px; 
 | 
            } 
 | 
            .desc_item_review { 
 | 
                width: 100%; 
 | 
                .desc_item_review_label { 
 | 
                    font-size: 20px; 
 | 
                    color: black; 
 | 
                    font-weight: bold; 
 | 
                    margin-bottom: 15px; 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
    .box_table { 
 | 
      width: 100%; 
 | 
      border-top: 1px solid #b4bbc5; 
 | 
      border-left: 1px solid #b4bbc5; 
 | 
      box-sizing: border-box; 
 | 
      .box_table_head { 
 | 
        width: 100%; 
 | 
        display: flex; 
 | 
        align-items: center; 
 | 
        .box_table_head_item1 { 
 | 
          flex: 1; 
 | 
          height: 50px; 
 | 
          background: #f2f2f2; 
 | 
          display: flex; 
 | 
          align-items: center; 
 | 
          justify-content: center; 
 | 
          font-size: 14px; 
 | 
          color: black; 
 | 
          border-right: 1px solid #b4bbc5; 
 | 
          border-bottom: 1px solid #b4bbc5; 
 | 
          box-sizing: border-box; 
 | 
        } 
 | 
        .box_table_head_item { 
 | 
          flex: 1; 
 | 
          height: 50px; 
 | 
          background: #f2f2f2; 
 | 
          display: flex; 
 | 
          align-items: center; 
 | 
          justify-content: center; 
 | 
          font-size: 14px; 
 | 
          color: black; 
 | 
          border-right: 1px solid #b4bbc5; 
 | 
          border-bottom: 1px solid #b4bbc5; 
 | 
          box-sizing: border-box; 
 | 
          &:nth-child(1) { 
 | 
            flex: 0.5;; 
 | 
          } 
 | 
          &:nth-child(2) { 
 | 
             flex:1.5; 
 | 
           } 
 | 
          &:nth-child(4) { 
 | 
             flex:1.5; 
 | 
           } 
 | 
          &:nth-child(5) { 
 | 
            flex: 1.5;; 
 | 
          } 
 | 
        } 
 | 
        .box_table_head_item5 { 
 | 
          flex: 1; 
 | 
          height: 50px; 
 | 
          background: #f2f2f2; 
 | 
          display: flex; 
 | 
          align-items: center; 
 | 
          justify-content: center; 
 | 
          font-size: 14px; 
 | 
          color: black; 
 | 
          border-right: 1px solid #b4bbc5; 
 | 
          border-bottom: 1px solid #b4bbc5; 
 | 
          box-sizing: border-box; 
 | 
          &:nth-child(2) { 
 | 
            flex: 5; 
 | 
          } 
 | 
        } 
 | 
        .box_form_item { 
 | 
          flex: 1; 
 | 
          height: 50px; 
 | 
          background: #ffffff; 
 | 
          display: flex; 
 | 
          align-items: center; 
 | 
          justify-content: center; 
 | 
          font-size: 14px; 
 | 
          color: black; 
 | 
          border-right: 1px solid #b4bbc5; 
 | 
          border-bottom: 1px solid #b4bbc5; 
 | 
          box-sizing: border-box; 
 | 
          &:nth-child(1) { 
 | 
            //flex: 0.5; 
 | 
          } 
 | 
        } 
 | 
      } 
 | 
      .box_table_content { 
 | 
        width: 100%; 
 | 
        display: flex; 
 | 
        align-items: center; 
 | 
        .box_table_content_header{ 
 | 
          border-bottom: 0px solid #b4bbc5 !important; 
 | 
        } 
 | 
        .box_table_content_item { 
 | 
          //white-space: nowrap; 
 | 
          overflow: hidden; 
 | 
          //text-overflow: ellipsis; 
 | 
          flex: 1; 
 | 
          height: 50px; 
 | 
          padding: 10px; 
 | 
          background: #ffffff; 
 | 
          display: flex; 
 | 
          align-items: center; 
 | 
          justify-content: center; 
 | 
          font-size: 14px; 
 | 
          color: black; 
 | 
          border-right: 1px solid #b4bbc5; 
 | 
          border-bottom: 1px solid #b4bbc5; 
 | 
          box-sizing: border-box; 
 | 
          &:nth-child(1) { 
 | 
            flex: 0.5;; 
 | 
          } 
 | 
          &:nth-child(2) { 
 | 
            flex:1.5; 
 | 
          } 
 | 
          &:nth-child(4) { 
 | 
            flex: 1.5; 
 | 
          } 
 | 
          &:nth-child(5) { 
 | 
            flex: 1.5; 
 | 
          } 
 | 
          span{ 
 | 
            width: 100%; 
 | 
            white-space: nowrap; 
 | 
            word-wrap: break-word; 
 | 
            text-overflow: ellipsis; 
 | 
            overflow: hidden; 
 | 
          } 
 | 
        } 
 | 
      } 
 | 
    } 
 | 
</style> 
 |