工资表数据、工资汇总数据、工资信息表导入

src/App.vue

@@ -17,13 +17,15 @@ export default {
   },
 
   async created() {
-    const userId = this.$route.query.uid;
-    const roleId = this.$route.query.rid;
-    const params = { userId };
-    await this.getUserId(params);
-    await this.setRoleId(roleId);
-    await this.getAllMembers({ projectId: this.$route.query.pid });
-    this.setProjectId(this.$route.query.pid);
+    this.$router.onReady(async () => {
+      const userId = this.$route.query.uid;
+      const roleId = this.$route.query.rid;
+      const params = { userId };
+      await this.getUserId(params);
+      await this.setRoleId(roleId);
+      await this.getAllMembers({ projectId: this.$route.query.pid });
+      this.setProjectId(this.$route.query.pid);
+    });
   },
 
   methods: {

src/config/api.js

@@ -19,3 +19,6 @@ export const clockExport = params => axios.post(`${defaultwbs}/clock/export`, pa
 
 // 查询所有成员工资信息
 export const queryMemberSalary = params => axios.post(`${defaultwbs}/salary/queryMemberSalary`, params);
+
+// 查询某个员工工资
+export const getMemberSalary = params => axios.post(`${defaultwbs}/salary/getMemberSalary`, params);

src/views/Salary/Salary.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="salary-detail">
     <div class="salary-all text-center flex flex-col justify-center">
-      <div class="salary-num white--text">5000.00</div>
+      <div class="salary-num white--text">{{ Number(!salaryData.realSalary ? 0 : salaryData.realSalary).toFixed(2) }}</div>
       <div class="salary-title font-12">实发金额（元）</div>
     </div>
 
@@ -9,64 +9,176 @@
       <div class="one-level mt-3 px-4 white">
         <div class="one-level-box flex justify-between items-center h-48 border-b">
           <div>固定工资</div>
-          <div class="flex items-center">
-            <span>5000</span>
-            <!-- <a-icon class="icon" type="right" /> -->
-            <a-icon class="icon" type="down" />
+          <div class="flex items-center" @click="isShow.isShow1 = isShow.isShow1 ? false : true">
+            <span>{{ !salaryData.fixedSalary ? 0 : salaryData.fixedSalary }}</span>
+            <a-icon v-if="!isShow.isShow1" class="icon" type="right" />
+            <a-icon v-else class="icon" type="down" />
           </div>
         </div>
 
-        <div class="two-level">
-          <div class="two-level-box flex justify-between items-center h-48 border-b">
-            <div>基本工资</div>
-            <div class="flex items-center">
-              <span>4000</span>
-              <!-- <a-icon class="icon" type="right" /> -->
-              <a-icon class="icon" type="down" />
+        <template v-if="isShow.isShow1">
+          <div class="two-level">
+            <div class="two-level-box flex justify-between items-center h-48 border-b">
+              <div>基本工资</div>
+              <div class="flex items-center" @click.stop="basicShow.isShow1 = basicShow.isShow1 ? false : true">
+                <span>{{ !fixedSalary.basicWage ? 0 : fixedSalary.basicWage }}</span>
+                <a-icon v-if="!basicShow.isShow1" class="icon" type="right" />
+                <a-icon v-else class="icon" type="down" />
+              </div>
+            </div>
+
+            <div class="three-level px-4" v-if="basicShow.isShow1">
+              <div class="three-level-box flex justify-between items-center h-48">
+                <div>应出勤天数</div>
+                <div class="flex items-center">
+                  <span>{{ !basicSalary.shouldAttendanceDay ? 0 : basicSalary.shouldAttendanceDay }}</span>
+                </div>
+              </div>
+
+              <div class="three-level-box flex justify-between items-center h-48">
+                <div>实际出勤天数</div>
+                <div class="flex items-center">
+                  <span>{{ !basicSalary.realAttendanceDay ? 0 : basicSalary.realAttendanceDay }}</span>
+                </div>
+              </div>
+
+              <div class="three-level-box flex justify-between items-center h-48">
+                <div>弹性天数</div>
+                <div class="flex items-center">
+                  <span>{{ !basicSalary.elasticityDay ? 0 : basicSalary.elasticityDay }}</span>
+                </div>
+              </div>
+
+              <div class="three-level-box flex justify-between items-center h-48">
+                <div>请假天数</div>
+                <div class="flex items-center">
+                  <span>{{ !basicSalary.askForLeaveDay ? 0 : basicSalary.askForLeaveDay }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="two-level">
+            <div class="two-level-box flex justify-between items-center h-48 border-b">
+              <div>岗位工资</div>
+              <div class="flex items-center" @click.stop="basicShow.isShow2 = basicShow.isShow2 ? false : true">
+                <span>{{ !fixedSalary.positionWage ? 0 : fixedSalary.positionWage }}</span>
+                <a-icon v-if="!basicShow.isShow2" class="icon" type="right" />
+                <a-icon v-else class="icon" type="down" />
+              </div>
             </div>
+
+            <div class="three-level px-4" v-if="basicShow.isShow2 && positionSalary">
+              <div class="three-level-box flex justify-between items-center h-48" v-for="(val, key) in positionSalary" :key="key">
+                <div>{{ key }}</div>
+                <div class="flex items-center">
+                  <span>{{ val }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="two-level">
+            <div class="two-level-box flex justify-between items-center h-48 border-b">
+              <div>工龄工资</div>
+              <div class="flex items-center" @click.stop="basicShow.isShow3 = basicShow.isShow3 ? false : true">
+                <span>{{ !fixedSalary.workingTimeWage ? 0 : fixedSalary.workingTimeWage }}</span>
+                <a-icon v-if="!basicShow.isShow3" class="icon" type="right" />
+                <a-icon v-else class="icon" type="down" />
+              </div>
+            </div>
+
+            <div class="three-level px-4" v-if="basicShow.isShow3 && workingTimeSalary">
+              <div class="three-level-box flex justify-between items-center h-48" v-for="(val, key) in workingTimeSalary" :key="key">
+                <div>{{ key }}</div>
+                <div class="flex items-center">
+                  <span>{{ val }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <div class="one-level mt-3 px-4 white" @click.stop="isShow.isShow2 = isShow.isShow2 ? false : true">
+        <div class="one-level-box flex justify-between items-center h-48 border-b">
+          <div>绩效收入</div>
+          <div class="flex items-center">
+            <span>{{ !salaryData.performance ? 0 : salaryData.performance }}</span>
+            <a-icon v-if="!isShow.isShow2" class="icon" type="right" />
+            <a-icon v-else class="icon" type="down" />
           </div>
+        </div>
 
-          <div class="three-level px-4">
-            <div class="three-level-box flex justify-between items-center h-48">
-              <div>应出勤天数</div>
-              <div class="flex items-center"><span>22</span></div>
+        <template v-if="isShow.isShow2">
+          <div class="two-level">
+            <div class="two-level-box flex justify-between items-center h-48 border-b">
+              <div>360考核</div>
+              <div class="flex items-center" @click.stop="performanceShow.isShow1 = performanceShow.isShow1 ? false : true">
+                <span>{{ !performanceSalary.assess ? 0 : performanceSalary.assess }}</span>
+                <a-icon v-if="!performanceShow.isShow1" class="icon" type="right" />
+                <a-icon v-else class="icon" type="down" />
+              </div>
             </div>
+          </div>
 
-            <div class="three-level-box flex justify-between items-center h-48">
-              <div>实际出勤天数</div>
-              <div class="flex items-center"><span>18</span></div>
+          <div class="two-level">
+            <div class="two-level-box flex justify-between items-center h-48 border-b">
+              <div>项目奖金</div>
+              <div class="flex items-center" @click.stop="performanceShow.isShow2 = performanceShow.isShow2 ? false : true">
+                <span>{{ !performanceSalary.projectBonus ? 0 : performanceSalary.projectBonus }}</span>
+                <a-icon v-if="!performanceShow.isShow2" class="icon" type="right" />
+                <a-icon v-else class="icon" type="down" />
+              </div>
             </div>
+          </div>
 
-            <div class="three-level-box flex justify-between items-center h-48">
-              <div>弹性天数</div>
-              <div class="flex items-center"><span>2</span></div>
+          <div class="two-level">
+            <div class="two-level-box flex justify-between items-center h-48 border-b">
+              <div>提成</div>
+              <div class="flex items-center" @click.stop="performanceShow.isShow3 = performanceShow.isShow3 ? false : true">
+                <span>{{ !performanceSalary.pushMoney ? 0 : performanceSalary.pushMoney }}</span>
+                <a-icon v-if="!performanceShow.isShow3" class="icon" type="right" />
+                <a-icon v-else class="icon" type="down" />
+              </div>
             </div>
+          </div>
 
-            <div class="three-level-box flex justify-between items-center h-48">
-              <div>请假天数</div>
-              <div class="flex items-center"><span>2</span></div>
+          <div class="two-level">
+            <div class="two-level-box flex justify-between items-center h-48 border-b">
+              <div>补助</div>
+              <div class="flex items-center" @click.stop="performanceShow.isShow4 = performanceShow.isShow4 ? false : true">
+                <span>{{ !performanceSalary.subsidy ? 0 : performanceSalary.subsidy }}</span>
+                <a-icon v-if="!performanceShow.isShow4" class="icon" type="right" />
+                <a-icon v-else class="icon" type="down" />
+              </div>
             </div>
           </div>
+        </template>
+      </div>
+
+      <div class="one-level mt-3 px-4 white">
+        <div class="one-level-box flex justify-between items-center h-48 border-b">
+          <div>主人翁收入</div>
+          <div class="flex items-center" @click="isShow.isShow3 = isShow.isShow3 ? false : true">
+            <span>{{ !salaryData.stockRights ? 0 : salaryData.stockRights }}</span>
+            <a-icon v-if="!isShow.isShow3" class="icon" type="right" />
+            <a-icon v-else class="icon" type="down" />
+          </div>
         </div>
 
-        <div class="two-level">
+        <div class="two-level" v-if="isShow.isShow3">
           <div class="two-level-box flex justify-between items-center h-48 border-b">
-            <div>岗位工资</div>
+            <div>期权置换</div>
             <div class="flex items-center">
-              <span>500</span>
-              <a-icon class="icon" type="right" />
-              <!-- <a-icon class="icon" type="down" /> -->
+              <span>{{ !stockRightsSalary.sharePtion ? 0 : stockRightsSalary.sharePtion }}</span>
             </div>
           </div>
-        </div>
 
-        <div class="two-level">
           <div class="two-level-box flex justify-between items-center h-48 border-b">
-            <div>工龄工资</div>
+            <div>分红</div>
             <div class="flex items-center">
-              <span>500</span>
-              <a-icon class="icon" type="right" />
-              <!-- <a-icon class="icon" type="down" /> -->
+              <span>{{ !stockRightsSalary.receiveDividends ? 0 : stockRightsSalary.receiveDividends }}</span>
             </div>
           </div>
         </div>
@@ -74,65 +186,63 @@
 
       <div class="one-level mt-3 px-4 white">
         <div class="one-level-box flex justify-between items-center h-48 border-b">
-          <div>固定工资</div>
+          <div>应发工资</div>
           <div class="flex items-center">
-            <span>5000</span>
-            <!-- <a-icon class="icon" type="right" /> -->
-            <a-icon class="icon" type="down" />
+            <span>{{ !salaryData.shouldSalary ? 0 : salaryData.shouldSalary }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="one-level mt-3 px-4 white">
+        <div class="one-level-box flex justify-between items-center h-48 border-b">
+          <div>社保支出</div>
+          <div class="flex items-center" @click="isShow.isShow4 = isShow.isShow4 ? false : true">
+            <span>{{ !salaryData.socialSecurity ? 0 : salaryData.socialSecurity }}</span>
+            <a-icon v-if="!isShow.isShow4" class="icon" type="right" />
+            <a-icon v-else class="icon" type="down" />
           </div>
         </div>
 
-        <div class="two-level">
+        <div class="two-level" v-if="isShow.isShow4">
           <div class="two-level-box flex justify-between items-center h-48 border-b">
-            <div>基本工资</div>
+            <div>医疗保险</div>
             <div class="flex items-center">
-              <span>4000</span>
-              <!-- <a-icon class="icon" type="right" /> -->
-              <a-icon class="icon" type="down" />
+              <span>{{ !socialSecuritySalary.medicalInsurance ? 0 : socialSecuritySalary.medicalInsurance }}</span>
             </div>
           </div>
 
-          <div class="three-level px-4">
-            <div class="three-level-box flex justify-between items-center h-48">
-              <div>应出勤天数</div>
-              <div class="flex items-center"><span>22</span></div>
-            </div>
-
-            <div class="three-level-box flex justify-between items-center h-48">
-              <div>实际出勤天数</div>
-              <div class="flex items-center"><span>18</span></div>
+          <div class="two-level-box flex justify-between items-center h-48 border-b">
+            <div>生育保险</div>
+            <div class="flex items-center">
+              <span>{{ !socialSecuritySalary.maternityInsurance ? 0 : socialSecuritySalary.maternityInsurance }}</span>
             </div>
+          </div>
 
-            <div class="three-level-box flex justify-between items-center h-48">
-              <div>弹性天数</div>
-              <div class="flex items-center"><span>2</span></div>
+          <div class="two-level-box flex justify-between items-center h-48 border-b">
+            <div>工伤保险</div>
+            <div class="flex items-center">
+              <span>{{ !socialSecuritySalary.employmentInjuryInsurance ? 0 : socialSecuritySalary.employmentInjuryInsurance }}</span>
             </div>
+          </div>
 
-            <div class="three-level-box flex justify-between items-center h-48">
-              <div>请假天数</div>
-              <div class="flex items-center"><span>2</span></div>
+          <div class="two-level-box flex justify-between items-center h-48 border-b">
+            <div>养老保险</div>
+            <div class="flex items-center">
+              <span>{{ !socialSecuritySalary.endowmentInsurance ? 0 : socialSecuritySalary.endowmentInsurance }}</span>
             </div>
           </div>
-        </div>
 
-        <div class="two-level">
           <div class="two-level-box flex justify-between items-center h-48 border-b">
-            <div>岗位工资</div>
+            <div>失业保险</div>
             <div class="flex items-center">
-              <span>500</span>
-              <a-icon class="icon" type="right" />
-              <!-- <a-icon class="icon" type="down" /> -->
+              <span>{{ !socialSecuritySalary.unemploymentInsurance ? 0 : socialSecuritySalary.unemploymentInsurance }}</span>
             </div>
           </div>
-        </div>
 
-        <div class="two-level">
           <div class="two-level-box flex justify-between items-center h-48 border-b">
-            <div>工龄工资</div>
+            <div>住房公积金</div>
             <div class="flex items-center">
-              <span>500</span>
-              <a-icon class="icon" type="right" />
-              <!-- <a-icon class="icon" type="down" /> -->
+              <span>{{ !socialSecuritySalary.housingFund ? 0 : socialSecuritySalary.housingFund }}</span>
             </div>
           </div>
         </div>
@@ -140,11 +250,18 @@
 
       <div class="one-level mt-3 px-4 white">
         <div class="one-level-box flex justify-between items-center h-48 border-b">
-          <div>绩效收入</div>
+          <div>扣税</div>
+          <div class="flex items-center">
+            <span>{{ !salaryData.personalTax ? 0 : salaryData.personalTax }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="one-level mt-3 px-4 white">
+        <div class="one-level-box flex justify-between items-center h-48 border-b">
+          <div>实发工资</div>
           <div class="flex items-center">
-            <span>1000</span>
-            <a-icon class="icon" type="right" />
-            <!-- <a-icon class="icon" type="down" /> -->
+            <span>{{ !salaryData.realSalary ? 0 : salaryData.realSalary }}</span>
           </div>
         </div>
       </div>
@@ -162,15 +279,54 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import { getMemberSalary } from '@/config/api';
+
 export default {
   data() {
     return {
       ModalText: '',
       visible: false,
       confirmLoading: false,
+      salaryData: {},
+      fixedSalary: {}, // 固定工资
+      basicSalary: {}, // 基本工资
+      positionSalary: {}, // 岗位工资
+      workingTimeSalary: {}, // 工龄工资
+      performanceSalary: {}, // 绩效工资
+      socialSecuritySalary: {}, // 社保
+      stockRightsSalary: {}, // 主人翁收入
+      isShow: {
+        isShow1: false,
+        isShow2: false,
+        isShow3: false,
+        isShow4: false,
+      },
+      basicShow: {
+        isShow1: false,
+        isShow2: false,
+        isShow3: false,
+      },
+      performanceShow: {
+        isShow1: false,
+        isShow2: false,
+        isShow3: false,
+        isShow4: false,
+      },
     };
   },
 
+  computed: mapState('home', ['projectId', 'roleId']),
+
+  mounted() {
+    this.timer = setInterval(async () => {
+      if (this.projectId) {
+        clearInterval(this.timer);
+        await this.getMemberSalary();
+      }
+    }, 300);
+  },
+
   methods: {
     showModal() {
       this.visible = true;
@@ -188,6 +344,31 @@ export default {
     handleCancel(e) {
       this.visible = false;
     },
+
+    // 获取员工工资信息
+    async getMemberSalary() {
+      const params = { param: { projectId: this.projectId } };
+
+      try {
+        const res = await getMemberSalary(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.salaryData = data;
+          this.fixedSalary = data.fixedSalaryOption; // 固定工资
+          this.basicSalary = data.fixedSalaryOption.basic; // 基本工资 -- 考勤明细
+          this.positionSalary = data.fixedSalaryOption.position; // 岗位工资明细
+          this.workingTimeSalary = data.fixedSalaryOption.workingTime; // 工龄工资明细
+          this.performanceSalary = data.performanceOption; // 绩效工资明细
+          this.socialSecuritySalary = data.socialSecurityOption; // 社保明细
+          this.stockRightsSalary = data.stockRightsOption; // 主人翁收入明细
+        } else {
+          this.$message.error(msg || '获取失败');
+          throw msg;
+        }
+      } catch (error) {
+        throw error || '获取失败';
+      }
+    },
   },
 };
 </script>

src/views/SalarySummary/SalarySummary.vue

@@ -263,6 +263,7 @@ export default {
       ],
       monthStartTime: '',
       monthEndTime: '',
+      dataSalary: [],
     };
   },
 
@@ -338,22 +339,26 @@ export default {
 
     // 获取所有成员薪资信息
     async getQueryMemberSalary() {
-      const params = { param: { projectId, startTime: this.monthStartTime, endTime: this.monthEndTime } };
+      const params = { param: { projectId: this.projectId, startTime: this.monthStartTime, endTime: this.monthEndTime } };
 
       try {
         const res = await queryMemberSalary(params);
         const { code, msg, data } = res.data;
         if (code === 200) {
-          data.forEach(item => {
-            item.recordList.forEach(clcok => {
-              clcok.morningVisible = false;
-              clcok.nightVisible = false;
-              clcok.showNightTime = false;
-              clcok.showMorningTime = false;
-            });
+          let dataSalary = [];
+          data.forEach((item, index) => {
+            let obj = {};
+            obj.key = index + 1;
+            obj.name = item.memberName;
+            obj.salary = item.realSalary;
+            obj.department = '技术';
+            obj.position = '前端';
+            obj.payrollCard = '111111111111111111';
+
+            dataSalary.push(obj);
           });
-
-          this.clockInfos = [...data];
+          console.log(dataSalary);
+          this.data_all = dataSalary;
         } else {
           this.$message.error(msg || '获取失败');
           throw msg;