工资单新增样式，广东高考理科
This commit is contained in:
小李
parent
3467d370ca
commit
007f0c7238
|
|
@ -14,6 +14,7 @@ import { imgLocal } from '@/utils/common.js';
|
|||
const data = reactive({
|
||||
bgImg:'',
|
||||
form: {
|
||||
subject: '文科',
|
||||
avatar: '',
|
||||
name: '大王',
|
||||
idNumber: '',
|
||||
|
|
@ -39,11 +40,25 @@ import { imgLocal } from '@/utils/common.js';
|
|||
return sum || '';
|
||||
});
|
||||
|
||||
function getSubjectLabels(subject) {
|
||||
const isScience = subject === '理科'
|
||||
return {
|
||||
subject3: isScience ? '物理' : '历史',
|
||||
subject4: isScience ? '化学' : '思想政治',
|
||||
subject5: isScience ? '生物学' : '地理',
|
||||
trackName: isScience ? '物理' : '历史',
|
||||
}
|
||||
}
|
||||
|
||||
const subjectLabels = computed(() => getSubjectLabels(data.form.subject || '文科'))
|
||||
|
||||
const editDialog = reactive({
|
||||
show: false,
|
||||
data: {}
|
||||
});
|
||||
|
||||
const editSubjectLabels = computed(() => getSubjectLabels(editDialog.data.subject || '文科'))
|
||||
|
||||
onMounted(async() => {
|
||||
|
||||
data.bgImg= await imgLocal.getLocalImage('other/score/guandong/guandongbg.png');
|
||||
|
|
@ -55,7 +70,8 @@ import { imgLocal } from '@/utils/common.js';
|
|||
if (cache) {
|
||||
data.form = {
|
||||
...data.form,
|
||||
...cache
|
||||
...cache,
|
||||
subject: cache.subject || '文科'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -66,6 +82,9 @@ import { imgLocal } from '@/utils/common.js';
|
|||
|
||||
function openEditDialog() {
|
||||
editDialog.data = JSON.parse(JSON.stringify(data.form));
|
||||
if (!editDialog.data.subject) {
|
||||
editDialog.data.subject = '文科';
|
||||
}
|
||||
editDialog.show = true;
|
||||
}
|
||||
|
||||
|
|
@ -183,7 +202,7 @@ import { imgLocal } from '@/utils/common.js';
|
|||
</view>
|
||||
<view class="item">
|
||||
<view class="text1">
|
||||
历史
|
||||
{{ subjectLabels.subject3 }}
|
||||
</view>
|
||||
<view class="text2">
|
||||
{{data.form.history}}
|
||||
|
|
@ -191,7 +210,7 @@ import { imgLocal } from '@/utils/common.js';
|
|||
</view>
|
||||
<view class="item">
|
||||
<view class="text1">
|
||||
思想政治
|
||||
{{ subjectLabels.subject4 }}
|
||||
</view>
|
||||
<view class="text2">
|
||||
{{data.form.politics}}
|
||||
|
|
@ -199,7 +218,7 @@ import { imgLocal } from '@/utils/common.js';
|
|||
</view>
|
||||
<view class="item">
|
||||
<view class="text1">
|
||||
地理
|
||||
{{ subjectLabels.subject5 }}
|
||||
</view>
|
||||
<view class="text2">
|
||||
{{data.form.geography}}
|
||||
|
|
@ -207,7 +226,7 @@ import { imgLocal } from '@/utils/common.js';
|
|||
</view>
|
||||
<view class="item">
|
||||
<view class="text1">
|
||||
普通类 (历史)总分
|
||||
普通类 ({{ subjectLabels.trackName }})总分
|
||||
</view>
|
||||
<view class="text2">
|
||||
{{data.form.total}}
|
||||
|
|
@ -215,7 +234,7 @@ import { imgLocal } from '@/utils/common.js';
|
|||
</view>
|
||||
<view class="item">
|
||||
<view class="text1">
|
||||
本科普通类 (历史)总分 (含加分)
|
||||
本科普通类 ({{ subjectLabels.trackName }})总分 (含加分)
|
||||
</view>
|
||||
<view class="text2">
|
||||
{{data.form.undergraduateTotal}}
|
||||
|
|
@ -231,7 +250,7 @@ import { imgLocal } from '@/utils/common.js';
|
|||
</view>
|
||||
<view class="item">
|
||||
<view class="text1">
|
||||
专科普通类 (历史)总分 (含加分)
|
||||
专科普通类 ({{ subjectLabels.trackName }})总分 (含加分)
|
||||
</view>
|
||||
<view class="text2">
|
||||
{{data.form.technicalTotal}}
|
||||
|
|
@ -256,6 +275,15 @@ import { imgLocal } from '@/utils/common.js';
|
|||
<text class="title">编辑成绩信息</text>
|
||||
</view>
|
||||
<view class="editDialog_body">
|
||||
<view class="formItem">
|
||||
<text>科目</text>
|
||||
<view class="subject-options">
|
||||
<view class="subject-option" :class="{ active: editDialog.data.subject === '文科' }"
|
||||
@click="editDialog.data.subject = '文科'">文科</view>
|
||||
<view class="subject-option" :class="{ active: editDialog.data.subject === '理科' }"
|
||||
@click="editDialog.data.subject = '理科'">理科</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text>姓名</text>
|
||||
<input v-model="editDialog.data.name" placeholder="请输入姓名" />
|
||||
|
|
@ -281,23 +309,23 @@ import { imgLocal } from '@/utils/common.js';
|
|||
<input v-model="editDialog.data.english" type="digit" placeholder="请输入英语成绩" />
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text>历史</text>
|
||||
<input v-model="editDialog.data.history" type="digit" placeholder="请输入历史成绩" />
|
||||
<text>{{ editSubjectLabels.subject3 }}</text>
|
||||
<input v-model="editDialog.data.history" type="digit" :placeholder="'请输入' + editSubjectLabels.subject3 + '成绩'" />
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text>思想政治</text>
|
||||
<input v-model="editDialog.data.politics" type="digit" placeholder="请输入思想政治成绩" />
|
||||
<text>{{ editSubjectLabels.subject4 }}</text>
|
||||
<input v-model="editDialog.data.politics" type="digit" :placeholder="'请输入' + editSubjectLabels.subject4 + '成绩'" />
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text>地理</text>
|
||||
<input v-model="editDialog.data.geography" type="digit" placeholder="请输入地理成绩" />
|
||||
<text>{{ editSubjectLabels.subject5 }}</text>
|
||||
<input v-model="editDialog.data.geography" type="digit" :placeholder="'请输入' + editSubjectLabels.subject5 + '成绩'" />
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text>普通类 (历史)总分</text>
|
||||
<text>普通类 ({{ editSubjectLabels.trackName }})总分</text>
|
||||
<text style="flex:1;text-align:right;font-size:28rpx;color:#333;">{{editTotal}}</text>
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text>本科普通类 (历史)总分 (含加分)</text>
|
||||
<text>本科普通类 ({{ editSubjectLabels.trackName }})总分 (含加分)</text>
|
||||
<input v-model="editDialog.data.undergraduateTotal" type="digit" placeholder="请输入本科总分" />
|
||||
</view>
|
||||
<view class="formItem">
|
||||
|
|
@ -305,7 +333,7 @@ import { imgLocal } from '@/utils/common.js';
|
|||
<input v-model="editDialog.data.ranking" type="digit" placeholder="请输入排位" />
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text>专科普通类 (历史)总分 (含加分)</text>
|
||||
<text>专科普通类 ({{ editSubjectLabels.trackName }})总分 (含加分)</text>
|
||||
<input v-model="editDialog.data.technicalTotal" type="digit" placeholder="请输入专科总分" />
|
||||
</view>
|
||||
<view class="formItem">
|
||||
|
|
@ -445,6 +473,27 @@ import { imgLocal } from '@/utils/common.js';
|
|||
color: #333;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.subject-options {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.subject-option {
|
||||
padding: 8rpx 32rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&.active {
|
||||
color: #187AFF;
|
||||
border-color: #187AFF;
|
||||
background-color: rgba(24, 122, 255, 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<view class="footer-box">
|
||||
<view class="btn" v-for="(item, index) in data.typeList" :key="index" :class="{ active: data.type == index }"
|
||||
@click="setType(index)">
|
||||
样式一
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
|
|
|
|||
|
|
@ -3,13 +3,18 @@
|
|||
<!-- 自定义头部导航栏 -->
|
||||
<ZdyNavbar @right-click="edit" isRightButton rightButtonText="编辑" :title="data.navbar.title"
|
||||
:bgColor="data.navbar.bgColor" :isBack="true" />
|
||||
|
||||
<image :src="data.code" mode="widthFix" style="width: 100vw;" @click="previewImage"></image>
|
||||
<view class="footer-box">
|
||||
<view class="btn" v-for="(item, index) in data.typeList" :key="index" :class="{ active: data.type == index }"
|
||||
@click="setType(index)">
|
||||
样式{{index+1}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="button-container">
|
||||
<button class="btn-save-image" @click="saveImage">保存图片</button>
|
||||
</view>
|
||||
<l-painter isCanvasToTempFilePath @success="successImage" @progress="progress" hidden v-if="data.bgImage"
|
||||
:css="`width:${data.width}px;height:${data.width / 4 * 3}px;`">
|
||||
<l-painter isCanvasToTempFilePath @success="successImage" @progress="progress" hidden
|
||||
v-if="data.bgImage&&data.type==0" :css="`width:${data.width}px;height:${data.width / 4 * 3}px;`">
|
||||
<l-painter-view
|
||||
:css="`position: relative;width:${data.width}px;height:${data.width / 4 * 3}px;background-image: url('${data.bgImage}');`">
|
||||
<!-- 头部年月 -->
|
||||
|
|
@ -76,6 +81,123 @@
|
|||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
</l-painter>
|
||||
<l-painter isCanvasToTempFilePath @success="successImage" @progress="progress" hidden v-else-if="data.type==1"
|
||||
:css="`width:375px;height:1150px;`">
|
||||
<l-painter-view :css="`position: relative;width:375px;height:1150px;background-color:#F6F8FA;`">
|
||||
<!-- 头部 -->
|
||||
<l-painter-view
|
||||
css="background-color:#EFEFEF;height:44px;display:flex;justify-content: space-between;align-items: center;padding:0 12px;">
|
||||
<l-painter-image src="/static/image/close.png" css="width: 24px; height: 24px;" />
|
||||
<l-painter-text text="工资条详情" />
|
||||
<l-painter-image src="/static/image/more.png" css="width: 24px; height: 24px;" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="padding:12px 18px;">
|
||||
<l-painter-view css="background-color:#FFFFFF;padding:12px;border-radius: 6px 6px 6px 6px;">
|
||||
<l-painter-view css="display: flex; flex-direction: column;align-items: center;margin-top:23px;">
|
||||
<l-painter-text css="font-size:24px;color:#373737;font-weight: bold;" :text="formatMoney(data.form.money11)" />
|
||||
<l-painter-text css="font-size:12px;color:#767676;" text="实发工资" />
|
||||
<l-painter-image src="/static/image/other/salary/dashed.png"
|
||||
css="margin-top:24px;width:100%; height: 2px;" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:12px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="姓名" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.name + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="任职部门" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.department + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="职务" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.work + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="专员薪酬标准" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.salaryStandard + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="应出勤天数" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.shouldWorkDays + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="事假" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.personalLeave + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="病假" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.sickLeave + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="实出勤天数" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.actualWorkDays + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="补贴" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.subsidy + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="绩效" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.performance + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="应发合计" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.money5 + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="个人社保代扣" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.money6 + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="个人公积金代扣" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.housingFund + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="个人所得税代扣" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.money7 + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="应扣事假" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.deductPersonalLeave + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="应扣病假" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.deductSickLeave + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="其他扣款" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.money9 + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="应扣合计" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.money10 + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="实发工资" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.money11 + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="display:flex;justify-content: space-between;padding:0 24px;margin-top:22px;">
|
||||
<l-painter-text css="font-size:14px;color:#373737;" text="备注" />
|
||||
<l-painter-text css="font-size:14px;color:#373737;" :text="data.form.remark + ''" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="margin-top:24px;">
|
||||
<l-painter-image src="/static/image/other/salary/dashed.png" css="width:100%; height: 2px;" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="margin-top:60px;display:flex;justify-content: space-between;align-items: center;">
|
||||
|
||||
<l-painter-view css="width: 143px;height: 38px;border-radius: 4px 4px 4px 4px;border: 1px solid #3B9BDF;background-color:#3B9BDF;display:flex;justify-content: center;align-items: center;">
|
||||
<l-painter-text css="font-size:14px;color:#ffffff;" text="签名确认" />
|
||||
</l-painter-view>
|
||||
<l-painter-view css="width: 143px;height: 38px;border-radius: 4px 4px 4px 4px;border: 1px solid #3B9BDF;display:flex;justify-content: center;align-items: center;">
|
||||
<l-painter-text css="font-size:14px;color:#3B9BDF;" text="对工资有疑问" />
|
||||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
<l-painter-view v-if="$isVip()" :css="`position: absolute;right:20px;bottom:20px;`">
|
||||
<l-painter-image src="/static/image/other/shuiying.png" css="width: 170rpx; height: 50rpx;" />
|
||||
</l-painter-view>
|
||||
</l-painter-view>
|
||||
</l-painter>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<view v-if="showEditPopup" class="popup-overlay">
|
||||
|
|
@ -85,6 +207,8 @@
|
|||
<text class="popup-close" @click="closeEditPopup">×</text>
|
||||
</view>
|
||||
<view class="popup-body">
|
||||
<!-- 样式1编辑表单 -->
|
||||
<template v-if="data.type == 0">
|
||||
<view class="form-row">
|
||||
<text class="form-label">岗位：</text>
|
||||
<input class="form-input" v-model="editForm.work" type="text" />
|
||||
|
|
@ -104,28 +228,23 @@
|
|||
<text class="section-title">收入部分</text>
|
||||
<view class="form-row">
|
||||
<text class="form-label">基本工资：</text>
|
||||
<input class="form-input" v-model.number="editForm.money1" type="number"
|
||||
@input="calculateValues" />
|
||||
<input class="form-input" v-model.number="editForm.money1" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">绩效工资：</text>
|
||||
<input class="form-input" v-model.number="editForm.money2" type="number"
|
||||
@input="calculateValues" />
|
||||
<input class="form-input" v-model.number="editForm.money2" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">全勤工资：</text>
|
||||
<input class="form-input" v-model.number="editForm.money3" type="number"
|
||||
@input="calculateValues" />
|
||||
<input class="form-input" v-model.number="editForm.money3" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">其他奖金：</text>
|
||||
<input class="form-input" v-model.number="editForm.money4" type="number"
|
||||
@input="calculateValues" />
|
||||
<input class="form-input" v-model.number="editForm.money4" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row form-total">
|
||||
<text class="form-label">合计：</text>
|
||||
<input class="form-input form-total-input" v-model.number="editForm.money5" type="number"
|
||||
disabled />
|
||||
<input class="form-input form-total-input" v-model.number="editForm.money5" type="number" disabled />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -133,36 +252,124 @@
|
|||
<text class="section-title">扣款部分</text>
|
||||
<view class="form-row">
|
||||
<text class="form-label">社保缴纳：</text>
|
||||
<input class="form-input" v-model.number="editForm.money6" type="number"
|
||||
@input="calculateValues" />
|
||||
<input class="form-input" v-model.number="editForm.money6" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">个税缴纳：</text>
|
||||
<input class="form-input" v-model.number="editForm.money7" type="number"
|
||||
@input="calculateValues" />
|
||||
<input class="form-input" v-model.number="editForm.money7" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">考勤扣款：</text>
|
||||
<input class="form-input" v-model.number="editForm.money8" type="number"
|
||||
@input="calculateValues" />
|
||||
<input class="form-input" v-model.number="editForm.money8" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">其他扣款：</text>
|
||||
<input class="form-input" v-model.number="editForm.money9" type="number"
|
||||
@input="calculateValues" />
|
||||
<input class="form-input" v-model.number="editForm.money9" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row form-total">
|
||||
<text class="form-label">合计：</text>
|
||||
<input class="form-input form-total-input" v-model.number="editForm.money10" type="number"
|
||||
disabled />
|
||||
<input class="form-input form-total-input" v-model.number="editForm.money10" type="number" disabled />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row form-total">
|
||||
<text class="form-label">实发工资：</text>
|
||||
<input class="form-input form-total-input" v-model.number="editForm.money11" type="number"
|
||||
disabled />
|
||||
<input class="form-input form-total-input" v-model.number="editForm.money11" type="number" disabled />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 样式2编辑表单 -->
|
||||
<template v-else>
|
||||
<view class="form-row">
|
||||
<text class="form-label">姓名：</text>
|
||||
<input class="form-input" v-model="editForm.name" type="text" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">任职部门：</text>
|
||||
<input class="form-input" v-model="editForm.department" type="text" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">职务：</text>
|
||||
<input class="form-input" v-model="editForm.work" type="text" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">专员薪酬标准：</text>
|
||||
<input class="form-input" v-model.number="editForm.salaryStandard" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">应出勤天数：</text>
|
||||
<input class="form-input" v-model.number="editForm.shouldWorkDays" type="number" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">事假：</text>
|
||||
<input class="form-input" v-model.number="editForm.personalLeave" type="number" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">病假：</text>
|
||||
<input class="form-input" v-model.number="editForm.sickLeave" type="number" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">实出勤天数：</text>
|
||||
<input class="form-input" v-model.number="editForm.actualWorkDays" type="number" />
|
||||
</view>
|
||||
|
||||
<view class="form-section">
|
||||
<text class="section-title">收入部分</text>
|
||||
<view class="form-row">
|
||||
<text class="form-label">补贴：</text>
|
||||
<input class="form-input" v-model.number="editForm.subsidy" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">绩效：</text>
|
||||
<input class="form-input" v-model.number="editForm.performance" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row form-total">
|
||||
<text class="form-label">应发合计：</text>
|
||||
<input class="form-input form-total-input" v-model.number="editForm.money5" type="number" disabled />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-section">
|
||||
<text class="section-title">扣款部分</text>
|
||||
<view class="form-row">
|
||||
<text class="form-label">个人社保代扣：</text>
|
||||
<input class="form-input" v-model.number="editForm.money6" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">个人公积金代扣：</text>
|
||||
<input class="form-input" v-model.number="editForm.housingFund" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">个人所得税代扣：</text>
|
||||
<input class="form-input" v-model.number="editForm.money7" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">应扣事假：</text>
|
||||
<input class="form-input" v-model.number="editForm.deductPersonalLeave" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">应扣病假：</text>
|
||||
<input class="form-input" v-model.number="editForm.deductSickLeave" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">其他扣款：</text>
|
||||
<input class="form-input" v-model.number="editForm.money9" type="number" @input="calculateValues" />
|
||||
</view>
|
||||
<view class="form-row form-total">
|
||||
<text class="form-label">应扣合计：</text>
|
||||
<input class="form-input form-total-input" v-model.number="editForm.money10" type="number" disabled />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row form-total">
|
||||
<text class="form-label">实发工资：</text>
|
||||
<input class="form-input form-total-input" v-model.number="editForm.money11" type="number" disabled />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">备注：</text>
|
||||
<input class="form-input" v-model="editForm.remark" type="text" />
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="popup-footer">
|
||||
<button class="btn-cancel" @click="closeEditPopup">取消</button>
|
||||
|
|
@ -172,8 +379,7 @@
|
|||
</view>
|
||||
<!-- 水印 -->
|
||||
<view v-if="$isVip()">
|
||||
<liu-drag-button :canDocking="false"
|
||||
@clickBtn="$goRechargePage('watermark', 'uni_alipay_other_gongzhitiao')">
|
||||
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_gongzhitiao')">
|
||||
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
||||
</liu-drag-button>
|
||||
</view>
|
||||
|
|
@ -181,37 +387,33 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
// 自定义头部
|
||||
import ZdyNavbar from "@/components/nav-bar/nav-bar.vue"
|
||||
import { imgLocal } from '@/utils/common.js';
|
||||
import {
|
||||
// 自定义头部
|
||||
import ZdyNavbar from "@/components/nav-bar/nav-bar.vue"
|
||||
import {
|
||||
imgLocal
|
||||
} from '@/utils/common.js';
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
nextTick,
|
||||
getCurrentInstance
|
||||
} from "vue";
|
||||
import {
|
||||
} from "vue";
|
||||
import {
|
||||
onLoad,
|
||||
onShow,
|
||||
onReady,
|
||||
onPullDownRefresh,
|
||||
onReachBottom
|
||||
} from "@dcloudio/uni-app";
|
||||
const {
|
||||
} from "@dcloudio/uni-app";
|
||||
const {
|
||||
appContext,
|
||||
proxy
|
||||
} = getCurrentInstance();
|
||||
const data = reactive({
|
||||
navbar: {
|
||||
title: "工资条",
|
||||
bgColor: '#EDEDED',
|
||||
},
|
||||
bgImage:'',
|
||||
width: 375,
|
||||
height: 495,
|
||||
code: '',
|
||||
form: {
|
||||
} = getCurrentInstance();
|
||||
|
||||
function defaultForm(type) {
|
||||
const forms = {
|
||||
0: {
|
||||
work: "销售",
|
||||
name: '小明',
|
||||
money1: 5000,
|
||||
|
|
@ -228,79 +430,139 @@ const data = reactive({
|
|||
year: 2026,
|
||||
month: 1,
|
||||
},
|
||||
1: {
|
||||
name: '校长',
|
||||
department: '市场推广部',
|
||||
work: '推广专员',
|
||||
salaryStandard: 7500,
|
||||
shouldWorkDays: 22,
|
||||
personalLeave: 0,
|
||||
sickLeave: 0,
|
||||
actualWorkDays: 22,
|
||||
subsidy: 500,
|
||||
performance: 1000,
|
||||
money5: 9000,
|
||||
money6: 512,
|
||||
housingFund: 300,
|
||||
money7: 120,
|
||||
deductPersonalLeave: 0,
|
||||
deductSickLeave: 0,
|
||||
money9: 0,
|
||||
money10: 932,
|
||||
money11: 8068,
|
||||
remark: '餐饮饭卡补贴200元',
|
||||
}
|
||||
}
|
||||
|
||||
return forms[type] || forms[0]
|
||||
}
|
||||
|
||||
function mergeForm(raw, type) {
|
||||
return Object.assign(defaultForm(type), raw && typeof raw === 'object' ? raw : {})
|
||||
}
|
||||
|
||||
function formatMoney(val) {
|
||||
const num = Number(val) || 0
|
||||
return '￥' + num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
}
|
||||
const data = reactive({
|
||||
navbar: {
|
||||
title: "工资条",
|
||||
bgColor: '#EDEDED',
|
||||
},
|
||||
type: 0,
|
||||
bgImage: '',
|
||||
width: 375,
|
||||
height: 495,
|
||||
code: '',
|
||||
form: mergeForm(null, 0),
|
||||
textCss: ' letter-spacing: 10px;font-family: "SimHei", "Microsoft YaHei", sans-serif;width:50px;text-align: center;color:#505156;transform: scale(0.4);font-size:26rpx;font-weight: bold; mix-blend-mode: overlay;',
|
||||
textCssMoney: 'font-family: "SimHei", "Microsoft YaHei", sans-serif;width:50px;text-align: center;color:#505156;transform: scale(0.4);font-size:12px;font-weight: bold; mix-blend-mode: overlay;',
|
||||
textCssTime: 'font-family: "SimHei", "Microsoft YaHei", sans-serif;width:50px;text-align: center;color:#505156;transform: scale(0.4);font-size:18px;font-weight: bold; mix-blend-mode: overlay;'
|
||||
})
|
||||
textCssTime: 'font-family: "SimHei", "Microsoft YaHei", sans-serif;width:50px;text-align: center;color:#505156;transform: scale(0.4);font-size:18px;font-weight: bold; mix-blend-mode: overlay;',
|
||||
typeList: ['样式1', '样式2']
|
||||
})
|
||||
|
||||
// 弹窗相关
|
||||
const showEditPopup = ref(false);
|
||||
const editForm = ref({});
|
||||
//
|
||||
function successImage(e){
|
||||
data.code=e
|
||||
}
|
||||
function progress(e){
|
||||
if(e<0.03){
|
||||
// 弹窗相关
|
||||
const showEditPopup = ref(false);
|
||||
const editForm = ref({});
|
||||
|
||||
function setType(index) {
|
||||
uni.setStorageSync("salary" + data.type, data.form)
|
||||
uni.showLoading({
|
||||
title:"生成中"
|
||||
title: "生成中"
|
||||
})
|
||||
data.type = index
|
||||
data.form = mergeForm(uni.getStorageSync("salary" + data.type), data.type)
|
||||
}
|
||||
//
|
||||
function successImage(e) {
|
||||
data.code = e
|
||||
}
|
||||
|
||||
function progress(e) {
|
||||
if (e < 0.03) {
|
||||
uni.showLoading({
|
||||
title: "生成中"
|
||||
})
|
||||
}
|
||||
if(e==1){
|
||||
if (e == 1) {
|
||||
uni.hideLoading()
|
||||
}
|
||||
// console.log(e)
|
||||
}
|
||||
// 打开编辑弹窗
|
||||
function edit() {
|
||||
console.log(data.form)
|
||||
// 复制当前表单数据到编辑表单
|
||||
editForm.value = JSON.parse(JSON.stringify(data.form));
|
||||
// 计算初始值
|
||||
calculateValues();
|
||||
// 显示弹窗
|
||||
showEditPopup.value = true;
|
||||
}
|
||||
}
|
||||
// 打开编辑弹窗
|
||||
function edit() {
|
||||
editForm.value = mergeForm(JSON.parse(JSON.stringify(data.form)), data.type)
|
||||
calculateValues()
|
||||
showEditPopup.value = true
|
||||
}
|
||||
|
||||
// 关闭编辑弹窗
|
||||
function closeEditPopup() {
|
||||
// 关闭编辑弹窗
|
||||
function closeEditPopup() {
|
||||
showEditPopup.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 保存编辑表单
|
||||
function saveEditForm() {
|
||||
// 将编辑后的数据复制回原始表单
|
||||
data.form = JSON.parse(JSON.stringify(editForm.value));
|
||||
// 关闭弹窗
|
||||
showEditPopup.value = false;
|
||||
}
|
||||
// 保存编辑表单
|
||||
function saveEditForm() {
|
||||
calculateValues()
|
||||
uni.showLoading({
|
||||
title: "生成中"
|
||||
})
|
||||
data.form = mergeForm(editForm.value, data.type)
|
||||
uni.setStorageSync("salary" + data.type, data.form)
|
||||
showEditPopup.value = false
|
||||
}
|
||||
|
||||
// 计算值
|
||||
function calculateValues() {
|
||||
// 计算收入合计 (money5 = money1 + money2 + money3 + money4)
|
||||
// 计算值
|
||||
function calculateValues() {
|
||||
if (data.type === 0) {
|
||||
editForm.value.money5 = (editForm.value.money1 || 0) + (editForm.value.money2 || 0) + (editForm.value.money3 ||
|
||||
0) + (editForm.value.money4 || 0);
|
||||
|
||||
// 计算扣款合计 (money10 = money6 + money7 + money8 + money9)
|
||||
0) + (editForm.value.money4 || 0)
|
||||
editForm.value.money10 = (editForm.value.money6 || 0) + (editForm.value.money7 || 0) + (editForm.value.money8 ||
|
||||
0) + (editForm.value.money9 || 0);
|
||||
0) + (editForm.value.money9 || 0)
|
||||
editForm.value.money11 = editForm.value.money5 - editForm.value.money10
|
||||
} else {
|
||||
editForm.value.money5 = (editForm.value.salaryStandard || 0) + (editForm.value.subsidy || 0) + (editForm.value
|
||||
.performance || 0)
|
||||
editForm.value.money10 = (editForm.value.money6 || 0) + (editForm.value.housingFund || 0) + (editForm.value
|
||||
.money7 || 0) + (editForm.value.deductPersonalLeave || 0) + (editForm.value.deductSickLeave || 0) + (
|
||||
editForm.value.money9 || 0)
|
||||
editForm.value.money11 = editForm.value.money5 - editForm.value.money10
|
||||
}
|
||||
}
|
||||
|
||||
// 计算实发工资 (money11 = money5 - money10)
|
||||
editForm.value.money11 = editForm.value.money5 - editForm.value.money10;
|
||||
}
|
||||
|
||||
// 预览图片
|
||||
function previewImage() {
|
||||
// 预览图片
|
||||
function previewImage() {
|
||||
if (data.code) {
|
||||
uni.previewImage({
|
||||
urls: [data.code],
|
||||
current: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 保存图片
|
||||
function saveImage() {
|
||||
// 保存图片
|
||||
function saveImage() {
|
||||
if (data.code) {
|
||||
console.log(data.code)
|
||||
uni.showLoading({
|
||||
|
|
@ -436,9 +698,9 @@ function saveImage() {
|
|||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(async(option) => {
|
||||
onLoad(async (option) => {
|
||||
// 进入工资单页面埋点
|
||||
proxy.$apiUserEvent('all', {
|
||||
type: 'event',
|
||||
|
|
@ -448,37 +710,37 @@ onLoad(async(option) => {
|
|||
})
|
||||
|
||||
data.bgImage = await imgLocal.getLocalImage('other/gzd.png');
|
||||
console.log(data.bgImage)
|
||||
})
|
||||
onReady(() => {
|
||||
data.form = mergeForm(uni.getStorageSync("salary" + data.type), data.type)
|
||||
})
|
||||
onReady(() => {
|
||||
|
||||
})
|
||||
onShow(() => { })
|
||||
onPullDownRefresh(() => {
|
||||
})
|
||||
onShow(() => {})
|
||||
onPullDownRefresh(() => {
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 1000);
|
||||
})
|
||||
onReachBottom(() => {
|
||||
})
|
||||
onReachBottom(() => {
|
||||
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
* {
|
||||
* {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
.aadadad {
|
||||
.aadadad {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.heiti {
|
||||
.heiti {
|
||||
font-family: "SimHei", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗样式 */
|
||||
.popup-overlay {
|
||||
/* 弹窗样式 */
|
||||
.popup-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -489,129 +751,132 @@ onReachBottom(() => {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
.popup-content {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
.popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
.popup-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
.popup-close {
|
||||
font-size: 48rpx;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
.popup-body {
|
||||
padding: 20rpx;
|
||||
}
|
||||
height:60vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
.form-section {
|
||||
margin-bottom: 30rpx;
|
||||
padding: 20rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-label {
|
||||
.form-label {
|
||||
width: 200rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.form-input {
|
||||
.form-input {
|
||||
flex: 1;
|
||||
padding: 15rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 4rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-separator {
|
||||
.form-separator {
|
||||
margin: 0 10rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.form-total {
|
||||
.form-total {
|
||||
margin-top: 10rpx;
|
||||
padding-top: 10rpx;
|
||||
border-top: 1rpx dashed #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.form-total-input {
|
||||
.form-total-input {
|
||||
background-color: #f9f9f9;
|
||||
color: #ff6b35;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
.popup-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx;
|
||||
border-top: 1rpx solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-cancel,
|
||||
.btn-save {
|
||||
width: 48%;
|
||||
.btn-cancel,
|
||||
.btn-save {
|
||||
width: calc(48% - 40rpx);
|
||||
padding: 20rpx;
|
||||
border-radius: 4rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
.btn-cancel {
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
border: 1rpx solid #ddd;
|
||||
}
|
||||
// border: 1rpx solid #ddd;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background-color: #ff6b35;
|
||||
.btn-save {
|
||||
background-color: #187AFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 保存图片按钮 */
|
||||
.button-container {
|
||||
}
|
||||
|
||||
/* 保存图片按钮 */
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-save-image {
|
||||
.btn-save-image {
|
||||
background: linear-gradient(90deg, #187AFF 0%, #3295FC 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
|
|
@ -623,15 +888,46 @@ onReachBottom(() => {
|
|||
transition: all 0.3s ease;
|
||||
text-align: center;
|
||||
min-width: 160rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-save-image:hover {
|
||||
.btn-save-image:hover {
|
||||
transform: translateY(-2rpx);
|
||||
box-shadow: 0 4rpx 12rpx rgba(7, 72, 193, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-save-image:active {
|
||||
.btn-save-image:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2rpx 6rpx rgba(7, 140, 193, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 16px;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
|
||||
padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2
|
||||
|
||||
.btn {
|
||||
font-size: 18px;
|
||||
color: #767676;
|
||||
width: 180rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
background: #FFFFFF;
|
||||
text-align: center;
|
||||
margin: 0 24rpx;
|
||||
border: 2px solid #FFFFFF;
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #1777FF;
|
||||
border: 2px solid #1777FF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 753 B |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in New Issue