Skip to content

hrs_app_h5 / bill

Go to a project
Commit dd8fef32 by 展昭
Options

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

parent 048c6b91
Inline Side-by-side
Showing with 288 additions and 139 deletions
.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 0 → 100644
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/index.vue
......@@ -29,7 +29,7 @@
</div>
<div class="paid">
<span>待付金额</span>
<i class="paid_color">{{data.toBePayAmount}}</i>
<i class="paid_color">{{data.waitPay}}</i>
</div>
</div>
<div class="header_info">
......@@ -58,52 +58,52 @@
</div>
<div class="list_contenter">
<!--社保代理-->
<!--社保代理 insurance-->
<div class="list">
<div class="list_title" @click="toPage(4)">
<div class="list_title" @click="toPage(41)">
<div class="title">社保代理</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>应付金额</span>
<i>{{data.socical.toPayAmount}}</i>
<i>{{data.socical.total}}</i>
</p>
<p>
<span>待付金额</span>
<i>{{data.socical.toBePayAmount}}</i>
<i>{{data.socical.waitPay}}</i>
</p>
</div>
<!--公积金代理-->
<!--公积金代理 accumulation-->
<div class="list">
<div class="list_title" @click="toPage(4)">
<div class="list_title" @click="toPage(42)">
<div class="title">公积金代理</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>应付金额</span>
<i>{{data.fund.toPayAmount}}</i>
<i>{{data.fund.total}}</i>
</p>
<p>
<span>待付金额</span>
<i>{{data.fund.toBePayAmount}}</i>
<i>{{data.fund.waitPay}}</i>
</p>
</div>
<!--个税代理-->
<!--个税代理 income-->
<div class="list">
<div class="list_title" @click="toPage(4)">
<div class="list_title" @click="toPage(43)">
<div class="title">个税代理</div>
<van-icon name="arrow" class="arrow_right" />
</div>
<p>
<span>应付金额</span>
<i>{{data.tax.toPayAmount}}</i>
<i>{{data.tax.total}}</i>
</p>
<p>
<span>待付金额</span>
<i>{{data.tax.toBePayAmount}}</i>
<i>{{data.tax.waitPay}}</i>
</p>
</div>
<!--服务费-->
<!--服务费 service-->
<div class="list">
<div class="list_title" @click="toPage(5)">
<div class="title">服务费</div>
......@@ -111,14 +111,14 @@
</div>
<p>
<span>应付金额</span>
<i>{{data.service.toPayAmount}}</i>
<i>{{data.service.total}}</i>
</p>
<p>
<span>待付金额</span>
<i>{{data.service.toBePayAmount}}</i>
<i>{{data.service.waitPay}}</i>
</p>
</div>
<!--会员年费-->
<!--会员年费 vip-->
<div class="list">
<div class="list_title" @click="toPage(6)">
<div class="title">会员年费</div>
......@@ -126,14 +126,14 @@
</div>
<p>
<span>应付金额</span>
<i>{{data.annual.toPayAmount}}</i>
<i>{{data.annual.total}}</i>
</p>
<p>
<span>待付金额</span>
<i>{{data.annual.toBePayAmount}}</i>
<i>{{data.annual.waitPay}}</i>
</p>
</div>
<!--其他事务办理-->
<!--其他事务办理 general-->
<div class="list">
<div class="list_title" @click="toPage(7)">
<div class="title">其他事务办理</div>
......@@ -141,11 +141,11 @@
</div>
<p>
<span>应付金额</span>
<i>{{data.other.toPayAmount}}</i>
<i>{{data.other.total}}</i>
</p>
<p>
<span>待付金额</span>
<i>{{data.other.toBePayAmount}}</i>
<i>{{data.other.waitPay}}</i>
</p>
</div>
</div>
......@@ -172,39 +172,53 @@ export default {
title: "人事服务",
currentPerIndex: 0,
currentPerId: 0,
currentPerName: "",
period: [{ name: "" }],
data: {
balance: 0,
toBePayAmount: 0,
waitPay: 0,
hosting: {},
socical: {
toPayAmount: 0,
toBePayAmount: 0
total: 0,
waitPay: 0,
paid: 0,
list: {}
},
fund: {
toPayAmount: 0,
toBePayAmount: 0
total: 0,
waitPay: 0,
paid: 0,
list: {}
},
tax: {
toPayAmount: 0,
toBePayAmount: 0
total: 0,
waitPay: 0,
paid: 0,
list: {}
},
service: {
toPayAmount: 0,
toBePayAmount: 0
total: 0,
waitPay: 0,
paid: 0,
list: {}
},
annual: {
toPayAmount: 0,
toBePayAmount: 0
total: 0,
waitPay: 0,
paid: 0,
list: {}
},
other: {
toPayAmount: 0,
toBePayAmount: 0
total: 0,
waitPay: 0,
paid: 0,
list: {}
}
}
};
},
computed: {
...mapGetters(["getCurPerIndex"]),
hideL() {
if (this.currentPerIndex == 0) {
return true;
......@@ -221,7 +235,14 @@ export default {
}
},
methods: {
...mapActions(["loadBillPeriod", "loadBillSummary", "loadBillHosting"]),
...mapActions([
"loadBillPeriod",
"loadBillSummary",
"loadBillHosting",
"loadReceiptList",
"savePeriodIndex",
"savePerBeginDate"
]),
toPage(flag) {
switch (flag) {
case 1: // 充值
......@@ -238,11 +259,45 @@ export default {
}
});
break;
case 4: // 社保/公积金/个税
this.$router.push({ name: "sociallist" });
case 41: // 社保
this.$router.push({
name: "sociallist",
query: {
type: "insurance",
currentPerName: this.currentPerName,
currentPerId: this.currentPerId
}
});
break;
case 42: // 公积金
this.$router.push({
name: "sociallist",
query: {
type: "accumulation",
currentPerName: this.currentPerName,
currentPerId: this.currentPerId
}
});
break;
case 43: // 个税
this.$router.push({
name: "sociallist",
query: {
type: "income",
currentPerName: this.currentPerName,
currentPerId: this.currentPerId
}
});
break;
case 5: // 服务费
this.$router.push({ name: "servicefee" });
this.$router.push({
name: "sociallist",
query: {
type: "service",
currentPerName: this.currentPerName,
currentPerId: this.currentPerId
}
});
break;
case 6: // 会员年费
this.$router.push({ name: "annualfee" });
......@@ -256,33 +311,29 @@ export default {
if (dirct === "left") {
if (this.currentPerIndex > 0) {
this.currentPerIndex--;
this.currentPerId = this.period[this.currentPerIndex].id;
}
}
if (dirct === "right") {
if (this.currentPerIndex < this.period.length - 1) {
this.currentPerIndex++;
this.currentPerId = this.period[this.currentPerIndex].id;
}
}
const curPer = this.period[this.currentPerIndex];
this.savePeriodIndex(this.currentPerIndex);
this.savePerBeginDate(curPer.beginDate);
this.currentPerId = curPer.id;
this.currentPerName = curPer.name;
this.loadBillSummaryData(this.currentPerId);
this.loadBillHostingData(this.currentPerId);
this.loadReceiptListData(this.currentPerId);
},
async loadPeriodData() {
let flag = false;
await this.loadBillPeriod(this.usermemberId).then(
await this.loadBillPeriod().then(
data => {
this.period = data;
const nowDate = dayjs().format("YYYY年M月账户");
for (let index = 0; index < this.period.length; index++) {
const element = this.period[index];
if (element.name.indexOf(nowDate) > -1) {
this.currentPerIndex = index;
this.currentPerId = element.id;
break;
}
}
flag = true;
this.initMonth();
},
err => {
console.log(err);
......@@ -291,6 +342,7 @@ export default {
if (flag) {
await this.loadBillSummaryData(this.currentPerId);
await this.loadBillHostingData(this.currentPerId);
await this.loadReceiptListData(this.currentPerId);
}
},
async loadBillSummaryData(accountId) {
......@@ -300,7 +352,7 @@ export default {
await this.loadBillSummary(param).then(
data => {
this.data.balance = data.balance;
this.data.toBePayAmount = data.waitPay;
this.data.waitPay = data.waitPay;
},
err => {
console.log(err);
......@@ -319,6 +371,42 @@ export default {
console.log(err);
}
);
},
async loadReceiptListData(accountId) {
await this.loadReceiptList(accountId).then(
data => {
this.data.socical = data.insurance; // 社保
this.data.fund = data.accumulation; // 公积金
this.data.tax = data.income; // 个税
this.data.service = data.service; // 服务费
this.data.annual = data.vip; // 会员
this.data.other = data.general; // 其他
},
err => {
console.log(err);
}
);
},
initMonth() {
const localPerIndex = this.getCurPerIndex;
if (localPerIndex) {
this.currentPerIndex = localPerIndex;
this.currentPerId = this.period[localPerIndex].id;
this.currentPerName = this.period[localPerIndex].name;
this.savePerBeginDate(this.period[localPerIndex].beginDate);
} else {
const nowDate = dayjs().format("YYYY-MM");
for (let index = 0; index < this.period.length; index++) {
const element = this.period[index];
if (element.beginDate.indexOf(nowDate) > -1) {
this.currentPerIndex = index;
this.currentPerId = element.id;
this.currentPerName = element.name;
this.savePerBeginDate(element.beginDate);
break;
}
}
}
}
},
async mounted() {
......
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) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment