提交 2ab43b7a authored 作者: zsf's avatar zsf

预支工资额度设置页面优化,bug修改

上级 1c5b1120
...@@ -61,7 +61,8 @@ ...@@ -61,7 +61,8 @@
} }
.el-form .el-form-item__label { .el-form .el-form-item__label {
font-weight: 700; //font-weight: 700;
font-weight: normal;
} }
.el-dialog:not(.is-fullscreen) { .el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important; margin-top: 6vh !important;
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<p class="tips"> <p class="tips">
<div class="tipscontent"> <div class="tipscontent">
<el-icon size="14px"><WarningFilled/></el-icon> <el-icon size="14px"><WarningFilled/></el-icon>
温馨提醒:在新增手续费的操作中,若最后一个区间的最大值为 0 ,则无法继续新增区间。需知,区间最大值为 0 即代表无限制</div> 温馨提醒:预支工资最大额度不超过1万,阶梯手续费最后一个区间的结束额度请输入0,0代表9999</div>
</p> </p>
<el-form <el-form
...@@ -16,55 +16,62 @@ ...@@ -16,55 +16,62 @@
:rules="rules" :rules="rules"
class="ruleFormRef" class="ruleFormRef"
> >
<el-form-item label="最低预支额度" prop="minAmount">
<el-input v-model="formLabelAlign.minAmount" type="number" oninput="if(value) if(value<0){value='0'}"/> <div class="box">
</el-form-item> <div class="boxTitle">无手续费起始额度</div>
<el-form-item></el-form-item> <el-form-item label="最低预支额度" prop="minAmount">
<el-form-item></el-form-item> <el-input v-model="formLabelAlign.minAmount" type="number" oninput="if(value) if(value<0){value='0'}"/>
<el-form-item label="无手续费当月累计限额" prop="freeAmount"> </el-form-item>
<el-input v-model="formLabelAlign.freeAmount" type="number" oninput="if(value) if(value<0){value='0'}"/> <el-form-item></el-form-item>
</el-form-item> <el-form-item></el-form-item>
<el-form-item></el-form-item> <el-form-item label="无手续费当月累计限额" prop="freeAmount">
<el-form-item label="手续费" style="width: 1010px;" prop="fee"> <el-input v-model="formLabelAlign.freeAmount" type="number" oninput="if(value) if(value<0){value='0'}"/>
<el-table :data="formLabelAlign.fee"> </el-form-item>
<el-table-column label="手续费" align="center" prop="serviceFee" > <el-form-item></el-form-item>
<template #default="{row}"> </div>
{{row.serviceFee + '%'}} <div class="box">
</template> <div class="boxTitle">阶梯手续费</div>
</el-table-column> <el-form-item label="手续费" style="width: 1010px;" prop="fee">
<el-table-column label="金额范围" align="center" prop="minAmount" > <el-table :data="formLabelAlign.fee">
<template #default="{row}"> <el-table-column label="手续费" align="center" prop="serviceFee" >
{{row.minAmount + '-' + row.maxAmount}} <template #default="{row}">
</template> {{row.serviceFee + '%'}}
</el-table-column> </template>
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width"> </el-table-column>
<template #default="scope"> <el-table-column label="金额范围" align="center" prop="minAmount" >
<el-button link type="primary" icon="edit" @click="add(scope)" >编辑</el-button> <template #default="{row}">
<el-button link type="primary" icon="Delete" @click="delFee(scope)">删除</el-button> {{row.minAmount + '-' + row.maxAmount}}
</template> </template>
</el-table-column> </el-table-column>
</el-table> <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
<el-button @click="add()" icon="Plus" style="width: 100%;border: 1px dashed #dcdfe6;margin-top: 6px;">新增</el-button> <template #default="scope">
</el-form-item> <el-button link type="primary" icon="edit" @click="add(scope)" >编辑</el-button>
<el-form-item style="width: 100%;"> <el-button link type="primary" icon="Delete" @click="delFee(scope)">删除</el-button>
<div style="margin: 0 auto;"> </template>
<el-button @click="resetForm">取消</el-button> </el-table-column>
<el-button @click="submitForm" type="primary" >提交</el-button> </el-table>
</div> <el-button @click="add()" icon="Plus" style="width: 100%;border: 1px dashed #dcdfe6;margin-top: 6px;">新增</el-button>
</el-form-item> </el-form-item>
<el-form-item style="width: 100%;">
<div style="margin: 0 auto;">
<el-button @click="resetForm">取消</el-button>
<el-button @click="submitForm" type="primary" >提交</el-button>
</div>
</el-form-item>
</div>
</el-form> </el-form>
<!-- 新增手续费 --> <!-- 新增手续费 -->
<el-dialog :title=title v-model="open" width="500px" append-to-body> <el-dialog :title=title v-model="open" width="500px" append-to-body>
<el-form ref="addDialogRef" :model="addForm" :rules="feeRules" label-width="110"> <el-form ref="addDialogRef" :model="addForm" :rules="feeRules" label-width="110">
<el-form-item label="手续费(%)" prop="serviceFee"> <el-form-item label="手续费(%)" prop="serviceFee">
<el-input v-model="addForm.serviceFee" placeholder="请输入手续费" type="number" oninput="if(value) if(value<0){value='0'} if(value>=10){value='10'}" /> <el-input v-model="addForm.serviceFee" placeholder="请输入手续费" type="number" oninput="if(value) if(value<0){value=0} if(value>=1){value=1}" />
</el-form-item> </el-form-item>
<el-form-item label="最小值" prop="minAmount"> <el-form-item label="起始额度" prop="minAmount">
<el-input v-model="addForm.minAmount" placeholder="请输入最小值" type="number" oninput="if(value) if(value<0){value='0'}" :disabled="disabled"/> <el-input v-model="addForm.minAmount" placeholder="请输入起始额度" type="number" oninput="if(value) if(value<0){value=0} if(value>=9999){value=0}" :disabled="disabled"/>
</el-form-item> </el-form-item>
<el-form-item label="最大值" prop="maxAmount"> <el-form-item label="结束额度" prop="maxAmount">
<el-input v-model="addForm.maxAmount" placeholder="请输入最大值" type="number" oninput="if(value) if(value<0){value='0'}" /> <el-input v-model="addForm.maxAmount" placeholder="请输入结束额度" type="number" maxlength="4" oninput="if(value) if(value<0){value=0} if(value>=9999){value=0}" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
...@@ -108,8 +115,8 @@ const data = reactive({ ...@@ -108,8 +115,8 @@ const data = reactive({
}, },
feeRules:{ feeRules:{
serviceFee: [{required: true,message:"请输入手续费",trigger:"blur"}], serviceFee: [{required: true,message:"请输入手续费",trigger:"blur"}],
minAmount: [{required: true,message:"请输入最小值",trigger:"blur"}], minAmount: [{required: true,message:"请输入起始额度",trigger:"blur"}],
maxAmount: [{required: true,message:"请输入最大值",trigger:"blur"}], maxAmount: [{required: true,message:"请输入结束额度",trigger:"blur"}],
} }
}); });
...@@ -156,13 +163,7 @@ function submitDialog(){ ...@@ -156,13 +163,7 @@ function submitDialog(){
if (!valid) return; if (!valid) return;
let list = formLabelAlign.value.fee || [] let list = formLabelAlign.value.fee || []
//校验最小值、最大值 //校验起始额度、结束额度
if(addForm.value.maxAmount!=0 || currentIndex!=list.length-1){
if(parseFloat(addForm.value.minAmount)>parseFloat(addForm.value.maxAmount)){
return proxy.$modal.msgWarning(`最小值不能大于最大值!`);
}
}
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
if (list[i].serviceFee == addForm.value.serviceFee && list[i].id!=addForm.value.id) { if (list[i].serviceFee == addForm.value.serviceFee && list[i].id!=addForm.value.id) {
return proxy.$modal.msgWarning(`手续费已存在!`); return proxy.$modal.msgWarning(`手续费已存在!`);
...@@ -170,8 +171,20 @@ function submitDialog(){ ...@@ -170,8 +171,20 @@ function submitDialog(){
} }
if(title.value==='新增手续费'){ if(title.value==='新增手续费'){
if(addForm.value.maxAmount!=0){
if(parseFloat(addForm.value.minAmount)>parseFloat(addForm.value.maxAmount)){
return proxy.$modal.msgWarning(`起始额度不能大于结束额度!`);
}
}
formLabelAlign.value.fee.push({...addForm.value}) formLabelAlign.value.fee.push({...addForm.value})
}else { }else {
if(addForm.value.maxAmount!=0 || currentIndex!=list.length-1){
if(parseFloat(addForm.value.minAmount)>parseFloat(addForm.value.maxAmount)){
return proxy.$modal.msgWarning(`起始额度不能大于结束额度!`);
}
}
//当前数据的上一条数据 //当前数据的上一条数据
let lastData = formLabelAlign.value.fee[currentIndex-1]; let lastData = formLabelAlign.value.fee[currentIndex-1];
//当前数据的下一条数据 //当前数据的下一条数据
...@@ -183,17 +196,17 @@ function submitDialog(){ ...@@ -183,17 +196,17 @@ function submitDialog(){
}else { }else {
if(currentIndex!==0){ if(currentIndex!==0){
if(addForm.value.minAmount==0){ if(addForm.value.minAmount==0){
return proxy.$modal.msgWarning('最小值不能为0'); return proxy.$modal.msgWarning('起始额度不能为0');
} }
if(thisData.minAmount != addForm.value.minAmount){ if(thisData.minAmount != addForm.value.minAmount){
if(addForm.value.minAmount==1){ if(addForm.value.minAmount==1){
return proxy.$modal.msgWarning('最小值不能为1'); return proxy.$modal.msgWarning('起始额度不能为1');
} }
if(parseFloat(addForm.value.minAmount)<parseFloat(lastData.minAmount)){ if(parseFloat(addForm.value.minAmount)<parseFloat(lastData.minAmount)){
return proxy.$modal.msgWarning(`最小值不能小于上条手续费的最小值:`+lastData.minAmount); return proxy.$modal.msgWarning(`起始额度不能小于上条手续费的起始额度:`+lastData.minAmount);
}else if(parseFloat(addForm.value.minAmount)>parseFloat(lastData.maxAmount)){ }else if(parseFloat(addForm.value.minAmount)>parseFloat(lastData.maxAmount)){
return proxy.$modal.msgWarning(`最小值不能大于上条手续费的最大值:`+lastData.maxAmount); return proxy.$modal.msgWarning(`起始额度不能大于上条手续费的结束额度:`+lastData.maxAmount);
}else { }else {
lastData.maxAmount = addForm.value.minAmount - 1; lastData.maxAmount = addForm.value.minAmount - 1;
} }
...@@ -203,7 +216,7 @@ function submitDialog(){ ...@@ -203,7 +216,7 @@ function submitDialog(){
if(currentIndex!==list.length-1){ if(currentIndex!==list.length-1){
if(thisData.maxAmount != addForm.value.maxAmount){ if(thisData.maxAmount != addForm.value.maxAmount){
if(parseFloat(addForm.value.maxAmount)>parseFloat(nextData.maxAmount)){ if(parseFloat(addForm.value.maxAmount)>parseFloat(nextData.maxAmount)){
return proxy.$modal.msgWarning(`最大值不能大于下条手续费的最大值:`+nextData.maxAmount); return proxy.$modal.msgWarning(`结束额度不能大于下条手续费的结束额度:`+nextData.maxAmount);
}else { }else {
nextData.minAmount = parseFloat(addForm.value.maxAmount) + 1 nextData.minAmount = parseFloat(addForm.value.maxAmount) + 1
} }
...@@ -228,11 +241,11 @@ function delFee(row){ ...@@ -228,11 +241,11 @@ function delFee(row){
if(formLabelAlign.value.fee.length-1 === row.$index){ if(formLabelAlign.value.fee.length-1 === row.$index){
formLabelAlign.value.fee.splice(row.$index, 1) formLabelAlign.value.fee.splice(row.$index, 1)
}else { }else {
//自动修改下一条数据的最小值 //自动修改下一条数据的起始额度
if(row.$index==0){ if(row.$index==0){
formLabelAlign.value.fee[row.$index+1].minAmount = 0; formLabelAlign.value.fee[row.$index+1].minAmount = 0;
}else { }else {
formLabelAlign.value.fee[row.$index+1].minAmount = formLabelAlign.value.fee[row.$index-1].maxAmount formLabelAlign.value.fee[row.$index+1].minAmount = formLabelAlign.value.fee[row.$index-1].maxAmount + 1
} }
formLabelAlign.value.fee.splice(row.$index, 1) formLabelAlign.value.fee.splice(row.$index, 1)
} }
...@@ -246,6 +259,9 @@ function submitForm(){ ...@@ -246,6 +259,9 @@ function submitForm(){
proxy.$refs.ruleFormRef.validate(async (valid) => { proxy.$refs.ruleFormRef.validate(async (valid) => {
if (!valid) return; if (!valid) return;
const submitForm = {...formLabelAlign.value} const submitForm = {...formLabelAlign.value}
if(submitForm.fee[submitForm.fee.length-1].maxAmount!=0){
return proxy.$modal.msgWarning('阶梯手续费最后一个区间的结束额度请输入0');
}
submitForm.fee = JSON.stringify(submitForm.fee) submitForm.fee = JSON.stringify(submitForm.fee)
if(formLabelAlign.value.id){ if(formLabelAlign.value.id){
salaryAdvanceUpdate({...submitForm,code:code,rsapId:formLabelAlign.value.id}).then(res => { salaryAdvanceUpdate({...submitForm,code:code,rsapId:formLabelAlign.value.id}).then(res => {
...@@ -310,4 +326,16 @@ function getSalaryAdvance(){ ...@@ -310,4 +326,16 @@ function getSalaryAdvance(){
.tipscontent{ .tipscontent{
margin-left: 7.4%; margin-left: 7.4%;
} }
.box{
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
margin: 0% -4% 1% -4%;
padding-top:2%;
background-color: white;
width: 950%;
}
.boxTitle{
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
font-size: 16px;
margin: 0% auto 2% 3%;
}
</style> </style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论