lc_finance/web/src/view/dashboard/dashboardTable/dashboardTable.vue

<template>
  <div class="commit-table">
    <div class="commit-table-title">
      需收款项目
    </div>
    <div class="log">
      <el-table
        :data="projectList"
        max-height="400"
      >
        <el-table-column
          prop="name"
          label="项目名称"
          align="center"
        />
        <el-table-column
          prop="price"
          label="项目总金额"
          align="center"
        />
        <el-table-column
          label="已收款金额"
          align="center"
        >
          <template #default="scope">
            {{ already(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column
          label="还需收款金额"
          align="center"
        >
          <template #default="scope">
            {{ isTo(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="collectionTime"
          label="完成日期"
          align="center"
        />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getProjectList } from '@/api/project'

const projectList = ref()

const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 1000
  },
  name: '',
  time: '',
  state: 3
})

const queryData = async() => {
  await getProjectList(condition).then(res => {
    projectList.value = res.data.list
  })
}

// 计算
const already = (val) => {
  console.log(val.collection)
  let sum = 0
  for (const key in val.collection) {
    sum = sum + Number(val.collection[key].collectionPrice)
  }
  return sum
}

const isTo = (val) => {
  let sum = 0
  for (const key in val.collection) {
    sum = sum + Number(val.collection[key].collectionPrice)
  }
  return Number(val.price) - sum
}

defineOptions({
  name: 'DashboardTable',
})

onMounted(() => {
  queryData()
})
</script>

<style lang="scss" scoped>
.commit-table{
    background-color: #fff;
    height: 400px;
    &-title{
        font-weight: 600;
        margin-bottom: 12px;
    }
    .log{
      &-item{
        display: flex;
        justify-content: space-between;
        margin-top: 14px;
        .key-box{
          justify-content: center;
        }
        .key{
          &.top{
            background: #314659;
            color: #FFFFFF;;
          }
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #F0F2F5;
          text-align: center;
          color:rgba($color: #000000, $alpha: 0.65)
        }
        .message{
          color: rgba(0, 0, 0, 0.65);
        }
        .form{
          color: rgba(0, 0, 0, 0.65);
          margin-left: 12px;
        }
        .flex{
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .flex-1{
          flex:1;
        }
        .flex-2{
          flex:2;
        }
        .flex-3{
          flex:3;
        }
        .flex-4{
          flex:4;
        }
        .flex-5{
          flex:5;
        }
      }
    }
}
</style>