开发更新

jiangping

2025-06-06 a2299a6d4a6f99e9c11132138f5d3e9ec68f03ea

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

@@ -1,217 +1,255 @@
<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="form" 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" @change="changeContract" placeholder="请选择">
                <el-option v-for="(item, index) in contract" :key="index" :value="item.id" :label="item.code"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="付款方" prop="renterName">
                <el-input v-model="form.renterName" disabled placeholder="付款方" v-trim />
            </el-form-item>
            <el-form-item label="房源" prop="ywContractRoomList">
              <el-select v-model="form.ywContractRoomList" @click="clickHouse" multiple placeholder="请选择">
                <el-option
                  v-for="(item, index) in houseList"
                  :key="index"
                  :value="item.roomId"
                  :label="item.projectName + item.buildingName + item.floorName + item.roomName" />
              </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="date" v-if="form.feeType !== 1">
              <el-date-picker
                type="daterange"
                range-separator="至"
                v-model="form.date"
                @change="changeDate"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                placeholder="请选择" />
            </el-form-item>
            <el-form-item label="应收金额" prop="totleFee">
              <el-input v-model="form.totleFee" 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="请选择">
                <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="form.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>
    <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>
    </template>
    <!--  -->
    <MemberSearch ref="MemberSearchRef" />
      <el-table :data="form.multifileList" stripe>
        <el-table-column prop="originname" 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>
    </div>
  </GlobalWindow>
</template>

<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseOpera from '@/components/base/BaseOpera'
import MemberSearch from '@/components/common/MemberSearch'
import { rules } from './config'
import { create } from '@/api/bill'
import { list as listAll } from '@/api/contract'
import { companyList } from '@/api/company'
import { Message, Loading } from 'element-ui'
import { getContractRoom } from '@/api/house'
import { mapState } from 'vuex'
export default {
  components: {
    GlobalWindow,
    MemberSearch
    GlobalWindow
  },
  computed: {
    ...mapState(['userInfo'])
  },
  extends: BaseOpera,
  data() {
  data () {
    return {
      isShowModal: false,
      title: '',
      activeTabs: '0',
      param: {},
      form: {
        contractId: '',
        renterName: '',
        renterId: '',
        costType: '',
        type: '',
        companyId: '',
        remark: '',
        startDate: '',
        endDate: '',
        totleFee: '',
        feeType: 0,
        planPayDate: '',
        multifileList: [],
        ywContractRoomList: [],
        date: [],
        RoomName: ''
      },
      rules,
      timeTab: '0',

      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 },
      ],
      contract: [],
      payerList: [],
      comparyList: [],
      houseList: []
    }
  },
  created() {
    const { param } = this
    this.title = param.id ? '编辑收款账单' : '创建收款账单'
  },
  methods: {
    tabsClick(val) {
      this.activeTabs = val
    open (title, target) {
      this.title = title
      this.form.feeType = 0
      this.form.multifileList = []
      this.getListAll()
      this.getCompanyList()
      this.visible = true
      // 新建
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // 编辑
      this.$nextTick(() => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
      })
    },
    timeTabClick(val) {
      this.timeTab = val
    clickHouse () {
      if (!this.form.contractId) {
        return this.$message.warning('请先选择合同')
      }
    },
    getDetail() {

    changeContract (e) {
      this.form.renterName = this.contract.filter(item => {
        if (item.id === e) {
          this.form.companyId = item.companyId
          return item
        }
      })[0].renterName
      this.getHouseDate()
    },
    handleRent() {
      this.$refs.MemberSearchRef.openModal()
    getHouseDate () {
      getContractRoom({ contractId: this.form.contractId, type: 0 })
        .then(res => {
          this.houseList = res
        })
    },
    houseChange(e) {
      console.log(e)
      console.log(this.value)

    confirm () {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        this.isWorking = true
        let obj = JSON.parse(JSON.stringify(this.form))
        obj.ywContractRoomList = obj.ywContractRoomList.map(id => {
          return { roomId: id }
        })
        obj.billType = 0
        create(obj)
          .then(() => {
            this.visible = false
            this.$tip.apiSuccess('新建成功')
            this.$emit('success')
          })
          .finally(() => {
            this.isWorking = false
          })
      })
    },
    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
      // }
    dele (imgaddr) {
      this.form.multifileList.forEach((item, index) => {
        if (imgaddr === item.imgaddr) {
          this.form.multifileList.splice(index, 1)
        }
      })
    },
    openHouse () {
      this.$refs.selectHouse.open('选择房源', { contractId: this.form.contractId, type: 0 })
    },
    getCompanyList () {
      companyList({ type: 2, status: 0 })
        .then(res => {
          this.comparyList = res
        })
    },
    getListAll () {
      listAll({})
        .then(res => {
          console.log(res)
          this.contract = res
        })
    },
    timeTabClick (val) {
      this.form.feeType = val
      if (val === 1) {
        this.form.startDate = ''
        this.form.endDate = ''
        this.form.date = []
      }
    },
    changeDate (e) {
      if (!e || e.length === 0) {
        this.form.startDate = ''
        this.form.endDate = ''
      } else {
        this.form.startDate = e[0]
        this.form.endDate = e[1]
      }
    },
    beforeUpload (file) {
      this.loadingInstance = Loading.service({
        lock: true,
        text: 'Loading',
@@ -219,40 +257,33 @@
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    uploadError() {
    uploadError () {
      this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        if (this.loadingInstance) {
          this.loadingInstance.close()
        }
      })
    },
    uploadAvatarSuccess(file) {
      this.$nextTick(() => { // 以服务的方式调用的 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(() => {
        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
    close () {
      this.$emit('close')
    }
  }
@@ -290,7 +321,7 @@
      .tabs {
        display: flex;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;

        .tab {