|  |  |  | 
|---|
|  |  |  | <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; | 
|---|