| <template> | 
|   <GlobalWindow :title="param.id ? '编辑公司' : '新建公司'" :confirmWorking="subLoading" :visible.sync="isShowModal" | 
|     width="600px" @close="close" @confirm="handleSub"> | 
|     <div class="main"> | 
|       <div class="main_content"> | 
|         <el-form :model="param" ref="paramRef" :rules="rules"> | 
|           <div class="m_title">流水信息</div> | 
|           <div class="list"> | 
|             <el-form-item label="关联合同" prop="type"> | 
|               <el-select v-model="param.type" placeholder="请选择" clearable> | 
|                 <el-option v-for="item in types" :value="item.value" :label="item.name"></el-option> | 
|               </el-select> | 
|             </el-form-item> | 
|             <el-form-item label="费用类型" prop="code"> | 
|               <el-select v-model="param.type" placeholder="请选择" clearable> | 
|                 <el-option v-for="item in types" :value="item.value" :label="item.name"></el-option> | 
|               </el-select> | 
|             </el-form-item> | 
|             <el-form-item label="费用周期" prop="aaa"> | 
|               <el-date-picker type="daterange" v-model="param.getDate" value-format="yyyy-MM-dd" placeholder="请选择" /> | 
|             </el-form-item> | 
|             <el-form-item label="账单编号" prop=""> | 
|               <el-input type="text" v-model="param.content" placeholder="请输入" /> | 
|             </el-form-item> | 
|             <el-form-item label="应收金额" prop=""> | 
|               <el-input type="text" v-model="param.content" placeholder="请输入" /> | 
|             </el-form-item> | 
|             <el-form-item label="实收金额" prop=""> | 
|               <el-input type="text" v-model="param.content" placeholder="请输入" /> | 
|             </el-form-item> | 
|             <el-form-item label="所属公司" prop=""> | 
|               <el-select v-model="param.type" placeholder="请选择" clearable> | 
|                 <el-option v-for="item in types" :value="item.value" :label="item.name"></el-option> | 
|               </el-select> | 
|             </el-form-item> | 
|             <el-form-item label="收支账户" prop=""> | 
|               <el-select v-model="param.aaa" placeholder="请选择" clearable> | 
|                 <el-option :value="0" label="否"></el-option> | 
|                 <el-option :value="1" label="是"></el-option> | 
|               </el-select> | 
|             </el-form-item> | 
|             <el-form-item label="入账日期" prop=""> | 
|               <el-date-picker type="date" v-model="param.aaa" value-format="yyyy-MM-dd" placeholder="请选择" /> | 
|             </el-form-item> | 
|             <el-form-item label="备注" prop=""> | 
|               <el-input type="textarea" :rows="4" class="w400" v-model="param.content" placeholder="请输入" /> | 
|             </el-form-item> | 
|           </div> | 
|         </el-form> | 
|       </div> | 
|     </div> | 
|     <!--  --> | 
|     <div class="table_wrap"> | 
|       <div class="head"> | 
|         <div class="title">账单附件</div> | 
|         <el-button type="primary">添加附件</el-button> | 
|       </div> | 
|       <el-table :data="list" stripe> | 
|         <el-table-column prop="code" label="附件名称" min-width="100px"></el-table-column> | 
|         <el-table-column prop="pointName" label="操作人" min-width="100px"></el-table-column> | 
|         <el-table-column prop="name" label="操作时间" min-width="100px"></el-table-column> | 
|         <el-table-column prop="name" label="操作" min-width="100px"> | 
|           <template v-slot="scope"> | 
|             <span class="red cu" @click="handleDel(scope)">删除</span> | 
|           </template> | 
|         </el-table-column> | 
|       </el-table> | 
|     </div> | 
|   </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
| import GlobalWindow from '@/components/common/GlobalWindow' | 
| import UploadAvatarImage from '@/components/common/UploadAvatarImage' | 
| import { create, updateById } from '@/api/business/company' | 
| import { Message } from 'element-ui' | 
| export default { | 
|   components: { GlobalWindow, UploadAvatarImage }, | 
|   data() { | 
|     return { | 
|       isShowModal: false, | 
|       subLoading: false, | 
|       param: { | 
|         type: 2, | 
|         status: '0' | 
|       }, | 
|       cateList: [], | 
|       list: [], | 
|       rules: { | 
|         name: [{ required: true, message: '请输入' }], | 
|         desc: [{ required: true, message: '请输入' }] | 
|       }, | 
|       types: [] | 
|   | 
|     } | 
|   }, | 
|   created() { | 
|   }, | 
|   methods: { | 
|     handleSub() { | 
|       const { param, subLoading } = this | 
|       this.$refs['paramRef'].validate((valid) => { | 
|         if (valid) { | 
|           let fn = param.id ? updateById : create | 
|           this.subLoading = true | 
|           fn(param).then(res => { | 
|             this.subLoading = false | 
|             this.$emit('success') | 
|             Message.success('保存成功') | 
|             this.close() | 
|           }).catch(() => { | 
|             this.subLoading = false | 
|           }) | 
|         } | 
|       }) | 
|     }, | 
|     changeSel(e) { | 
|       if (e && e.length == 1) { | 
|         this.$set(this.param, 'catePId', e[0]) | 
|         this.$set(this.param, 'cateId', '') | 
|       } else if (e && e.length == 2) { | 
|         this.$set(this.param, 'catePId', e[0]) | 
|         this.$set(this.param, 'cateId', e[1]) | 
|       } else { | 
|         this.$set(this.param, 'catePId', '') | 
|         this.$set(this.param, 'cateId', '') | 
|       } | 
|       this.search() | 
|     }, | 
|     uploadAvatarSuccess(file) { | 
|       this.$set(this.param, 'imgurl', file.imgurl) | 
|       this.$set(this.param, 'imgurlfull', file.imgurlfull) | 
|     }, | 
|     handleDel(row) { | 
|       this.list.splice(row.$index, 1) | 
|   | 
|     }, | 
|     close() { | 
|       this.isShowModal = false | 
|       this.$emit('close') | 
|     } | 
|   } | 
| } | 
| </script> | 
|   | 
| <style lang="scss" scoped> | 
| .main { | 
|   display: flex; | 
|   margin-bottom: 20px; | 
|   padding-top: 20px; | 
|   | 
|   .main_content { | 
|     flex: 1; | 
|     margin-right: 20px; | 
|   | 
|     .m_title { | 
|       font-weight: 500; | 
|       margin-bottom: 12px; | 
|       margin-top: 10px; | 
|     } | 
|   | 
|     .list { | 
|       display: flex; | 
|       flex-wrap: wrap; | 
|   | 
|       .el-form-item { | 
|         width: 33.33%; | 
|         box-sizing: border-box; | 
|         padding: 0 12px; | 
|       } | 
|     } | 
|   } | 
|   | 
|   .main_house { | 
|     width: 420px; | 
|     padding: 24px 12px; | 
|     border: 1px solid #c3c6cd; | 
|     border-radius: 2px; | 
|   | 
|     .title { | 
|       font-size: 16px; | 
|       font-weight: 500; | 
|       margin-bottom: 30px; | 
|     } | 
|   } | 
|   | 
| } | 
|   | 
| .head { | 
|   display: flex; | 
|   align-items: center; | 
|   justify-content: space-between; | 
|   margin-bottom: 20px; | 
|   | 
|   div { | 
|     font-weight: 500; | 
|   } | 
| } | 
| .table_wrap{ | 
|   border: 1px solid #e2e2e2; | 
|   border-radius: 2px; | 
|   padding: 12px; | 
| } | 
| </style> |