财务

MrShi

2024-11-26 b2ea9a84701e62c84c6cd497ec9b5b66c85b8834

 admin/src/views/finance/components/bullEdit.vue

@@ -1,77 +1,106 @@
<template>
  <GlobalWindow width="1100px" :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">
    <template v-if="activeTabs == 0">
      <div class="main">
        <div class="main_content">
          <el-form :model="param" label-position="top" ref="paramRef" :rules="rules">
            <div class="head">
              <div class="m_title">基础信息</div>
              <div class="tabs">
                <div class="tab" :class="{ active: timeTab == 0 }" @click="timeTabClick('0')">周期费用</div>
                <div class="tab" :class="{ active: timeTab == 1 }" @click="timeTabClick('1')">一次性费用</div>
              </div>
    <div class="main">
      <div class="main_content">
        <el-form :model="param" label-position="top" ref="form" :rules="rules">
          <div class="head">
            <div class="m_title">基础信息</div>
            <div class="tabs">
              <div class="tab" :class="{ active: form.feeType === 0 }" @click="timeTabClick(0)">周期费用</div>
              <div class="tab" :class="{ active: form.feeType === 1 }" @click="timeTabClick(1)">一次性费用</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>
              <el-form-item label="付款方" prop="code">
                <el-input v-model="param.code" placeholder="请输入合同编号" v-trim />
              </el-form-item>
              <el-form-item label="费用类型" prop="aaa">
                <el-select v-model="param.aaa" 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="">
                <el-date-picker type="date" v-model="param.getDate" value-format="yyyy-MM-dd" placeholder="请选择" />
              </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>
              <el-form-item label="应收日期" prop="">
                <el-date-picker type="date" v-model="param.getDate" value-format="yyyy-MM-dd" placeholder="请选择" />
              </el-form-item>
              <el-form-item label="所属公司" prop="">
                <el-select v-model="param.aaa" placeholder="请选择" clearable>
                  <el-option v-for="item in comparyList" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="width: 100%;" label="账单备注" prop="">
                <el-input type="textarea" :rows="4" v-model="param.content" placeholder="请输入" />
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="main_house">
          <div class="title">请选择房源</div>
          <el-cascader style="width: 300px" v-model="value" @change="houseChange" :options="options"
            :props="{ multiple: true }" collapse-tags clearable />
        </div>
          </div>
          <div class="list">
            <el-form-item label="关联合同" prop="contractId">
              <el-select v-model="form.contractId" placeholder="请选择" clearable>
                <el-option v-for="(item, index) in contract" :key="index" :value="item.value" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="付款方" prop="customerName">
              <el-select v-model="form.customerName" filterable placeholder="请选择">
                <el-option
                  v-for="(item, index) in payerList"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="费用类型" prop="costType">
              <el-select v-model="form.costType" placeholder="请选择">
                <el-option :value="0" label="租赁费"></el-option>
                <el-option :value="1" label="物业费"></el-option>
                <el-option :value="2" label="租赁押金"></el-option>
                <el-option :value="3" label="物业证金"></el-option>
                <el-option :value="4" label="水电费"></el-option>
                <el-option :value="5" label="杂项费"></el-option>
                <el-option :value="6" label="其他"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="计费周期" prop="startDate" v-if="form.feeType !== 1">
              <el-date-picker
                type="daterange"
                range-separator="至"
                v-model="date"
                @change="changeDate"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                placeholder="请选择" />
            </el-form-item>
            <el-form-item label="应收金额" prop="receivableFee">
              <el-input v-model="form.receivableFee" placeholder="请输入应收金额" v-trim />
            </el-form-item>
            <el-form-item label="应收日期" prop="planPayDate">
              <el-date-picker type="date" v-model="form.planPayDate" value-format="yyyy-MM-dd" placeholder="请选择" />
            </el-form-item>
            <el-form-item label="所属公司" prop="companyId">
              <el-select v-model="form.companyId" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in comparyList"
                  :key="index"
                  :value="item.id"
                  :label="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item style="width: 100%;" label="账单备注" prop="remark">
              <el-input type="textarea" :rows="5" v-model="param.remark" placeholder="请输入" />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="file_wrap">
        <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">
            <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>
            </template>
          </el-table-column>
        </el-table>
      <div class="main_house">
        <div class="title">请选择房源</div>
        <el-tree
          :data="houseList"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]"
          :props="defaultProps">
        </el-tree>
      </div>
    </template>
    </div>
    <div class="file_wrap">
      <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">
          <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>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  -->
    <MemberSearch ref="MemberSearchRef" />
  </GlobalWindow>
@@ -82,6 +111,7 @@
import BaseOpera from '@/components/base/BaseOpera'
import MemberSearch from '@/components/common/MemberSearch'
import { rules } from './config'
import { create } from '@/api/bill'
import { Message, Loading } from 'element-ui'
export default {
  components: {
@@ -91,9 +121,21 @@
  extends: BaseOpera,
  data() {
    return {
      isShowModal: false,
      title: '',
      activeTabs: '0',
      form: {
        contractId: '',
        customerName: '',
        costType: '',
        type: '',
        companyId: '',
        remark: '',
        startDate: '',
        endDate: '',
        receivableFee: '',
        feeType: 0,
        planPayDate: ''
      },
      date: [],
      
      param: {},
      rules,
      timeTab: '0',
@@ -104,13 +146,9 @@
      uploadData: {
        folder: 'HIDDEN_DANGER_FILE'
      },

      types: [
        { name: '物业+租赁合同', value: 0 },
        { name: '租赁合同', value: 1 },
        { name: '物业合同', value: 2 },
      ],
      agentList: [], //经办人
      contract: [],
      payerList: [],
      
      projectList: [],
      comparyList: [], // 公司
      renterList: [], // 租客
@@ -183,35 +221,68 @@
        { name: '元/m²·年', value: 5 },
        { name: '元/场', value: 6 },
      ],
      houseList: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    const { param } = this
    this.title = param.id ? '编辑收款账单' : '创建收款账单'
  },
  methods: {
    tabsClick(val) {
      this.activeTabs = val
    },
    timeTabClick(val) {
      this.timeTab = val
      this.form.feeType = val
      if (val === 1) {
        this.form.startDate = ''
        this.form.endDate = ''
      }
    },
    getDetail() {

    changeDate(e) {
      if (!e || e.length === 0) {
        this.form.startDate = ''
        this.form.endDate = ''
      } else {
        this.form.startDate = e[0]
        this.form.endDate = e[1]
      }
    },
    handleRent() {
      this.$refs.MemberSearchRef.openModal()
    },
    houseChange(e) {
      console.log(e)
      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',