Merge branch 'master' of http://oa.sccehui.com:6101/cmc-coding/cmc-oa

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

  * @Author: ysh
  * @Date: 2024-03-25 15:05:59
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-03-25 17:28:17
+ * @LastEditTime: 2024-03-26 17:51:38
 -->
 <template>
   <div>
       </div>
       <div class="title">
         <div class="title-text">新增预算</div>
-        <div class="title-tips">请精准填写预算标准，对应的人员、设备、车辆可直接选择生成固定成本</div>
+        <div class="title-tips">
+          请精准填写预算标准，对应的人员、设备、车辆可直接选择生成固定成本
+        </div>
       </div>
     </div>
     <div class="add-main">
       <el-steps :active="activeStep" align-center finish-status="success">
-        <el-step title="选择项目" description="选择想要生成预算的项目"></el-step>
-        <el-step title="选择参与人员" description="选择参与的人员，得到人员预算"></el-step>
-        <el-step title="选择车辆和设备" description="选择车辆和设备，得到对应预算"></el-step>
-        <el-step title="其他预算开支项" description="项目预算其他项"></el-step>
-        <el-step title="生成预算表" description="生成最终的项目预算表"></el-step>
+        <el-step
+          title="选择项目"
+          description="选择想要生成预算的项目"
+        ></el-step>
+        <el-step
+          title="选择参与人员"
+          description="选择参与的人员，得到人员预算"
+        ></el-step>
+        <el-step
+          title="选择车辆和设备"
+          description="选择车辆和设备，得到对应预算"
+        ></el-step>
+        <el-step
+          title="其他预算开支项"
+          description="包含绩效预算和其他预算"
+        ></el-step>
+        <el-step
+          title="生成预算表"
+          description="生成最终的项目预算表"
+        ></el-step>
       </el-steps>
       <!-- 选择项目 -->
       <div class="project" v-if="activeStep == 0">
-        <el-form ref="form1" :model="projectForm" :rules="projectRule" label-width="120px">
+        <el-form
+          ref="form1"
+          :model="projectForm"
+          :rules="projectRule"
+          label-width="120px"
+        >
           <el-form-item label="项目编号：" prop="projectNumber">
-            <div style="display: flex;">
-              <el-input v-model="projectForm.projectNumber" placeholder="请选择项目编号" disabled style="width:300px" />
+            <div style="display: flex">
+              <el-input
+                v-model="projectForm.projectNumber"
+                placeholder="请选择项目编号"
+                disabled
+                style="width: 300px"
+              />
               <el-button @click="openProject = true">选择</el-button>
             </div>
           </el-form-item>
           <el-form-item label="项目概况：">
             <table border="1">
               <tr>
-                <td style="width:250px;">工作内容</td>
+                <td style="width: 250px">工作内容</td>
                 <td>等级或比例尺</td>
                 <td>单位</td>
                 <td>工作量</td>
-                <td style="width:100px;">要求完成时间</td>
+                <td style="width: 100px">要求完成时间</td>
                 <td>备注</td>
               </tr>
               <tr v-for="(work, index) in workList" :key="index">
           </el-form-item>
         </el-form>
       </div>
+
       <!-- 选择参与人员 -->
       <div class="staff" v-if="activeStep == 1">
         <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.projectNumber
+          }}</el-breadcrumb-item>
           <el-breadcrumb-item>{{ projectForm.projectName }}</el-breadcrumb-item>
-          <el-breadcrumb-item>{{ projectForm.projectLeader }}</el-breadcrumb-item>
+          <el-breadcrumb-item>{{
+            projectForm.projectLeader
+          }}</el-breadcrumb-item>
         </el-breadcrumb>
-        <el-form ref="form2" :model="peopleForm">
+        <el-form ref="form2" :model="peopleForm" style="padding: 20px 100px 0">
           <el-form-item label="选择人员：">
-
+            <span v-if="chooseUser.length != 0">
+              <el-tag
+                type="success"
+                v-for="item in chooseUser"
+                style="margin: 5px"
+                >{{ item.nickName }}</el-tag
+              >
+            </span>
+            <el-button
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              @click="openPeople = true"
+              size="mini"
+              >选择</el-button
+            >
+          </el-form-item>
+          <el-form-item label="人员预算：" v-if="chooseUser.length != 0">
+            <table border="1">
+              <tr>
+                <td>姓名</td>
+                <td>岗位工资</td>
+                <td>人员成本(天)</td>
+                <td>进出场单价</td>
+                <td>预算天数</td>
+                <td style="width: 100px">总额</td>
+                <td></td>
+              </tr>
+              <tr v-for="user in chooseUser" :key="user.userId">
+                <td>{{ user.nickName }}</td>
+                <td>{{ user.salary.salary }}</td>
+                <td>{{ parseFloat(user.salary.salary / 31).toFixed(2) }}</td>
+                <td>
+                  <el-input
+                    v-model="user.inOutPrice"
+                    placeholder="请输入进出场单价"
+                  ></el-input>
+                </td>
+                <td>
+                  <el-input
+                    v-model="user.days"
+                    placeholder="请输入天数"
+                  ></el-input>
+                </td>
+                <td class="staffCost">{{ user.staffCost }}</td>
+                <td>
+                  <el-button type="text" @click="calculateUserTotal(user)"
+                    >计算</el-button
+                  >
+                </td>
+              </tr>
+              <tr>
+                <td colspan="5">合计</td>
+                <td>{{ budgetForm.staffCost }}</td>
+                <td>
+                  <el-button type="text" @click="calculateTotal"
+                    >计算</el-button
+                  >
+                </td>
+              </tr>
+            </table>
           </el-form-item>
         </el-form>
       </div>
