社保/公积金/个税/服务费 列表页面数据对接

.env.development

 VUE_APP_OIDC_CONFIG = '{ "authority": "http://106.120.107.150:5000", "client_id": "teamix-team-manager-web-pc", "client_secret": "123456", "redirect_uri": "http://localhost:8080/callback.html", "response_type": "id_token token", "scope": "workapps.client api.workapps.user api.workapps.org api.workapps.open openid","post_logout_redirect_uri":"http://localhost:8080", "silent_redirect_uri": "http://localhost:8080/silent-renew-oidc.html", "automaticSilentRenew": true,"accessTokenExpiringNotificationTime":60,"filterProtocolClaims":true,"loadUserInfo":true }'
 
-VUE_APP_API_BASEURL = 'http://10.10.10.44:8086/api/hrs/'
+VUE_APP_API_BASEURL = 'http://organization.test.hrs100.cn/api/hrs/'
 
 VUE_APP_PUBLIC_DIR='/'

README.md

@@ -19,5 +19,6 @@ npm run build
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
 ### api swagger
-[api swagger](http://10.10.10.44:8086/swagger-ui.html#/)
-usermemberId  206484
\ No newline at end of file
+[api swagger][http://organization.test.hrs100.cn:18080/swagger-ui.html?urls.primaryName=%E4%BC%81%E4%B8%9A%E4%BF%A1%E6%81%AF%E7%AE%A1%E7%90%86%E6%8E%A5%E5%8F%A3V1.0-HRS100%E4%B8%9A%E5%8A%A1%E8%B4%A6%E5%8D%95%E7%9B%B8%E5%85%B3#/%E4%B8%9A%E5%8A%A1%E8%B4%A6%E5%8D%95-H5%E7%9B%B8%E5%85%B3%E6%8E%A5%E5%8F%A3]
+
+usermemberId  206484  1822782
\ No newline at end of file

src/api/Bill/index.js

@@ -3,8 +3,9 @@ import urls from "./urls";
 import token from "../../store/modules/token"
 
 const usermemberId = token.state.usermemberId;
-export default {
+console.log('userid', usermemberId);
 
+export default {    
     // get数据
     getPeriod() {
         let url = urls.getPeriod(usermemberId);

src/store/index.js

@@ -4,6 +4,7 @@ import { vuexOidcCreateStoreModule } from 'vuex-oidc';
 import oidcSettings from "../utils/oidcSettings";
 import bill from './modules/bill'
 import token from './modules/token'
+import any from './modules/any'
 
 Vue.use(Vuex)
 
@@ -11,6 +12,7 @@ export default new Vuex.Store({
   modules: {
     bill,
     token,
+    any,
     oidc: vuexOidcCreateStoreModule(oidcSettings)
   }
 });

src/store/modules/any.js

+import types from "../types";
+
+let currentPerIndex = 0
+let beginDate = ''
+
+const state = { currentPerIndex, beginDate }
+
+const getters = {
+    getCurPerIndex(state) {
+        const temp = localStorage.getItem('currentPerIndex');
+        if (temp) {
+            state.currentPerIndex = temp
+        }
+        return state.currentPerIndex;
+    },
+    getBeginDate(state) {
+        const temp = localStorage.getItem('beginDate');
+        if (temp) {
+            state.beginDate = temp
+        }
+        return state.beginDate;
+    },
+
+}
+
+const mutations = {
+    [types.CHANGE_CURRENT_PERIOD](state, currentPerIndex) {
+        state.currentPerIndex = currentPerIndex;
+        try {
+            localStorage.setItem("currentPerIndex", currentPerIndex);
+        } catch (error) { }
+    },
+    [types.CHANGE_CURRENT_BEGINDATE](state, beginDate) {
+        state.beginDate = beginDate;
+        try {
+            localStorage.setItem("beginDate", beginDate);
+        } catch (error) { }
+    }
+}
+
+const actions = {
+    savePeriodIndex({ commit }, currentPerIndex) {
+        commit(types.CHANGE_CURRENT_PERIOD, currentPerIndex);
+    },
+    savePerBeginDate({ commit }, beginDate) {
+        commit(types.CHANGE_CURRENT_BEGINDATE, beginDate);
+    }
+}
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions
+}
\ No newline at end of file

src/store/modules/bill.js

@@ -36,7 +36,7 @@ const getters = {
         }
         return state.record;
     },
-    getReceiptList(state) {
+    getReceiptDetail(state) {
         const temp = localStorage.getItem('receiptDetail');
         if (temp) {
             state.receiptDetail = JSON.parse(temp);
@@ -80,13 +80,13 @@ const mutations = {
     [types.CHANGE_RECEIPT_LIST](state, receiptList) {
         state.receiptList = receiptList;
         try {
-            //localStorage.setItem("receiptList", JSON.stringify(receiptList));
+            localStorage.setItem("receiptList", JSON.stringify(receiptList));
         } catch (error) { }
     },
     [types.CHANGE_RECEIPT_DETAIL](state, receiptDetail) {
         state.receiptDetail = receiptDetail;
         try {
-            //localStorage.setItem("receiptDetail", JSON.stringify(receiptDetail));
+            localStorage.setItem("receiptDetail", JSON.stringify(receiptDetail));
         } catch (error) { }
     },
 
@@ -153,9 +153,9 @@ const actions = {
                 });
         });
     },
-    loadReceiptList({ commit }, param) {
+    loadReceiptList({ commit }, accountId) {
         return new Promise((resolve, reject) => {
-            api.getReceiptList(param.accountId)
+            api.getReceiptList(accountId)
                 .then(res => {
                     if (res && res.status) {
                         receiptList = res.data;

src/store/modules/token.js

-let usermemberId = '206484'
+let usermemberId = '1822782'
 
 const state = { usermemberId }
 

src/store/types.js

@@ -6,12 +6,16 @@ const CHANGE_BILL_HOSTING = 'CHANGE_BILL_HOSTING';
 const CHANGE_RECORD = 'CHANGE_RECORD';
 const CHANGE_RECEIPT_LIST = 'CHANGE_RECEIPT_LIST';
 const CHANGE_RECEIPT_DETAIL = 'CHANGE_RECEIPT_DETAIL';
+const CHANGE_CURRENT_PERIOD='CHANGE_CURRENT_PERIOD';
+const CHANGE_CURRENT_BEGINDATE="CHANGE_CURRENT_BEGINDATE";
 export default {
     CHANGE_BILL_PERIOD,
     CHANGE_BILL_SUMMARY,
     CHANGE_BILL_HOSTING,
     CHANGE_RECORD,
     CHANGE_RECEIPT_LIST,
-    CHANGE_RECEIPT_DETAIL
+    CHANGE_RECEIPT_DETAIL,
+    CHANGE_CURRENT_PERIOD,
+    CHANGE_CURRENT_BEGINDATE,
 }
 

src/views/Bill/sociallist.vue

@@ -7,87 +7,26 @@
       <div class="header">
         <div class="content_left">
           <div class="title_info">应付总额</div>
-          <div class="title_money">440.00</div>
+          <div class="title_money">{{data.payment}}</div>
         </div>
         <div class="content_right">
           <div class="title_info">待付金额</div>
-          <div class="title_money">200.00</div>
+          <div class="title_money">{{data.waitPayment}}</div>
         </div>
       </div>
       <div class="box">
-        <!--社保代缴-->
-        <div class="list">
-          <div class="list_title" @click="toPage(1)">
-            <div class="title">社保代缴</div>
+        <div class="list" v-for="(item,index) in data.list" :key="index">
+          <div class="list_title" @click="toPage(index)">
+            <div class="title">{{item.groupName}}</div>
             <van-icon name="arrow" class="arrow_right" />
           </div>
           <p>
             <span>应付金额</span>
-            <i>600.00</i>
+            <i>{{item.payment}}</i>
           </p>
           <p>
             <span>待付金额</span>
-            <i>600.00</i>
-          </p>
-        </div>
-        <!--社保补差-->
-        <div class="list">
-          <div class="list_title">
-            <div class="title">社保补差</div>
-            <van-icon name="arrow" class="arrow_right" />
-          </div>
-          <p>
-            <span>应付金额</span>
-            <i>600.00</i>
-          </p>
-          <p>
-            <span>待付金额</span>
-            <i>600.00</i>
-          </p>
-        </div>
-        <!--社保退费-->
-        <div class="list">
-          <div class="list_title">
-            <div class="title">社保退费</div>
-            <van-icon name="arrow" class="arrow_right" />
-          </div>
-          <p>
-            <span>应付金额</span>
-            <i>600.00</i>
-          </p>
-          <p>
-            <span>待付金额</span>
-            <i>600.00</i>
-          </p>
-        </div>
-        <!--保证金扣费-->
-        <div class="list">
-          <div class="list_title">
-            <div class="title">保证金扣费</div>
-            <van-icon name="arrow" class="arrow_right" />
-          </div>
-          <p>
-            <span>应付金额</span>
-            <i>600.00</i>
-          </p>
-          <p>
-            <span>待付金额</span>
-            <i>600.00</i>
-          </p>
-        </div>
-        <!--保证金退费-->
-        <div class="list">
-          <div class="list_title">
-            <div class="title">保证金退费</div>
-            <van-icon name="arrow" class="arrow_right" />
-          </div>
-          <p>
-            <span>应付金额</span>
-            <i>600.00</i>
-          </p>
-          <p>
-            <span>待付金额</span>
-            <i>600.00</i>
+            <i>{{item.waitPayment}}</i>
           </p>
         </div>
       </div>
@@ -98,6 +37,8 @@
 <script>
 import { Header } from "@/components";
 import { Icon } from "vant";
+import { mapGetters, mapActions } from "vuex";
+import dayjs from "dayjs";
 export default {
   components: {
     Header,
@@ -105,14 +46,58 @@ export default {
   },
   data() {
     return {
-      title: "11月社保代理"
+      title: "",
+      type: "",
+      currentPerId: 0,
+      data: {
+        payment: 0,
+        waitPayment: 0,
+        list: [{ groupName: "", payment: 0, waitPayment: 0, list: [] }]
+      }
     };
   },
+  computed: {
+    ...mapGetters(["getBeginDate"])
+  },
   methods: {
-    toPage(flag) {
-      switch (flag) {
-        case 1:
-          this.$router.push({ name: "socialpayment" });
+    ...mapActions(["loadReceiptDetail"]),
+    toPage() {
+      this.$router.push({
+        name: "socialpayment",
+        param: { type: this.type, currentPerId: this.currentPerId }
+      });
+    },
+    getData() {
+      this.loadReceiptDetail({
+        accountId: this.currentPerId,
+        type: this.type
+      }).then(
+        data => {
+          this.data = data;
+        },
+        err => {
+          console.log(err);
+        }
+      );
+    },
+    makeTitle() {
+      let month = dayjs(this.getBeginDate).format("M");
+      // insurance=社保
+      // accumulation=公积金
+      // income=个税
+      // service=服务费
+      switch (this.type) {
+        case "insurance":
+          this.title = month + "月" + "社保" + "代理";
+          break;
+        case "accumulation":
+          this.title = month + "月" + "公积金" + "代理";
+          break;
+        case "income":
+          this.title = month + "月" + "个税" + "代理";
+          break;
+        case "service":
+          this.title = month + "月" + "服务费" + "代理";
           break;
       }
     },
@@ -122,6 +107,10 @@ export default {
   },
   mounted() {
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
+    this.type = this.$route.query.type;
+    this.currentPerId = this.$route.query.currentPerId;
+    this.makeTitle();
+    this.getData();
   }
 };
 </script>

src/views/Bill/socialpayment.vue

@@ -47,6 +47,7 @@
 <script>
 import { Header } from "@/components";
 import { Icon } from "vant";
+import { mapGetters } from "vuex";
 export default {
   components: {
     Header,
@@ -54,9 +55,13 @@ export default {
   },
   data() {
     return {
-      title: "11月社保代理"
+      title: "11月社保代理",
+      data: {}
     };
   },
+  computed: {
+    ...mapGetters(["getReceiptDetail"])
+  },
   methods: {
     navLeftArrowClick() {
       this.$router.go(-1);
@@ -64,6 +69,8 @@ export default {
   },
   mounted() {
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
+    this.data = this.getReceiptDetail;
+    console.log("data=", JSON.stringify(this.data));
   }
 };
 </script>

src/views/Trusteeship/index.vue

@@ -163,7 +163,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(["loadBillHosting"]),
+    ...mapActions(["loadBillHosting","savePeriodIndex"]),
     getData() {
       this.currentPer = this.$route.query.currentPerIndex;
       this.currentPerId = this.$route.query.currentPerId;
@@ -192,6 +192,7 @@ export default {
           this.currentPerId = this.period[this.currentPer].id;
         }
       }
+      this.savePeriodIndex(this.currentPerIndex);
       this.loadBillHostingData(this.currentPerId);
     },
     async loadBillHostingData(accountId) {