新增预算表

oa-ui/src/views/oa/budget/addBudget.vue

  * @Author: ysh
  * @Date: 2024-03-25 15:05:59
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-03-28 17:49:30
--->
-<!--
- * @Author: ysh
- * @Date: 2024-03-25 15:05:59
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-03-27 17:37:37
+ * @LastEditTime: 2024-03-29 16:51:06
 -->
 <template>
   <div>
                 <td>{{ user.salary.salary }}</td>
                 <td>{{ parseFloat(user.salary.salary / 31).toFixed(2) }}</td>
                 <td>
-                  <el-input v-model="user.inOutPrice" placeholder="请输入进出场单价"></el-input>
+                  <el-input v-model="user.inOutPrice" placeholder="请输入进出场单价" @change="calculateUserTotal(user)"></el-input>
                 </td>
                 <td>
-                  <el-input v-model="user.days" placeholder="请输入天数"></el-input>
+                  <el-input v-model="user.days" placeholder="请输入天数" @change="calculateUserTotal(user)"
+                  ></el-input>
                 </td>
                 <td class="staffCost">{{ user.staffCost }}</td>
                 <td>
-                  <el-button type="text" @click="calculateUserTotal(user)">计算</el-button>
+                  <!-- <el-button type="text" @click="calculateUserTotal(user)">计算</el-button> -->
                 </td>
               </tr>
               <tr>
               <tr v-for="car in chooseCar" :key="car.carId">
                 <td>{{ car.licensePlate }}</td>
                 <td>
-                  <el-input v-model="car.mileage" placeholder="请输入油耗"></el-input>
+                  <el-input v-model="car.mileage" placeholder="请输入油耗" @change="calculateCarTotal(car)"></el-input>
                 </td>
                 <td>
-                  <el-input v-model="car.distance" placeholder="请输入总里程"></el-input>
+                  <el-input v-model="car.distance" placeholder="请输入总里程" @change="calculateCarTotal(car)"></el-input>
                 </td>
                 <td>
                   {{ car.dayCost }}
                 </td>
                 <td>
-                  <el-input v-model="car.days" placeholder="请输入天数"></el-input>
+                  <el-input v-model="car.days" placeholder="请输入天数" @change="calculateCarTotal(car)"></el-input>
                 </td>
                 <td class="carCost">{{ car.expense }}</td>
                 <td>
-                  <el-button type="text" @click="calculateCarTotal(car)">计算</el-button>
+                  <!-- <el-button type="text" @click="calculateCarTotal(car)">计算</el-button> -->
                 </td>
               </tr>
               <tr>
                   {{ device.dayCost }}
                 </td>
                 <td>
-                  <el-input v-model="device.days" placeholder="请输入天数"></el-input>
+                  <el-input v-model="device.days" placeholder="请输入天数" @change="calculateDeviceTotal(device)"></el-input>
                 </td>
                 <td class="deviceCost">{{ device.depreciation }}</td>
                 <td>
-                  <el-button type="text" @click="calculateDeviceTotal(device)">计算</el-button>
+                  <!-- <el-button type="text" @click="calculateDeviceTotal(device)">计算</el-button> -->
                 </td>
               </tr>
               <tr>
           <el-breadcrumb-item>固定成本小计</el-breadcrumb-item>
           <el-breadcrumb-item>¥ {{ budgetForm.fixCost }}</el-breadcrumb-item>
         </el-breadcrumb>
