财务

MrShi

2024-11-26 b2ea9a84701e62c84c6cd497ec9b5b66c85b8834

 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;
      }
    }
  }