财务

MrShi

2024-11-26 b2ea9a84701e62c84c6cd497ec9b5b66c85b8834

财务

 admin/.env.test

@@ -2,3 +2,5 @@
NODE_ENV = 'production'

# VUE_APP_API_URL  = 'http://192.168.5.13/gateway_interface'

VUE_APP_API_URL  = 'http://192.168.0.162:10010/'

 admin/package-lock.json

@@ -1876,6 +1876,63 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "ssri": {
          "version": "8.0.1",
          "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1617826515595&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -1883,6 +1940,28 @@
          "dev": true,
          "requires": {
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.8.3",
          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -13904,87 +13983,6 @@
          "resolved": "https://registry.npm.taobao.org/hash-sum/download/hash-sum-1.0.2.tgz",
          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
          "dev": true
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.8.3",
      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },

 admin/src/api/bill.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
import request from '@/utils/request'

// æŸ¥è¯¢
export function fetchList (data) {
  return request.post('/visitsAdmin/cloudService/business/ywContractBill/page', data, {
    trim: true
  })
}

// åˆ›å»º
export function create (data) {
  return request.post('/visitsAdmin/cloudService/business/ywContractBill/create', data)
}

 admin/src/views/finance/bull.vue

@@ -7,9 +7,9 @@
        <div class="tab" :class="{ active: activeTabs == 1 }" @click="tabsClick(1)">付款账单</div>
      </div>
      <div class="btns">
        <el-button type="primary" @click="handleEdit()" icon="el-icon-plus"
        <el-button type="primary" @click="$refs.EditRef.open('创建收款账单')" icon="el-icon-plus"
          v-permissions="['business:ywpatrolline:create']">新建</el-button>
        <el-button @click="handleEx" v-permissions="['business:ywpatrolline:create']">导出</el-button>
        <el-button @click="handleDetail" v-permissions="['business:ywpatrolline:create']">导出</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="list" stripe>
@@ -20,19 +20,25 @@
      <el-table-column prop="remark" label="结清状态" min-width="100" show-overflow-tooltip />
      <el-table-column prop="createTime" label="账单金额" min-width="100" show-overflow-tooltip />
      <el-table-column prop="createTime" label="应收金额" min-width="100" show-overflow-tooltip />
      <el-table-column prop="createTime" label="合同状态" min-width="100" show-overflow-tooltip />
      <el-table-column prop="createTime" label="实收金额" min-width="100" show-overflow-tooltip />
      <el-table-column prop="createTime" label="需收金额" min-width="100" show-overflow-tooltip />
      <el-table-column prop="createTime" label="费用类型" min-width="100" show-overflow-tooltip />
      <el-table-column prop="createTime" label="是否逾期" min-width="100" show-overflow-tooltip />
      <el-table-column prop="createTime" label="计费周期" min-width="100" show-overflow-tooltip />
      <el-table-column prop="createTime" label="应收日期" min-width="100" show-overflow-tooltip />
      <el-table-column prop="createTime" label="账单来源" min-width="100" show-overflow-tooltip />
      <el-table-column prop="statusName" label="合同状态" min-width="100" fixed="right" show-overflow-tooltip />
      <el-table-column label="操作" min-width="120" fixed="right">
        <template slot-scope="{row}">
          <el-button type="text" @click="handleDetail(row)" icon="el-icon-edit"
            v-permissions="['business:category:update']">查看详情</el-button>
          <el-button type="text" @click="handleDetail(row)" icon="el-icon-edit" v-permissions="['business:category:update']">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt20">
      <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" />
    </div>
    <Edit v-if="showEdit" ref="EditRef" @success="getList" @close="showEdit = false" />
    <Detail ref="DetailRef" @success="getList" @close="showEdit = false" />
    <Edit ref="EditRef" @success="getList" />
    <Detail ref="DetailRef" @success="getList" />
  </div>
</template>

@@ -41,7 +47,7 @@
import QueryForm from '@/components/common/QueryForm'
import Edit from './components/bullEdit.vue'
import Detail from './components/bullDetail.vue'
import { fetchList, deleteById } from '@/api/Inspection/device'
import { fetchList } from '@/api/bill'
export default {
  components: {
    Pagination,
@@ -52,7 +58,6 @@
  data() {
    return {
      loading: false,
      showEdit: false,
      pagination: {
        pageSize: 10,
        page: 1,
@@ -105,57 +110,32 @@
    this.getList()
  },
  methods: {
    getList(page) {
    getList (page) {
      const { pagination, filters } = this
      this.loading = true
      fetchList({
        model: {
          ...filters,
          ...filters
        },
        capacity: pagination.pageSize,
        page: page || pagination.page,
        page: page || pagination.page
      }).then(res => {
        console.log(res)
        this.loading = false
        this.list = res.records || []
        this.list.forEach(item => {
          item.stautsName = item.status == 0 ? '正常' : item.status == 1 ? '损坏' : '报废'
          item.statusName = item.status === 1 ? '损坏' : item.status === 2 ? '报废' : '正常'
        })
        this.pagination.total = res.total || 0
      }, () => {
        this.loading = false
      })
    },
    handleEx() {

    },
    tabsClick(val) {
      this.activeTabs = val
    },
    handleEdit(row) {
      this.showEdit = true
      this.$nextTick(() => {
        this.$refs.EditRef.isShowModal = true
        if (row && row.id) {
          this.$refs.EditRef.getDetail(row.id)
        }
      })

    },
    handleDetail() {

    },
    handleDel(row) {
      let message = `确认删除该记录吗?`
      this.$dialog.deleteConfirm(message)
        .then(() => {
          this.isWorking.delete = true
          deleteById(row.id)
            .then(() => {
              this.$tip.apiSuccess('删除成功')
              this.getList()
            })
        })
        .catch(() => { })
    handleDetail(row) {
      this.$refs.DetailRef.open()
    },
    clear() {
      this.filters = {}
@@ -175,7 +155,6 @@
@import '@/assets/style/variables.scss';

.tabs {
  border-bottom: 1px solid #DFE2E8;
  display: flex;
  margin-bottom: 20px;
  display: flex;

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

@@ -4,134 +4,205 @@
    <div class="home_title">
      <div class="left">
        <span class="mr10">付款方：xxx</span>
        <span class="status">status</span>
        <el-tag type="success">status</el-tag>
      </div>
      <el-button plain type="primary">新建收支流水</el-button>
      <el-button plain type="primary" @click="$refs.flowingWater.open('创建收支流水')">新建收支流水</el-button>
    </div>
    <div class="remark">
      <div class="item">
        <div class="la">账单状态</div>
        <div class="val">已结清</div>
    <div class="line"></div>
    <div class="main">
      <div class="list" style="background: rgba(0,0,0,0); padding: 0; margin-bottom: 0;">
        <div class="item" style="flex: 1;">
          <div class="la">结清状态</div>
          <div class="val" style="margin-top: 10px;">已结清</div>
        </div>
        <div class="item" style="flex: 1;">
          <div class="la">应收金额（元）</div>
          <div class="val" style="margin-top: 10px;">1,000.00</div>
        </div>
        <div class="item" style="flex: 1;">
          <div class="la">实收金额（元）</div>
          <div class="val" style="margin-top: 10px;">1,000.00</div>
        </div>
        <div class="item" style="flex: 1;">
          <div class="la">需付金额（元）</div>
          <div class="val" style="margin-top: 10px;">1,000.00</div>
        </div>
        <div class="item" style="flex: 1;">
          <div class="la">应收日期</div>
          <div class="val" style="margin-top: 10px;">2024-11-16</div>
        </div>
      </div>
    </div>
    <div class="tabs">
      <div class="tab" :class="{ active: activeTabs == 0 }" @click="tabsClick(0)">合同信息</div>
      <div class="tab" :class="{ active: activeTabs == 1 }" @click="tabsClick(1)">关联账单</div>
      <div class="tab" :class="{ active: activeTabs == 2 }" @click="tabsClick(2)">操作记录</div>
      <div class="tab" :class="{ active: activeTabs == 0 }" @click="tabsClick(0)">基础信息</div>
      <div class="tab" :class="{ active: activeTabs == 1 }" @click="tabsClick(1)">账单明细</div>
      <div class="tab" :class="{ active: activeTabs == 2 }" @click="tabsClick(2)">收支流水</div>
    </div>
    <div class="main">
      <div class="title">基础信息</div>
      <div class="list">
      <div class="list" style="background: rgba(0,0,0,0); padding: 0;">
        <div class="item">
          <div class="la">账单类型</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">租金</div>
        </div>
        <div class="item">
          <div class="la">计费周期</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">2024-11-17 ~ 2025-11-17</div>
        </div>
        <div class="item">
          <div class="la">账单金额(元)</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">10000.00</div>
        </div>
        <div class="item">
          <div class="la">账单编号</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">ZD20241117-0002</div>
        </div>
        <div class="item">
          <div class="la">合同编号</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">202411-0017</div>
        </div>
        <div class="item">
          <div class="la">创建时间</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">2024-11-16 15:17:01</div>
        </div>
        <div class="item">
          <div class="la">付款方</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">XX公司</div>
        </div>
        <div class="item">
          <div class="la">经办人</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">张三</div>
        </div>
        <div class="item">
          <div class="la">所属公司</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">XXX有限公司</div>
        </div>
        <div class="item">
          <div class="la">账单备注</div>
          <div class="val">{{ info.aaa }}</div>
          <div class="val">这是备注内容</div>
        </div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <div class="title">房源信息</div>
      <div class="list">
        <div class="item">
          <div class="la">项目名称</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
        <div class="item">
          <div class="la">楼宇名称</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
        <div class="item">
          <div class="la">楼层/房号</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
        <div class="item">
          <div class="la">面积</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
      <div class="list" style="background: rgba(0,0,0,0); padding: 0;">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="项目名称">
          </el-table-column>
          <el-table-column
            prop="name"
            label="楼宇名称">
          </el-table-column>
          <el-table-column
            prop="address"
            label="楼层/房号">
          </el-table-column>
          <el-table-column
            prop="address"
            label="面积">
          </el-table-column>
        </el-table>
      </div>
      <div class="title">租客信息</div>
      <div class="list">
        <div class="item">
          <div class="la">租客</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
        <div class="item">
          <div class="la">经办人</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
      <div class="title">账单明细</div>
      <div class="list" style="background: rgba(0,0,0,0); padding: 0;">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="费用类型">
          </el-table-column>
          <el-table-column
            prop="name"
            label="应收/付金额">
          </el-table-column>
          <el-table-column
            prop="address"
            label="实收金额">
          </el-table-column>
          <el-table-column
            prop="address"
            label="需收金额">
          </el-table-column>
          <el-table-column
            prop="address"
            label="计费周期">
          </el-table-column>
          <el-table-column
            prop="address"
            label="应收/付日期">
          </el-table-column>
          <el-table-column
            prop="address"
            label="备注">
          </el-table-column>
        </el-table>
      </div>
      <div class="title">租赁条款</div>
      <div class="list">
        <div class="item">
          <div class="la">押金金额</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
        <div class="item">
          <div class="la">付款方式</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
        <div class="item">
          <div class="la">免租期</div>
          <div class="val">{{ info.aaa }}</div>
        </div>
      <div class="title">收支流水</div>
      <div class="list" style="background: rgba(0,0,0,0); padding: 0;">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="date"
            label="流水类型">
          </el-table-column>
          <el-table-column
            prop="name"
            label="对方单位名称">
          </el-table-column>
          <el-table-column
            prop="address"
            label="费用类型">
          </el-table-column>
          <el-table-column
            prop="address"
            label="入账日期">
          </el-table-column>
          <el-table-column
            prop="address"
            label="发生额">
          </el-table-column>
          <el-table-column
            prop="address"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="address"
            label="备注">
          </el-table-column>
        </el-table>
      </div>
      <el-table :data="info.list" stripe>
        <el-table-column prop="" label="开始日期" min-width="100" show-overflow-tooltip />
        <el-table-column prop="" label="结束日期" min-width="100" show-overflow-tooltip />
        <el-table-column prop="" label="合同单价" min-width="100" show-overflow-tooltip />
        <el-table-column prop="" label="付款提前天数" min-width="100" show-overflow-tooltip />
      </el-table>
    </div>
    <!--  åˆ›å»ºæµæ°´  -->
    <FlowingWater ref="flowingWater" />
  </GlobalWindow>
</template>

<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseOpera from '@/components/base/BaseOpera'
import FlowingWater from './flowingWater'
export default {
  components: {
    GlobalWindow
    GlobalWindow,
    FlowingWater
  },
  extends: BaseOpera,
  data() {
    return {
      id: '',
      visible: true,
      visible: false,
      activeTabs: '',
      info: {}
      info: {},
      tableData: []
    }
  },
  methods: {
@@ -201,6 +272,12 @@
  }
}

.line {
  width: 100%;
  margin: 15px 0;
  border-bottom: 1px dashed #eaeaea;
}

.main {
  .title {
    font-weight: 500;
@@ -212,18 +289,18 @@
  .list {
    display: flex;
    flex-wrap: wrap;
    background: #F7F7F7;
    /*background: #F7F7F7;*/
    border-radius: 2px;
    padding: 15px 20px;
    padding: 0 20px;
    margin-bottom: 20px;

    .item {
      width: 25%;
      margin-bottom: 16px;
      flex: 25%;
      margin-bottom: 20px;

      .la {
        color: #7f7f7f;
        margin-top: 2px;
        margin-bottom: 5px;
      }
    }
  }

 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',

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,373 @@
<template>
    <GlobalWindow width="100%" :title="title" :visible.sync="isShowModal" :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">
                    <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>
                        <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.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="">
                            <el-input v-model="param.code" placeholder="请输入实收金额" v-trim />
                        </el-form-item>
                        <el-form-item label="实收金额" prop="">
                            <el-input v-model="param.code" 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>
                        <el-form-item label="收款方式" prop="">
                            <el-select v-model="param.content" 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="4"></el-option>
                                <el-option label="微信" :value="5"></el-option>
                                <el-option label="转账支票" :value="6"></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-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>
                    </div>
                </el-form>
            </div>
        </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>
    </GlobalWindow>
</template>

<script>
  import GlobalWindow from '@/components/common/GlobalWindow'
  import BaseOpera from '@/components/base/BaseOpera'
  import { rules } from './config'
  import { Message, Loading } from 'element-ui'
  export default {
    name: "flowingWater",
    components: {
      GlobalWindow
    },
    extends: BaseOpera,
    data() {
      return {
        isShowModal: false,
        title: '',
        activeTabs: '0',
        param: {},
        rules,
        timeTab: '0',

        loadingInstance: null,
        uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch',
        fileList: [],
        uploadData: {
          folder: 'HIDDEN_DANGER_FILE'
        },

        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 },
        ],
      }
    },
    created() {
      const { param } = this
      this.title = param.id ? '编辑收款账单' : '创建收款账单'
    },
    methods: {
      tabsClick(val) {
        this.activeTabs = val
      },
      timeTabClick(val) {
        this.timeTab = val
      },
      getDetail() {

      },
      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',
          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.isShowModal = false
        this.$emit('close')
      },
      open(title, target) {
        this.title = title
        this.isShowModal = true
      }
    }
  }
</script>

<style lang="scss" scoped>
    @import '@/assets/style/variables.scss';


    .cost_tabs {
        justify-content: flex-start;
        border: none;

        .tab {
            height: 36px;
            line-height: 36px;
            font-size: 14px;
        }
    }

    .main {
        display: flex;
        margin-bottom: 20px;

        .main_content {
            flex: 1;
            margin-right: 20px;

            .head {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .tabs {
                    display: flex;
                    margin-bottom: 20px;
                    display: flex;
                    justify-content: center;

                    .tab {
                        height: 14px;
                        line-height: 14px;
                        cursor: pointer;
                        border: 1px solid #ebebeb;
                        padding: 12px 24px;
                    }

                    .active {
                        font-weight: 500;
                        color: $primary-color;
                        border: 1px solid $primary-color;
                    }
                }
            }

            .list {
                display: flex;
                flex-wrap: wrap;

                .el-form-item {
                    width: 33.33%;
                    box-sizing: border-box;
                    padding: 0 12px;
                }
            }
        }

        .main_house {
            width: 320px;
            padding: 24px 12px;
            border: 1px solid #c3c6cd;
            border-radius: 2px;

            .title {
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 30px;
            }
        }

    }

    .total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 32px;
        background-color: #e7e9f5;

        span {
            width: 160px;
            text-align: center;
        }
    }

    .file_wrap {
        
        .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .m_title {
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 15px;
        margin-top: 10px;
    }
</style>