-        <choose-money :workList="workList" @getSettle="getSettle"></choose-money>
+        <el-form>
+          <choose-money :workList="workList" @getSettle="getSettle"></choose-money>
+          <el-form-item label="外协费用：">
+            <el-input-number v-model="budgetForm.outExpense" style="width:400px;"></el-input-number>
+          </el-form-item>
+          <el-form-item label="商务费用：">
+            <el-input-number v-model="budgetForm.businessExpense" style="width:400px;"></el-input-number>
+          </el-form-item>
+          <el-form-item label="车船租赁：">
+            <el-input-number v-model="budgetForm.rentExpense" style="width:400px;"></el-input-number>
+          </el-form-item>
+          <el-form-item label="其他费用：">
+            <el-input-number v-model="budgetForm.otherExpense" style="width:400px;"></el-input-number>
+          </el-form-item>
+          <el-form-item label="直接成本小计：">
+            {{ budgetForm.directExpense }}
+            <el-button type="success" style="margin-left:30px;" @click="getDirectExpense(budgetForm)">计算</el-button>
+          </el-form-item>
+
+        </el-form>
+      </div>
+
+      <!-- 生成预算表 -->
+      <div class="finish" v-if="activeStep == 3">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item>选择项目</el-breadcrumb-item>
+          <el-breadcrumb-item>{{ projectForm.projectNumber }}</el-breadcrumb-item>
+          <el-breadcrumb-item>{{ projectForm.projectName }}</el-breadcrumb-item>
+          <el-breadcrumb-item>{{ projectForm.projectLeader }}</el-breadcrumb-item>
+        </el-breadcrumb>
+        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin:15px 0">
+          <el-breadcrumb-item>固定成本小计</el-breadcrumb-item>
+          <el-breadcrumb-item>¥ {{ budgetForm.fixCost }}</el-breadcrumb-item>
+        </el-breadcrumb>
+        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin:15px 0">
+          <el-breadcrumb-item>直接成本小计</el-breadcrumb-item>
+          <el-breadcrumb-item>¥ {{ budgetForm.directExpense }}</el-breadcrumb-item>
+        </el-breadcrumb>
+        <budget-table :budgetForm="budgetForm" :projectForm="projectForm" ></budget-table>
       </div>
       <el-divider></el-divider>
       <div class="btn">
 import chooseCar from "./components/chooseCar.vue";
 import chooseDevice from "./components/chooseDevice.vue";
 import chooseMoney from "./components/chooseMoney.vue";
+import budgetTable from './components/budgetTable.vue';
 export default {
   components: {
-    choosePeople, chooseCar, chooseDevice, chooseMoney
+    choosePeople, chooseCar, chooseDevice, chooseMoney, budgetTable
   },
   data() {
     return {
       this.openProject = false;
     },
     confirmStep() {
+        debugger
       if (this.activeStep == 0) {
         if (this.projectForm.projectNumber == undefined) {
           this.activeStep = 0;
         } else {
           this.activeStep += 1;
         }
-      } else {
+      }else if(this.activeStep == 2){
+        this.budgetForm.chooseUser = this.chooseUser;
+        this.budgetForm.chooseCar = this.chooseCar;
+        this.budgetForm.chooseDevice = this.chooseDevice;
+        this.activeStep += 1;
+      }
+      else {
         this.activeStep += 1;
       }
     },
         return res.data.salary;
       });
     },
-    getSettle(val){
+    getSettle(val) {
       console.log(val);
       console.log(this.budgetForm);
       this.budgetForm.settleExpense = val.settle;
     getFixCost() {
       let total = Number(this.budgetForm.staffCost) + Number(this.budgetForm.carCost) + Number(this.budgetForm.deviceCost)
       this.budgetForm.fixCost = total.toFixed(2)
+    },
+    // 获取直接成本
+    getDirectExpense(form) {
+      console.log(this.budgetForm);
+      let sum = Number(form.settleExpense) + form.outExpense + form.rentExpense + form.businessExpense + form.otherExpense
+      this.budgetForm.directExpense = sum.toFixed(2)
     }
   },
 };
   }
 
   .staff,
