cmc-oa/oa-ui/src/views/flowable/form/budget/adjust/index.vue

<template>
  <div class="main">
    <h2 class="text-center">项目直接生产成本预算—核算表</h2>
    <p style="text-align: center">编制人：{{ budgetForm.compilerUser ? budgetForm.compilerUser.nickName : '' }}</p>
    <el-divider></el-divider>
    <el-descriptions :column="3" border class="descriptions">
      <el-descriptions-item label="项目编号">
        {{ project.projectNumber }}
      </el-descriptions-item>
      <el-descriptions-item label="项目名称">
        {{ project.projectName }}
      </el-descriptions-item>
      <el-descriptions-item label="项目负责人">
        {{ getUserName(project.projectLeader) }}
      </el-descriptions-item>
      <el-descriptions-item label="承担部门">
        {{ getDeptNames(project.undertakingDept) }}
      </el-descriptions-item>
      <el-descriptions-item label="项目备注" :span="3">
        {{ project.remark }}
      </el-descriptions-item>
      <el-descriptions-item label="预算表单备注" :span="5">
        {{ budgetForm.remark }}
      </el-descriptions-item>
      <el-descriptions-item label="项目计划工作量" :span="3">
        <div>
          <table border="1" style="width: 100%;">
            <tr style="background-color:#f8f8f9">
              <td style="width: 250px">工作内容</td>
              <td style="width: 100px">比例尺/等级</td>
              <td style="width: 100px">单位</td>
              <td style="width: 100px">工作量</td>
              <td style="width: 100px">要求完成时间</td>
              <td style="width: 200px">备注</td>
            </tr>
            <tr v-for="(work, index) in workContentList" :key="index">
              <td>
                {{ work.content }}
              </td>
              <td>
                {{ work.scale }}
              </td>
              <td>
                {{ work.unit }}
              </td>
              <td>
                {{ work.workload }}
              </td>
              <td>
                {{ work.deadline }}
              </td>
              <td>
                {{ work.remark }}
              </td>
            </tr>
          </table>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="内业绩效额" :span="3">
        <table border="1" style="width:100%">
          <tr style="background-color:#f8f8f9" v-if="workList.length != 0">
            <td style="min-width:50px">工作简述</td>
            <td style="min-width:50px">工作内容</td>
            <td style="min-width:50px">比例尺/等级</td>
            <td style="min-width:50px">数量</td>
            <td style="min-width:50px">单价</td>
            <td style="min-width:50px">单位</td>
            <td style="min-width:50px">系数</td>
            <td style="min-width:80px">金额</td>
            <td style="min-width: 150px;">备注</td>
          </tr>
          <tr v-for="work in workList">
            <td>{{ work.content }}</td>
            <td>{{ work.cmcPrice ? work.cmcPrice.workItem : '' }}</td>
            <td>
              {{ work.scaleGrade }}
            </td>
            <td>
              {{ work.workload }}
            </td>
            <td>{{ work.price }}</td>
            <td>{{ work.unit }}</td>
            <td>
              {{ work.coefficient }}
            </td>
            <td style="text-align:right;">{{ work.settle ? work.settle.toFixed(2) : '0.00' }}</td>
            <td>{{ work.remark ? work.remark : '' }}</td>
          </tr>
          <tr>
            <td :colspan="7" class="head">内业绩效额合计</td>
            <td :colspan="1" class="head" style="text-align:right;">
              {{ budgetForm.settleExpense ? budgetForm.settleExpense.toFixed(2) : '0.00' }}
            </td>
            <td></td>
          </tr>
          <tr style="color:#F56C6C">
            <td :colspan="7" class="head">内业核算绩效额</td>
            <td :colspan="1" class="head">
              <el-input-number v-model="budgetForm.settleAdjust" :controls="false" style="width:100%"></el-input-number>
            </td>
          </tr>
        </table>
      </el-descriptions-item>
      <el-descriptions-item label="内业人员成本" :span="3">
        <inner-staff-cost :staffList.sync="innerStaffList"
          @update:staffList="handleInnerStaffChange"></inner-staff-cost>
      </el-descriptions-item>
      <el-descriptions-item label="外业人员成本" :span="3">
        <outer-staff-cost :staffList.sync="outerStaffList"
          @update:staffList="handleOuterStaffChange"></outer-staff-cost>
      </el-descriptions-item>
      <el-descriptions-item label="车辆成本" :span="3">
        <car-cost :carList.sync="carList"></car-cost>
      </el-descriptions-item>
      <el-descriptions-item label="设备成本" :span="3">
        <device-cost :deviceList.sync="deviceList"></device-cost>
      </el-descriptions-item>
      <el-descriptions-item label="现场开支" :span="3">
        <table border="1" style="width:100%;">
          <tr style="background-color:#f8f8f9">
            <td>开支项</td>
            <td>金额</td>
            <td class="adjust">核算金额</td>
          </tr>
          <tr>

          </tr>
        </table>
      </el-descriptions-item>
      <el-descriptions-item label="经营相关" :span="3">

      </el-descriptions-item>
      <el-descriptions-item label="预算外开销" :span="3">

      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { listBudget, updateBudget } from "@/api/oa/budget/budget";