+
       <el-divider></el-divider>
       <div class="btn">
-        <el-button @click="activeStep -= 1" :disabled="activeStep == 0">上一步</el-button>
-        <el-button @click="confirmStep" type="primary" v-if="activeStep < 4">下一步</el-button>
-        <el-button @click="activeStep += 1" type="primary" v-if="activeStep == 4">生成预算表</el-button>
+        <el-button @click="activeStep -= 1" :disabled="activeStep == 0"
+          >上一步</el-button
+        >
+        <el-button @click="confirmStep" type="primary" v-if="activeStep < 4"
+          >下一步</el-button
+        >
+        <el-button
+          @click="activeStep += 1"
+          type="primary"
+          v-if="activeStep == 4"
+          >生成预算表</el-button
+        >
       </div>
     </div>
 
-    <el-dialog title="选择项目" :visible.sync="openProject" width="700px" append-to-body>
+    <!-- 项目选择对话框 -->
+    <el-dialog
+      title="选择项目"
+      :visible.sync="openProject"
+      width="700px"
+      append-to-body
+    >
       <el-form :inline="true">
         <el-form-item label="项目编号" prop="projectNumber">
-          <el-input v-model="queryParams.projectNumber" placeholder="请输入项目编号" clearable
-            @keyup.enter.native="getProjectList" />
+          <el-input
+            v-model="queryParams.projectNumber"
+            placeholder="请输入项目编号"
+            clearable
+            @keyup.enter.native="getProjectList"
+          />
         </el-form-item>
-        <el-form-item style="margin-bottom:0;display:none;">
+        <el-form-item style="margin-bottom: 0; display: none">
           <el-input></el-input>
         </el-form-item>
 
           <el-button @click="getProjectList" type="primary">搜索</el-button>
         </el-form-item>
       </el-form>
-      <el-table :data="projectList" style="margin-top: 30px;" height="600px">
-        <el-table-column type="index" width="50">
-        </el-table-column>
+      <el-table :data="projectList" style="margin-top: 30px" height="600px">
+        <el-table-column type="index" width="50"> </el-table-column>
         <el-table-column prop="isFinshed" label="状态" width="90px">
           <template slot-scope="scope">