-  .other {
+  .other,
+  .finish {
     width: 1200px;
     margin: 0 auto;
     padding-top: 50px;

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>项目编号</td>
+        <td colspan="2">{{ projectForm.projectNumber }}</td>
+      </tr>
+      <tr>
+        <td :rowspan="userLen">人员</td>
+        <td>姓名</td>
+        <td>岗位工资</td>
+        <td>人员成本（天）</td>
+        <td>进出场单价</td>
+        <td>预算天数</td>
+        <td>金额</td>
+      </tr>
+      <tr v-for="user in budgetForm.chooseUser" :key="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">车辆</td>
+        <td>车牌号</td>
+        <td>油耗</td>
+        <td>总里程</td>
+        <td>折旧成天（天）</td>
+        <td>预算天数</td>
+        <td>金额</td>
+      </tr>
+      <tr v-for="car in budgetForm.chooseCar" :key="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">设备</td>
+        <td>设备名称</td>
+        <td>规格型号</td>
+        <td>品牌</td>
+        <td>折旧成本（天）</td>
+        <td>预算天数</td>
+        <td>金额</td>
+      </tr>
+      <tr v-for="device in budgetForm.chooseDevice" :key="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">固定成本小计</td>
+        <td>{{ budgetForm.fixCost }}</td>
+      </tr>
+      <tr>
+        <td :rowspan="workLen">预计结算金额</td>
+        <td>工作内容</td>
+        <td>比例尺</td>
+        <td>总工作量</td>
+        <td>单价</td>
+        <td>系数</td>
+        <td>金额</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.total }}</td>
+      </tr>
+      <tr>
+        <td colspan="5">外协费用</td>
+        <td>{{ budgetForm.outExpense }}</td>
+      </tr>
+      <tr>
+        <td colspan="5">商务费用</td>
+        <td>{{ budgetForm.businessExpense }}</td>
+      </tr>
+      <tr>
+        <td colspan="5">车船租赁</td>
+        <td>{{ budgetForm.rentExpense }}</td>
+      </tr>
+      <tr>
+        <td colspan="5">其他费用</td>
+        <td>{{ budgetForm.otherExpense }}</td>
+      </tr>
+      <tr>
+        <td colspan="6">直接成本小计</td>
+        <td>{{ budgetForm.directExpense }}</td>
+      </tr>
+      <tr>
+        <td colspan="6">总成本=（固定成本+直接成本）*120%</td>
+        <td>{{ totalCost }}</td>
+      </tr>
+      <tr>
+        <td>编制人</td>
+        <td colspan="2"></td>
+        <td>审核人</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,
+      totalCost: 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;
+  },
+  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(--primary-color);
+}
+</style>

oa-ui/src/views/oa/budget/components/chooseMoney.vue

 <template>
   <div>
-    <el-form>
-      <el-form-item label="项目概况：">
-        <table border="1">
-          <tr>
-            <td style="width: 250px">工作内容</td>
-            <td>等级或比例尺</td>
-            <td>单位</td>
-            <td>工作量</td>
-            <td style="width: 100px">要求完成时间</td>
-            <td>备注</td>
-          </tr>
-          <tr v-for="(work, index) in workList" :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>
-      </el-form-item>
-      <el-form-item label="预结算：">
-        <table border="1">
-          <tr>
-            <td style="width: 100px">工作内容</td>
-            <td>工作类别</td>
-            <td>工作项目</td>
-            <!-- <td>项目细项</td> -->
-            <td>比例尺</td>
-            <td>地类类型</td>
-            <td style="width:90px;">单价</td>
-            <td style="width:90px;">总工作量</td>
-            <td style="width:70px;">系数</td>
-            <td>总额</td>
-          </tr>
-          <tr v-for="(work, index) in workList" :key="index">
-            <td>
-              {{ work.content }}
-            </td>
-            <td>
-              <el-select v-model="work.workType" :style="{ width: '100%' }" :loading="work.workSelect.workTypeLoading"
-                @change="getWorkItemList(work, work.workType)">
-                <el-option v-for="item in work.workSelect.workTypeList" :key="item.value" :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </td>
-            <td>
-              <el-select v-model="work.workItem" :style="{ width: '100%' }" :remote="true"
-                @change="getScaleGradeList(work, work.workItem)">
-                <el-option v-for="item in work.workSelect.workItemList" :key="item.value" :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </td>
-            <!-- <td>
+    <el-form-item label="项目概况：">
+      <table border="1">
+        <tr>
+          <td style="width: 250px">工作内容</td>
+          <td>等级或比例尺</td>
+          <td>单位</td>
+          <td>工作量</td>
+          <td style="width: 100px">要求完成时间</td>
+          <td>备注</td>
+        </tr>
+        <tr v-for="(work, index) in workList" :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>
+    </el-form-item>
+    <el-form-item label="预结算：">
+      <table border="1">
+        <tr>
+          <td style="width: 100px">工作内容</td>
+          <td>工作类别</td>
+          <td>工作项目</td>
+          <!-- <td>项目细项</td> -->
+          <td>比例尺</td>
+          <td>地类类型</td>
+          <td style="width:90px;">单价</td>
+          <td style="width:90px;">总工作量</td>
+          <td style="width:70px;">系数</td>
+          <td style="min-width:70px;">总额</td>
+        </tr>
+        <tr v-for="(work, index) in workList" :key="index">
+          <td>
+            {{ work.content }}
+          </td>
+          <td>
+            <el-select v-model="work.workType" :style="{ width: '100%' }" :loading="work.workSelect.workTypeLoading"
+              @change="getWorkItemList(work, work.workType)">
+              <el-option v-for="item in work.workSelect.workTypeList" :key="item.value" :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </td>
+          <td>
+            <el-select v-model="work.workItem" :style="{ width: '100%' }" :remote="true"
+              @change="getScaleGradeList(work, work.workItem)">
+              <el-option v-for="item in work.workSelect.workItemList" :key="item.value" :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </td>
+          <!-- <td>
               <el-select v-model="work.subItem" :style="{ width: '100%' }"
                 @change="getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType)">
                 <el-option v-for="item in work.workSelect.subItemList" :key="item.value" :label="item.label"
                 </el-option>
               </el-select>
             </td> -->