import { listBudgetCar, updateBudgetCar } from "@/api/oa/budget/budgetCar";
import { listBudgetDevice, updateBudgetDevice } from "@/api/oa/budget/budgetDevice";
import { listBudgetSettle, updateBudgetSettle } from "@/api/oa/budget/budgetSettle";
import { listBudgetStaff } from "@/api/oa/budget/budgetStaff";
import { listProjectWork } from "@/api/oa/project/projectWork";
import { getProject } from "@/api/oa/project/project";
import InnerStaffCost from './components/InnerStaffCost.vue';
import OuterStaffCost from './components/OuterStaffCost.vue';
import CarCost from './components/CarCost.vue';
import DeviceCost from './components/DeviceCost.vue';

export default {
  components: {
    InnerStaffCost,
    OuterStaffCost,
    CarCost,
    DeviceCost
  },
  data() {
    return {
      loading: true,
      budgetForm: {},
      project: {},
      workContentList: [],
      workList: [],
      innerStaffList: [],
      outerStaffList: [],
      carList: [],
      deviceList: [],
    }
  },
  created() {
    this.initBudgetForm();
    this.getProjectWorkList();
  },
  methods: {
    initBudgetForm() {
      this.loading = true;
      listBudget({ pageNum: 1, pageSize: 20, projectId: '1897087448425566208' }).then(async res => {
        this.budgetForm = res.rows[0];
        if (this.budgetForm) {
          const budgetId = this.budgetForm.budgetId;
          // 获取设备数据
          let deviceRes = await listBudgetDevice({ pageSize: 100, budgetId });
          this.deviceList = deviceRes.rows;

          // 获取车辆数据
          let carRes = await listBudgetCar({ pageSize: 100, budgetId });
          this.carList = carRes.rows;

          // 获取内业人员数据
          let innerStaffRes = await listBudgetStaff({ pageSize: 100, budgetId });
          this.innerStaffList = innerStaffRes.rows;

          // 获取外业人员数据
          let outerStaffRes = await listBudgetStaff({ pageSize: 100, budgetId });
          this.outerStaffList = outerStaffRes.rows;

          // 获取内业绩效额数据
          let settleRes = await listBudgetSettle({ pageSize: 100, budgetId });
          this.workList = settleRes.rows;
          for (let work of this.workList) {
            if (work.groundType == '0') {
              work.price = work.cmcPrice.commonPrice
              work.scaleGrade = work.cmcPrice.scaleGrade
              work.unit = work.cmcPrice.unit
            } else {
              work.price = work.cmcPrice.complexPrice
              work.scaleGrade = work.cmcPrice.scaleGrade
              work.unit = work.cmcPrice.unit
            }
          }
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    getProjectWorkList() {
      getProject('1897087448425566208').then(res => {
        this.project = res.data;
      })
      listProjectWork({ pageSize: 999, projectId: '1897087448425566208' }).then(res => {
        this.workContentList = res.rows;
      })
    },
    // 处理内业人员数据变化
    handleInnerStaffChange(newList) {
      this.innerStaffList = newList;
      console.log(newList)
      // 计算内业人员总成本
      const totalAmount = this.innerStaffList.reduce((sum, staff) => {
        return sum + (staff.amountAdjust || 0);
      }, 0);

      // 更新预算表单中的内业人员成本
      if (this.budgetForm) {
        this.budgetForm.innerStaffAmount = totalAmount;
        // 可以在这里调用API保存数据
        // updateBudget(this.budgetForm);
      }
    },

    // 处理外业人员数据变化
    handleOuterStaffChange(newList) {
      this.outerStaffList = newList;
      // 计算外业人员总成本
      const totalAmount = this.outerStaffList.reduce((sum, staff) => {
        return sum + (staff.amountAdjust || 0);
      }, 0);

      // 更新预算表单中的外业人员成本
      if (this.budgetForm) {
        this.budgetForm.outerStaffAmount = totalAmount;
        // 可以在这里调用API保存数据
        // updateBudget(this.budgetForm);
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.mylabel {
  font-weight: bold;
}

.main {
  width: 85%;
  margin: 0 auto;
  text-align: center;
}

.descriptions {
  width: 100%;
  margin: 0 auto;
}

table {
  text-align: center;
  border-collapse: collapse;
  margin: 0 auto;

  /*设置背景颜色*/
  /* background-color: #bfa; */
  td {
    padding: 5px;
  }
}

.adjust {
  color: #F56C6C;
  width: 120px;
}

::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
  border: 1px solid #838894;
}

::v-deep .el-descriptions-item__label.is-bordered-label {
  color: #434141;
  background: #eaeaea;
}
</style>