-            <el-tag :type="scope.row.isFinished === '0' ? 'success' : 'warning'" disable-transitions>
-              {{ scope.row.isFinished == '0' ? '进行中' : '已结束' }}
+            <el-tag
+              :type="scope.row.isFinished === '0' ? 'success' : 'warning'"
+              disable-transitions
+            >
+              {{ scope.row.isFinished == "0" ? "进行中" : "已结束" }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="项目编号" align="center" key="projectNumber" prop="projectNumber" />
-        <el-table-column label="项目名称" align="center" key="projectName" prop="projectName" width="200px" />
-        <el-table-column label="项目负责人" align="center" key="projectLeaderName" prop="projectLeaderName" />
+        <el-table-column
+          label="项目编号"
+          align="center"
+          key="projectNumber"
+          prop="projectNumber"
+        />
+        <el-table-column
+          label="项目名称"
+          align="center"
+          key="projectName"
+          prop="projectName"
+          width="200px"
+        />
+        <el-table-column
+          label="项目负责人"
+          align="center"
+          key="projectLeaderName"
+          prop="projectLeaderName"
+        />
         <el-table-column align="center">
           <template slot-scope="scope">
-            <el-button size="mini" type="text" @click="chooseProject(scope.row)">选择</el-button>
+            <el-button size="mini" type="text" @click="chooseProject(scope.row)"
+              >选择</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
-      <div style="text-align: right;">
-        <el-pagination @current-change="getProjectList" :current-page.sync="queryParams.pageNum"
-          :page-size="queryParams.pageSize" layout="total, prev, pager, next" :total="projectTotal">
+      <div style="text-align: right">
+        <el-pagination
+          @current-change="getProjectList"
+          :current-page.sync="queryParams.pageNum"
+          :page-size="queryParams.pageSize"
+          layout="total, prev, pager, next"
+          :total="projectTotal"
+        >
         </el-pagination>
       </div>
     </el-dialog>
+    <!-- 选择人员对话框 -->
+    <el-dialog
+      title="选择人员"
+      :visible.sync="openPeople"
+      width="700px"
+      append-to-body
+    >
+      <choosePeople @chooseUser="getChooseUser"></choosePeople>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listProject } from "@/api/oa/project/project";
+import choosePeople from "./components/choosePeople.vue";
+import { getSalary } from "@/api/oa/staff/salary";
 export default {
+  components: {
+    choosePeople,
+  },
   data() {
     return {
       activeStep: 0,
       form: {},
+      budgetForm: {}, // 预算表
       openProject: false,
       projectList: [],
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        projectNumber: '',
-        projectLeader: '',
+        projectNumber: "",
+        projectLeader: "",
         projectLeaderName: undefined,
-        projectName: '',
+        projectName: "",
       },
       projectTotal: 0,
       projectForm: {},
       workList: [
         {
-          content: '实景三维制作（影像分辨率优于5cm）',
-          scale: '1:500',
-          workload: '81',
-          unit: 'km²',
-          deadline: '2024-01-31',
-          remark: '此为备注此为备注此为备注此为备注此为备注此为备注'
-        }
+          content: "实景三维制作（影像分辨率优于5cm）",
+          scale: "1:500",
+          workload: "81",
+          unit: "km²",
+          deadline: "2024-01-31",
+          remark: "此为备注此为备注此为备注此为备注此为备注此为备注",
+        },
       ],
       projectRule: {
-        projectNumber: [{ required: true, message: '请选择项目编号', trigger: 'blur' }],
+        projectNumber: [
+          { required: true, message: "请选择项目编号", trigger: "blur" },
+        ],
       },
-      peopleForm: {}
-    }
+      peopleForm: {},
+      openPeople: false,
+      chooseUser: [],
+    };
   },
   created() {
     this.getProjectList();
   },
   methods: {
     goBack() {
-      let obj = { path: "/budget/add" }
+      let obj = { path: "/budget/add" };
       this.$tab.closeOpenPage(obj);
-      this.$router.push({ path: '/budget' });
+      this.$router.push({ path: "/budget" });
     },
     // 查询项目列表
     getProjectList() {
-      listProject(this.queryParams).then(response => {
+      listProject(this.queryParams).then((response) => {
         this.projectList = response.rows;
         this.projectTotal = response.total;
-      })
+      });
     },
     // 选择项目
     chooseProject(row) {
       this.projectForm = row;
-      this.openProject = false
+      this.budgetForm.projectId = row.projectId;
+      this.openProject = false;
     },
     confirmStep() {
       if (this.projectForm.projectNumber == undefined) {
         this.activeStep = 0;
         this.$message.error(`请选择项目编号！`);
       }
-      if(this.projectForm.projectNumber){
+      if (this.projectForm.projectNumber) {
         this.activeStep += 1;
       }
-    }
+    },
+    getChooseUser(val) {
+      this.chooseUser = val;
+      this.openPeople = false;
+    },
+    getUserSalary(userId) {
+      getSalary(userId).then((res) => {
+        console.log(res);
+        return res.data.salary;
+      });
+    },
+    // 计算单个人员的成本
+    calculateUserTotal(user) {
+      console.log(user);
+      if (user.inOutPrice == undefined) {
+        this.$message.error("请输入进出场单价");
+        return;
+      }
+      let total =
+        (parseFloat(user.salary.salary / 30).toFixed(2) +
+          Number(user.inOutPrice)) *
+        Number(user.days);
+      this.$set(user, "staffCost", total.toFixed(2));
+    },
+    // 合计
+    calculateTotal() {
+      const elements = document.querySelectorAll(".staffCost");
+      let sum = 0;
+      if (elements.length > 0) {
+        for (let e of elements) {
+          sum = sum + Number(e.innerHTML);
+        }
+        console.log(sum);
+        this.$set(this.budgetForm, "staffCost", sum.toFixed(2));
+      }
+    },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
   height: 110px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #EBEEF5;
+  border-bottom: 1px solid #ebeef5;
 
   .back {
     margin-left: 30px;
     padding-top: 50px;
     width: 1000px;
     margin: 0 auto;
-
-    .info-item {
-      line-height: 30px;
-      color: #5A5A5A;
-      font-size: 14px;
-      padding-left: 30px;
-      display: flex;
-      align-items: start;
-
-      .info-icon {
-        font-size: 20px;
-        margin-right: 10px;
-        vertical-align: middle;
-      }
-
-      .item-label {
-        max-width: 120px;
-        display: flex;
-        align-items: center;
-        font-size: 16px;
-      }
-
-      .item-value {
-        max-width: 260px;
-        // display: inline-block;
-      }
-    }
   }
 
   .staff {
     margin: 0 auto;
     padding-top: 50px;
   }
-
 }
 
 .btn {
 
 table {
   /*居中*/
-  margin: 0 auto;
+  // margin: 0 auto;
   /*边框*/
   /* border: 1px solid black; */
   text-align: center;
 
 ::v-deep .el-input.is-disabled .el-input__inner {
   background-color: #fff;
-  color: #5A5A5A;
+  color: #5a5a5a;
 }
-</style>
+</style>