-            <td>
-              <el-select v-model="work.scaleGrade" :style="{ width: '100%' }"
-                @change="getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType)">
-                <el-option v-for="item in work.workSelect.scaleGradeList" :key="item.value" :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </td>
-            <td>
-              <el-select v-model="work.groundType" :style="{ width: '100%' }"
-                @change="getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType)">
-                <el-option key="一般地类" label="一般地类" value="一般地类">
-                </el-option>
-                <el-option key="复杂地类" label="复杂地类" value="复杂地类">
-                </el-option>
-              </el-select>
-            </td>
-            <td>
-              {{ work.price }} / {{ work.unit }}
-            </td>
-            <td>
-              {{ work.workLoad }}
-            </td>
-            <td>
-              <el-input v-model="work.coefficient" placeholder="请输入系数" @blur="getTotal(work)"></el-input>
-            </td>
-            <td class="workTotal">
-              {{ work.total }}
-            </td>
-          </tr>
-        </table>
-        <div style="color:red">tips:预结算表中的系数为：困难系统和调整系数相乘的值（1分制）。例如：困难系数1，调整系数0.8，最终系数为0.8</div>
-      </el-form-item>
-      <el-form-item label="预结算合计：">
-        {{ settle }}<el-button @click="getSettle()" type="success" style="margin-left:30px;">计算</el-button>
-      </el-form-item>
-    </el-form>
+          <td>
+            <el-select v-model="work.scaleGrade" :style="{ width: '100%' }"
+              @change="getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType)">
+              <el-option v-for="item in work.workSelect.scaleGradeList" :key="item.value" :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </td>
+          <td>
+            <el-select v-model="work.groundType" :style="{ width: '100%' }"
+              @change="getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType)">
+              <el-option key="一般地类" label="一般地类" value="一般地类">
+              </el-option>
+              <el-option key="复杂地类" label="复杂地类" value="复杂地类">
+              </el-option>
+            </el-select>
+          </td>
+          <td>
+            {{ work.price }} / {{ work.unit }}
+          </td>
+          <td>
+            {{ work.workLoad }}
+          </td>
+          <td>
+            <el-input v-model="work.coefficient" placeholder="请输入系数" @blur="getTotal(work)"></el-input>
+          </td>
+          <td class="workTotal">
+            {{ work.total }}
+          </td>
+        </tr>
+      </table>
+      <div style="color:red">tips:预结算表中的系数为：困难系统和调整系数相乘的值（1分制）。例如：困难系数1，调整系数0.8，最终系数为0.8</div>
+    </el-form-item>
+    <el-form-item label="预结算合计：">
+      {{ settle }}<el-button @click="getSettle()" type="success" style="margin-left:30px;">计算</el-button>
+    </el-form-item>
   </div>
 </template>
 
       obj.workList = this.workList;
       obj.settle = this.settle;
       console.log(this.workList);
-      this.$emit('getSettle',obj)
+      this.$emit('getSettle', obj)
     },
     //数组去重
     setArray(arr) {