|  |  | 
 |  |  | <template> | 
 |  |  |   <GlobalWindow width="1000px" :title="title" :visible.sync="showModal" :confirm-working="isWorking" @close="close" @confirm="confirm"> | 
 |  |  |   <GlobalWindow width="1000px" :title="title" :visible.sync="showModal" :confirm-working="isWorking" @close="close" | 
 |  |  |     @confirm="confirm"> | 
 |  |  |     <div class="tabs"> | 
 |  |  |       <div class="tab" :class="{ active: activeTabs == 0 }" @click="tabsClick(0)">1、基本信息</div> | 
 |  |  |       <div class="tab" :class="{ active: activeTabs == 1 }" @click="tabsClick(1)">2、费用条款</div> | 
 |  |  | 
 |  |  |       <div class="file_wrap"> | 
 |  |  |         <div class="head"> | 
 |  |  |           <div>合同附件</div> | 
 |  |  |           <el-button icon="el-icon-plus" plain>添加附件</el-button> | 
 |  |  |           <el-upload class="upload-demo" :show-file-list="false" :data="uploadData" :action="uploadImgUrl" | 
 |  |  |             :on-success="uploadAvatarSuccess" :before-upload="beforeUpload" :on-error="uploadError"> | 
 |  |  |             <el-button icon="el-icon-plus" plain>添加附件</el-button> | 
 |  |  |           </el-upload> | 
 |  |  |         </div> | 
 |  |  |         <el-table :data="param.list" stripe> | 
 |  |  |           <el-table-column prop="" label="附件名称" align="center" min-width="100" show-overflow-tooltip /> | 
 |  |  | 
 |  |  |       <el-button style="width: 100%;height: 48px;" type="primary" plain>生成账单明细</el-button> | 
 |  |  |       <el-table :data="paramCost.list" class="mt20" stripe> | 
 |  |  |         <el-table-column prop="" label="费用类型" align="center" width="160px" show-overflow-tooltip /> | 
 |  |  |         <el-table-column prop="" label="指数"align="center" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column prop="" label="指数" align="center" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column prop="" label="区间" align="center" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column prop="" label="付款日" align="center" min-width="100" show-overflow-tooltip /> | 
 |  |  |         <el-table-column prop="" label="应收" align="center" min-width="100" show-overflow-tooltip /> | 
 |  |  | 
 |  |  | import BaseOpera from '@/components/base/BaseOpera' | 
 |  |  | import MemberSearch from '@/components/common/MemberSearch' | 
 |  |  | import { rules } from './config' | 
 |  |  | import { Message, Loading } from 'element-ui' | 
 |  |  | export default { | 
 |  |  |   components: { | 
 |  |  |     GlobalWindow, | 
 |  |  | 
 |  |  |       activeTabs: '0', | 
 |  |  |       param: {}, | 
 |  |  |       rules, | 
 |  |  |  | 
 |  |  |       loadingInstance: null, | 
 |  |  |       uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch', | 
 |  |  |       fileList: [], | 
 |  |  |       uploadData: { | 
 |  |  |         folder: 'HIDDEN_DANGER_FILE' | 
 |  |  |       }, | 
 |  |  |  | 
 |  |  |       types: [ | 
 |  |  |         { name: '物业+租赁合同', value: 0 }, | 
 |  |  | 
 |  |  |       console.log(this.value) | 
 |  |  |  | 
 |  |  |     }, | 
 |  |  |     beforeUpload(file) { | 
 |  |  |       // if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'image/jpeg', 'image/jpg', 'image/png', 'image/gif'].indexOf(file.type) == -1) { | 
 |  |  |       //   this.$message.error('请上传正确的视频/图片格式') | 
 |  |  |       //   return false | 
 |  |  |       // } | 
 |  |  |       this.loadingInstance = Loading.service({ | 
 |  |  |         lock: true, | 
 |  |  |         text: 'Loading', | 
 |  |  |         spinner: 'el-icon-loading', | 
 |  |  |         background: 'rgba(0, 0, 0, 0.7)' | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     uploadError() { | 
 |  |  |       this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭 | 
 |  |  |         if (this.loadingInstance) { | 
 |  |  |           this.loadingInstance.close() | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     uploadAvatarSuccess(file) { | 
 |  |  |       this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭 | 
 |  |  |         if (this.loadingInstance) { | 
 |  |  |           this.loadingInstance.close() | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |       console.log('file', file) | 
 |  |  |       const item = file.data[0] | 
 |  |  |       if (['.mp4', '.avi', '.flv', '.wmv'].some(char => item.imgaddr.includes(char))) { | 
 |  |  |         this.fileList.push({ | 
 |  |  |           type: 1, | 
 |  |  |           fileurl: item.imgaddr, | 
 |  |  |           fileurlFull: item.url | 
 |  |  |         }) | 
 |  |  |       } else { | 
 |  |  |         this.fileList.push({ | 
 |  |  |           type: 0, | 
 |  |  |           fileurl: item.imgaddr, | 
 |  |  |           fileurlFull: item.url | 
 |  |  |         }) | 
 |  |  |       } | 
 |  |  |       console.log('file', this.fileList) | 
 |  |  |       // this.$set(this.param, 'faceImg', file.imgurl) | 
 |  |  |       // this.$set(this.param, 'faceImgUrl', file.imgurlfull) | 
 |  |  |     }, | 
 |  |  |     close() { | 
 |  |  |       this.showModal = false | 
 |  |  |       this.$emit('close') | 
 |  |  | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .main_house { | 
 |  |  |     width: 420px; | 
 |  |  |     width: 320px; | 
 |  |  |     padding: 24px 12px; | 
 |  |  |     border: 1px solid #c3c6cd; | 
 |  |  |     border-radius: 2px; | 
 |  |  | 
 |  |  |   } | 
 |  |  |  | 
 |  |  | } | 
 |  |  | .total{ | 
 |  |  |  | 
 |  |  | .total { | 
 |  |  |   display: flex; | 
 |  |  |   justify-content: space-between; | 
 |  |  |   align-items: center; | 
 |  |  |   height: 32px; | 
 |  |  |   background-color: #e7e9f5; | 
 |  |  |   span{ | 
 |  |  |  | 
 |  |  |   span { | 
 |  |  |     width: 160px; | 
 |  |  |     text-align: center; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .file_wrap { | 
 |  |  |   padding: 20px 16px; | 
 |  |  |   border: 1px solid #c3c6cd; |