|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <GlobalWindow width="100%" :title="title" :visible.sync="isShowModal" :confirm-working="isWorking" @close="close" | 
|---|
|  |  |  | <GlobalWindow width="100%" :title="title" :visible.sync="visible" :confirm-working="isWorking" @close="close" | 
|---|
|  |  |  | @confirm="confirm"> | 
|---|
|  |  |  | <div class="main"> | 
|---|
|  |  |  | <div class="main_content"> | 
|---|
|  |  |  | <el-form :model="param" label-position="top" ref="paramRef" :rules="rules"> | 
|---|
|  |  |  | <el-form :model="form" label-position="top" ref="form" :rules="rules"> | 
|---|
|  |  |  | <div class="head"> | 
|---|
|  |  |  | <div class="m_title">流水信息</div> | 
|---|
|  |  |  | </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 label="关联合同" required> | 
|---|
|  |  |  | <el-input v-model="form.contractCode" disabled placeholder="请输入" v-trim /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="费用类型" prop="code"> | 
|---|
|  |  |  | <el-input v-model="param.code" placeholder="请输入合同编号" v-trim /> | 
|---|
|  |  |  | <el-form-item label="费用类型" required> | 
|---|
|  |  |  | <el-input v-model="form.costTypeName" disabled placeholder="请输入" v-trim /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="费单周期" prop="aaa"> | 
|---|
|  |  |  | <el-select v-model="param.code" placeholder="请选择" clearable> | 
|---|
|  |  |  | <el-option v-for="item in agentList" :value="item.id" :label="item.name"></el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | <el-form-item label="计费周期" required> | 
|---|
|  |  |  | <el-input v-model="form.date" disabled placeholder="请输入" v-trim /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="应收金额" prop=""> | 
|---|
|  |  |  | <el-input v-model="param.code" placeholder="请输入实收金额" v-trim /> | 
|---|
|  |  |  | <el-form-item label="应收金额" required> | 
|---|
|  |  |  | <el-input v-model="form.receivableFee" disabled placeholder="请输入" v-trim /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="实收金额" prop=""> | 
|---|
|  |  |  | <el-input v-model="param.code" placeholder="请输入实收金额" v-trim /> | 
|---|
|  |  |  | <el-form-item label="实收金额" prop="actReceivableFee"> | 
|---|
|  |  |  | <el-input v-model="form.actReceivableFee" placeholder="请输入" v-trim /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="入账日期" prop=""> | 
|---|
|  |  |  | <el-date-picker type="date" v-model="param.getDate" value-format="yyyy-MM-dd" placeholder="请选择" /> | 
|---|
|  |  |  | <el-form-item label="入账日期" prop="actPayDate"> | 
|---|
|  |  |  | <el-date-picker type="date" v-model="form.actPayDate" value-format="yyyy-MM-dd" placeholder="请选择" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="收款方式" prop=""> | 
|---|
|  |  |  | <el-select v-model="param.content" placeholder="请选择"> | 
|---|
|  |  |  | <el-form-item label="收款方式" prop="payType"> | 
|---|
|  |  |  | <el-select v-model="form.payType" placeholder="请选择"> | 
|---|
|  |  |  | <el-option label="现金" :value="1"></el-option> | 
|---|
|  |  |  | <el-option label="网银转账" :value="2"></el-option> | 
|---|
|  |  |  | <el-option label="POS机" :value="3"></el-option> | 
|---|
|  |  |  | 
|---|
|  |  |  | <el-option label="其它方式" :value="7"></el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="所属公司" prop=""> | 
|---|
|  |  |  | <el-select v-model="param.code" placeholder="请选择" clearable> | 
|---|
|  |  |  | <el-option v-for="item in agentList" :value="item.id" :label="item.name"></el-option> | 
|---|
|  |  |  | <el-form-item label="所属公司" prop="companyName"> | 
|---|
|  |  |  | <el-input disabled v-model="form.companyName" placeholder="请输入" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="收支账户" prop="accountId"> | 
|---|
|  |  |  | <el-select v-model="form.accountId" placeholder="请选择" clearable> | 
|---|
|  |  |  | <el-option v-for="item in agentList" :value="item.id" :label="item.title"></el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="收支账户" prop=""> | 
|---|
|  |  |  | <el-select v-model="param.code" placeholder="请选择" clearable> | 
|---|
|  |  |  | <el-option v-for="item in agentList" :value="item.id" :label="item.name"></el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="备注" prop="" style="width: 100%;"> | 
|---|
|  |  |  | <el-input type="textarea" :rows="6" v-model="param.content" placeholder="请输入" /> | 
|---|
|  |  |  | <el-form-item label="备注" prop="remark" style="width: 100%;"> | 
|---|
|  |  |  | <el-input type="textarea" :rows="6" v-model="form.remark" placeholder="请输入" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="head"> | 
|---|
|  |  |  | <div>账单附件</div> | 
|---|
|  |  |  | <el-upload class="upload-demo" :show-file-list="false" :data="uploadData" :action="uploadImgUrl" | 
|---|
|  |  |  | :on-success="uploadAvatarSuccess" :before-upload="beforeUpload" :on-error="uploadError"> | 
|---|
|  |  |  | :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-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"> | 
|---|
|  |  |  | <template v-slot="scope"> | 
|---|
|  |  |  | <span class="cu red">删除</span> | 
|---|
|  |  |  | <el-table :data="form.multifileList" stripe> | 
|---|
|  |  |  | <el-table-column prop="name" label="附件名称" align="center" min-width="100" show-overflow-tooltip /> | 
|---|
|  |  |  | <el-table-column prop="userName" label="操作人" align="center" min-width="100" show-overflow-tooltip /> | 
|---|
|  |  |  | <el-table-column prop="createTime" label="操作时间" align="center" min-width="100" show-overflow-tooltip /> | 
|---|
|  |  |  | <el-table-column label="操作" align="center" min-width="100"> | 
|---|
|  |  |  | <template slot-scope="{ row }"> | 
|---|
|  |  |  | <span class="cu red" @click="dele(row.imgaddr)">删除</span> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | </el-table> | 
|---|
|  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | import GlobalWindow from '@/components/common/GlobalWindow' | 
|---|
|  |  |  | import BaseOpera from '@/components/base/BaseOpera' | 
|---|
|  |  |  | import { rules } from './config' | 
|---|
|  |  |  | import { ywAccountList } from '@/api/bill' | 
|---|
|  |  |  | import { create } from '@/api/ywContractRevenue' | 
|---|
|  |  |  | import { Message, Loading } from 'element-ui' | 
|---|
|  |  |  | import { mapState } from 'vuex' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: "flowingWater", | 
|---|
|  |  |  | components: { | 
|---|
|  |  |  | GlobalWindow | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | computed: { | 
|---|
|  |  |  | ...mapState(['userInfo']) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | extends: BaseOpera, | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | isShowModal: false, | 
|---|
|  |  |  | title: '', | 
|---|
|  |  |  | activeTabs: '0', | 
|---|
|  |  |  | param: {}, | 
|---|
|  |  |  | rules, | 
|---|
|  |  |  | timeTab: '0', | 
|---|
|  |  |  |  | 
|---|
|  |  |  | form: { | 
|---|
|  |  |  | billId: '', | 
|---|
|  |  |  | billType: '', | 
|---|
|  |  |  | costType: '', | 
|---|
|  |  |  | contractCode: '', | 
|---|
|  |  |  | contractId: '', | 
|---|
|  |  |  | startDate: '', | 
|---|
|  |  |  | endDate: '', | 
|---|
|  |  |  | receivableFee: '', | 
|---|
|  |  |  | date: '', | 
|---|
|  |  |  | companyId: '', | 
|---|
|  |  |  | actReceivableFee: '', | 
|---|
|  |  |  | actPayDate: '', | 
|---|
|  |  |  | payType: '', | 
|---|
|  |  |  | companyName: '', | 
|---|
|  |  |  | remark: '', | 
|---|
|  |  |  | accountId: '', | 
|---|
|  |  |  | multifileList: [], | 
|---|
|  |  |  | costTypeName: '' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | rules: { | 
|---|
|  |  |  | receivableFee: [ | 
|---|
|  |  |  | { required: true, message: '请输入', trigger: 'blur' } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | actPayDate: [ | 
|---|
|  |  |  | { required: true, message: '请选择', trigger: 'blur' } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | payType: [ | 
|---|
|  |  |  | { required: true, message: '请选择', trigger: 'blur' } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | accountId: [ | 
|---|
|  |  |  | { required: true, message: '请选择', trigger: 'blur' } | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | loadingInstance: null, | 
|---|
|  |  |  | uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch', | 
|---|
|  |  |  | fileList: [], | 
|---|
|  |  |  | uploadData: { | 
|---|
|  |  |  | folder: 'HIDDEN_DANGER_FILE' | 
|---|
|  |  |  | folder: 'YW_CONTRACT_BILL' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | types: [ | 
|---|
|  |  |  | { name: '物业+租赁合同', value: 0 }, | 
|---|
|  |  |  | { name: '租赁合同', value: 1 }, | 
|---|
|  |  |  | { name: '物业合同', value: 2 }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | agentList: [], //经办人 | 
|---|
|  |  |  | projectList: [], | 
|---|
|  |  |  | comparyList: [], // 公司 | 
|---|
|  |  |  | renterList: [], // 租客 | 
|---|
|  |  |  | contacts: [], // 联系人 | 
|---|
|  |  |  | value: [], | 
|---|
|  |  |  | options: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | value: 1, | 
|---|
|  |  |  | label: '东南', | 
|---|
|  |  |  | children: [{ | 
|---|
|  |  |  | value: 2, | 
|---|
|  |  |  | label: '上海', | 
|---|
|  |  |  | children: [ | 
|---|
|  |  |  | { value: 3, label: '普陀' }, | 
|---|
|  |  |  | { value: 4, label: '黄埔' }, | 
|---|
|  |  |  | { value: 5, label: '徐汇' } | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | }, { | 
|---|
|  |  |  | value: 7, | 
|---|
|  |  |  | label: '江苏', | 
|---|
|  |  |  | children: [ | 
|---|
|  |  |  | { value: 8, label: '南京' }, | 
|---|
|  |  |  | { value: 9, label: '苏州' }, | 
|---|
|  |  |  | { value: 10, label: '无锡' } | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | }, { | 
|---|
|  |  |  | value: 12, | 
|---|
|  |  |  | label: '浙江', | 
|---|
|  |  |  | children: [ | 
|---|
|  |  |  | { value: 13, label: '杭州' }, | 
|---|
|  |  |  | { value: 14, label: '宁波' }, | 
|---|
|  |  |  | { value: 15, label: '嘉兴' } | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | }] | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | value: 17, | 
|---|
|  |  |  | label: '西北', | 
|---|
|  |  |  | children: [{ | 
|---|
|  |  |  | value: 18, | 
|---|
|  |  |  | label: '陕西', | 
|---|
|  |  |  | children: [ | 
|---|
|  |  |  | { value: 19, label: '西安' }, | 
|---|
|  |  |  | { value: 20, label: '延安' } | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | }, { | 
|---|
|  |  |  | value: 21, | 
|---|
|  |  |  | label: '新疆维吾尔族自治区', | 
|---|
|  |  |  | children: [ | 
|---|
|  |  |  | { value: 22, label: '乌鲁木齐' }, | 
|---|
|  |  |  | { value: 23, label: '克拉玛依' } | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | }] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | cactiveTabs: 0, | 
|---|
|  |  |  | paramCost: {}, | 
|---|
|  |  |  | payMethods: [ | 
|---|
|  |  |  | { name: '一次性付款', value: 0 }, | 
|---|
|  |  |  | { name: '3个月一付', value: 1 }, | 
|---|
|  |  |  | { name: '6个月一付', value: 2 }, | 
|---|
|  |  |  | { name: '1年一付', value: 2 }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | unitOps: [ | 
|---|
|  |  |  | { name: '元/m²·天', value: 0 }, | 
|---|
|  |  |  | { name: '元/m²·月', value: 1 }, | 
|---|
|  |  |  | { name: '元/天', value: 2 }, | 
|---|
|  |  |  | { name: '元/月', value: 3 }, | 
|---|
|  |  |  | { name: '元/年', value: 4 }, | 
|---|
|  |  |  | { name: '元/m²·年', value: 5 }, | 
|---|
|  |  |  | { name: '元/场', value: 6 }, | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | agentList: [] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created() { | 
|---|
|  |  |  | const { param } = this | 
|---|
|  |  |  | this.title = param.id ? '编辑收款账单' : '创建收款账单' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | tabsClick(val) { | 
|---|
|  |  |  | this.activeTabs = val | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | timeTabClick(val) { | 
|---|
|  |  |  | this.timeTab = val | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getDetail() { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | confirm () { | 
|---|
|  |  |  | this.$refs.form.validate((valid) => { | 
|---|
|  |  |  | if (!valid) return | 
|---|
|  |  |  | this.isWorking = true | 
|---|
|  |  |  | create(this.form) | 
|---|
|  |  |  | .then(() => { | 
|---|
|  |  |  | this.visible = false | 
|---|
|  |  |  | this.$tip.apiSuccess('创建成功') | 
|---|
|  |  |  | this.$emit('success') | 
|---|
|  |  |  | this.$emit('refresh') | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .finally(() => { | 
|---|
|  |  |  | this.isWorking = false | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleRent() { | 
|---|
|  |  |  | this.$refs.MemberSearchRef.openModal() | 
|---|
|  |  |  | 
|---|
|  |  |  | houseChange(e) { | 
|---|
|  |  |  | console.log(e) | 
|---|
|  |  |  | console.log(this.value) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getDates (companyId) { | 
|---|
|  |  |  | ywAccountList({ | 
|---|
|  |  |  | companyId, | 
|---|
|  |  |  | isdeleted: 0, | 
|---|
|  |  |  | status: 0 | 
|---|
|  |  |  | }).then(res => { | 
|---|
|  |  |  | this.agentList = res | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | dele (imgaddr) { | 
|---|
|  |  |  | this.form.multifileList.forEach((item, index) => { | 
|---|
|  |  |  | if (imgaddr === item.imgaddr) { | 
|---|
|  |  |  | this.form.multifileList.splice(index, 1) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 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', | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getDay () { | 
|---|
|  |  |  | const now = new Date() | 
|---|
|  |  |  | const year = now.getFullYear() | 
|---|
|  |  |  | const month = now.getMonth() + 1 // 加1使其从1开始 | 
|---|
|  |  |  | const day = now.getDate() | 
|---|
|  |  |  | const hours = now.getHours() | 
|---|
|  |  |  | const minutes = now.getMinutes() | 
|---|
|  |  |  | const seconds = now.getSeconds() | 
|---|
|  |  |  | return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 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) | 
|---|
|  |  |  | this.form.multifileList.push({ ...item, fileurl: item.imgaddr, name: item.originname, userName: this.userInfo.realname, createTime: this.getDay() }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | close() { | 
|---|
|  |  |  | this.isShowModal = false | 
|---|
|  |  |  | this.$emit('close') | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | open(title, target) { | 
|---|
|  |  |  | this.title = title | 
|---|
|  |  |  | this.isShowModal = true | 
|---|
|  |  |  | this.visible = true | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.$refs.form.resetFields(); | 
|---|
|  |  |  | for (const key in this.form) { | 
|---|
|  |  |  | this.form[key] = target[key] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.getDates(target.companyId) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|