cmc-oa/oa-ui/src/views/oa/budget/components/budgetTable.vue

<template>
  <div>
    <h2 style="text-align:center;">项目直接生产成本预算表</h2>
    <table border="1" class="table">
      <tr>
        <td class="head">项目名称</td>
        <td colspan="3">{{ projectForm.projectName }}</td>
        <td class="head">项目编号</td>
        <td colspan="2">{{ projectForm.projectNumber }}</td>
      </tr>
      <tr>
        <td :rowspan="userLen" class="head">人员</td>
        <td class="head">姓名</td>
        <td class="head">岗位工资</td>
        <td class="head">人员成本（天）</td>
        <td class="head">进出场单价</td>
        <td class="head">预算天数</td>
        <td class="head">金额</td>
      </tr>
      <tr v-for="user in budgetForm.chooseUser" :key="'user' + user.userId">
        <td>{{ user.nickName }}</td>
        <td>{{ user.salary.salary }}</td>
        <td>{{ parseFloat(user.salary.salary / 31).toFixed(2) }}</td>
        <td>{{ user.inOutPrice }}</td>
        <td>{{ user.days }}</td>
        <td>{{ user.staffCost }}</td>
      </tr>
      <tr>
        <td :rowspan="carLen" class="head">车辆</td>
        <td class="head">车牌号</td>
        <td class="head">油耗</td>
        <td class="head">总里程</td>
        <td class="head">折旧成天（天）</td>
        <td class="head">预算天数</td>
        <td class="head">金额</td>
      </tr>
      <tr v-for="car in budgetForm.chooseCar" :key="'car' + car.carId">
        <td>{{ car.licensePlate }}</td>
        <td>{{ car.mileage }}</td>
        <td>{{ car.distance }}</td>
        <td>{{ car.dayCost }}</td>
        <td>{{ car.days }}</td>
        <td>{{ car.expense }}</td>
      </tr>
      <tr>
        <td :rowspan="deviceLen" class="head">设备</td>
        <td class="head">设备名称</td>
        <td class="head">规格型号</td>
        <td class="head">品牌</td>
        <td class="head">折旧成本（天）</td>
        <td class="head">预算天数</td>
        <td class="head">金额</td>
      </tr>
      <tr v-for="device in budgetForm.chooseDevice" :key="'device' + device.deviceId">
        <td>{{ device.name }}</td>
        <td>{{ device.series }}</td>
        <td>{{ device.brand }}</td>
        <td>{{ device.dayCost }}</td>
        <td>{{ device.days }}</td>
        <td>{{ device.depreciation }}</td>
      </tr>
      <tr>
        <td colspan="6" class="head">固定成本小计</td>
        <td>{{ budgetForm.fixCost }}</td>
      </tr>
      <tr>
        <td :rowspan="workLen" class="head">预计结算金额</td>
        <td class="head">工作内容</td>
        <td class="head">比例尺</td>
        <td class="head">总工作量</td>
        <td class="head">单价</td>
        <td class="head">系数</td>
        <td class="head">金额</td>
      </tr>
      <tr v-for="(work, index) in budgetForm.workList" :key="'work' + index">
        <td>{{ work.content }}</td>
        <td>{{ work.scale }}</td>
        <td>{{ work.workload }}</td>
        <td>{{ work.price }}</td>
        <td>{{ work.coefficient }}</td>
        <td>{{ work.settle }}</td>
      </tr>
      <tr>
        <td colspan="5" class="head">外协费用</td>
        <td>{{ budgetForm.outExpense }}</td>
      </tr>
      <tr>
        <td colspan="5" class="head">商务费用</td>
        <td>{{ budgetForm.businessExpense }}</td>
      </tr>
      <tr>
        <td colspan="5" class="head">车船租赁</td>
        <td>{{ budgetForm.rentExpense }}</td>
      </tr>
      <tr>
        <td colspan="5" class="head">其他费用</td>
        <td>{{ budgetForm.otherExpense }}</td>
      </tr>
      <tr>
        <td colspan="6" class="head">直接成本小计</td>
        <td>{{ budgetForm.directExpense }}</td>
      </tr>
      <tr>
        <td colspan="6" class="head">总成本=（固定成本+直接成本）*120%</td>
        <td>{{ totalBudget }}</td>
      </tr>
      <!-- <tr>
        <td class="head">编制人</td>
        <td colspan="2">{{  }}</td>
        <td class="head">审核人</td>
        <td colspan="3"></td>
      </tr> -->
    </table>
  </div>
</template>

<script>
export default {
  props: {
    budgetForm: {
      type: Object,
      require: true
    },
    projectForm: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      userLen: 1,
      carLen: 1,
      deviceLen: 1,
      workLen: 1,
      totalBudget: 0
    }
  },
  created() {
    console.log(this.budgetForm);
    this.userLen = this.budgetForm.chooseUser.length + 1;
    this.carLen = this.budgetForm.chooseCar.length + 1;
    this.deviceLen = this.budgetForm.chooseDevice.length + 1;
    this.workLen = this.budgetForm.workList.length + 5;
    this.totalBudget = ((Number(this.budgetForm.directExpense) + Number(this.budgetForm.fixCost)) * 1.2).toFixed(2);
    this.$emit('getTotal',this.totalBudget)
  },
  methods: {

  },
}
</script>

<style lang="scss" scoped>
.table {
  /*居中*/
  // margin: 0 auto;
  /*边框*/
  /* border: 1px solid black; */
  text-align: center;
  border-collapse: collapse;
  margin: 0 auto;
  /*设置背景颜色*/
  /* background-color: #bfa; */
  td {
    padding: 5px;
    height: 40px;
  }
}

.head {
  // background-color: var(--current-color);
  // opacity: 0.5;
  // color: #fff;
}
</style>