之前的添加信息都是使用基本的表單，在工資賬套的添加中使用到了步驟條，實現了比較高級的分步填寫表單並最終提交的效果
<template>
<div>
<el-container>
<el-header style="display: flex;justify-content: space-between;align-items: center;padding-left: 0px">
<el-button @click="dialogVisible = true" icon="el-icon-plus" type="primary" size="mini">添加賬套</el-button>
<el-button size="mini" type="success" @click="loadSalaryCfg" icon="el-icon-refresh"></el-button>
</el-header>
<el-main style="padding-left: 0px;padding-top: 0px">
<div>
<el-table
:data="salaries"
stripe
v-loading="tableLoading"
size="mini"
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column
type="selection"
width="30">
</el-table-column>
<el-table-column
width="120"
prop="name"
label="賬套名稱">
</el-table-column>
<el-table-column
width="70"
prop="basicSalary"
label="基本工資">
</el-table-column>
<el-table-column
width="70"
prop="trafficSalary"
label="交通補助">
</el-table-column>
<el-table-column
width="70"
prop="lunchSalary"
label="午餐補助">
</el-table-column>
<el-table-column
prop="bonus"
width="70"
label="獎金">
</el-table-column>
<el-table-column
width="100"
label="啟用時間">
<template slot-scope="scope">{{ scope.row.createDate | formatDate}}</template>
</el-table-column>
<el-table-column label="養老金" align="center">
<el-table-column
prop="pensionPer"
width="70"
label="比率">
</el-table-column>
<el-table-column
width="70"
prop="pensionBase"
label="基數">
</el-table-column>
</el-table-column>
<el-table-column label="醫療保險" align="center">
<el-table-column
width="70"
prop="medicalPer"
label="比率">
</el-table-column>
<el-table-column
prop="medicalBase"
width="70"
label="基數">
</el-table-column>
</el-table-column>
<el-table-column label="公積金" align="center">
<el-table-column
width="70"
prop="accumulationFundPer"
label="比率">
</el-table-column>
<el-table-column
prop="accumulationFundBase"
width="70"
label="基數">
</el-table-column>
</el-table-column>
<el-table-column label="操作" align="center">
<el-table-column label="編輯" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯
</el-button>
</template>
</el-table-column>
<el-table-column label="刪除" align="center">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除
</el-button>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
<div style="text-align: left;margin-top: 10px" v-if="salaries!=0">
<el-button type="danger" round size="mini" :disabled="multipleSelection.length==0" @click="deleteAll">批量刪除
</el-button>
</div>
</el-main>
</el-container>
<div style="text-align: left">
<el-dialog
title="添加工資賬套"
:visible.sync="dialogVisible"
width="50%"
@close="emptySalary"
:close-on-click-modal="false">
<div style="display: flex;justify-content: flex-start;">
<el-steps :active="index" direction="vertical">
<el-step title="基本工資" size="mini"></el-step>
<el-step title="交通補助"></el-step>
<el-step title="午餐補助"></el-step>
<el-step title="獎金"></el-step>
<el-step title="養老金"></el-step>
<el-step title="醫療保險"></el-step>
<el-step title="公積金"></el-step>
<el-step title="啟用時間"></el-step>
</el-steps>
<div style="margin-left: 30px;display: flex;justify-content: center;align-items: center;width: 80%;">
<div v-show="index==0">
基本工資：
<el-input
placeholder="請輸入基本工資..."
size="mini"
style="width: 200px"
type="number"
@keyup.enter.native="next"
v-model="salary.basicSalary">
</el-input>
</div>
<div v-show="index==1">
交通補助：
<el-input
placeholder="請輸入交通補助..."
@keyup.enter.native="next"
size="mini"
style="width: 200px"
type="number"
v-model="salary.trafficSalary">
</el-input>
</div>
<div v-show="index==2">
午餐補助：
<el-input
placeholder="請輸入午餐補助..."
@keyup.enter.native="next"
size="mini"
style="width: 200px"
type="number"
v-model="salary.lunchSalary">
</el-input>
</div>
<div v-show="index==3">
獎金：
<el-input
placeholder="請輸入獎金..."
size="mini"
@keyup.enter.native="next"
style="width: 200px"
type="number"
v-model="salary.bonus">
</el-input>
</div>
<div v-show="index==4">
<div>
養老金比率：
<el-input
placeholder="請輸入養老金比率..."
size="mini"
style="width: 200px"
type="number"
v-model="salary.pensionPer">
</el-input>
</div>
<div style="margin-top: 10px">
養老金基數：
<el-input
placeholder="請輸入養老金基數..."
size="mini"
@keyup.enter.native="next"
style="width: 200px"
type="number"
v-model="salary.pensionBase">
</el-input>
</div>
</div>
<div v-show="index==5">
<div>
醫療保險比率：
<el-input
placeholder="請輸入醫療保險比率..."
size="mini"
style="width: 200px"
type="number"
v-model="salary.medicalPer">
</el-input>
</div>
<div style="margin-top: 10px">
醫療保險基數：
<el-input
placeholder="請輸入醫療保險基數..."
size="mini"
@keyup.enter.native="next"
style="width: 200px"
type="number"
v-model="salary.medicalBase">
</el-input>
</div>
</div>
<div v-show="index==6">
<div>
公積金比率：
<el-input
placeholder="請輸入公積金比率..."
size="mini"
style="width: 200px"
type="number"
v-model="salary.accumulationFundPer">
</el-input>
</div>
<div style="margin-top: 10px">
公積金基數：
<el-input
placeholder="請輸入公積金基數..."
@keyup.enter.native="next"
size="mini"
style="width: 200px"
type="number"
v-model="salary.accumulationFundBase">
</el-input>
</div>
</div>
<div v-show="index==7">
啟用時間：
<el-date-picker
v-model="salary.createDate"
type="date"
size="mini"
value-format="yyyy-MM-dd"
style="width: 200px;"
placeholder="選擇日期">
</el-date-picker>
</div>
</div>
</div>
<div style="display: flex;align-items: center;justify-content: center;padding: 0px;margin: 0px;">
<el-button round size="mini" v-if="index!=0" @click="index--">上一步</el-button>
<el-button type="primary" round size="mini" @click="next" v-text="index==7?'完成':'下一步'"></el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
tableLoading: false,
index: 0,
salaries: [],
multipleSelection: [],
salary: {
id: '',
createDate: '',
basicSalary: '',
trafficSalary: '',
lunchSalary: '',
bonus: '',
pensionBase: '',
pensionPer: '',
medicalBase: '',
medicalPer: '',
accumulationFundBase: '',
accumulationFundPer: ''
}
};
},
methods: {
deleteAll(){
this.$confirm('刪除[' + this.multipleSelection.length + ']條記錄, 是否繼續?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var ids = '';
this.multipleSelection.forEach(row=> {
ids = ids + row.id + ",";
})
this.doDelete(ids);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消刪除'
});
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleEdit(index, row) {
this.dialogVisible = true;
row.createDate = new Date(row.createDate);
delete row.allSalary;
this.salary = row;
},
handleDelete(index, row) {
this.$confirm('刪除[' + row.name + ']賬套, 是否繼續?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.doDelete(row.id);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消刪除'
});
});
},
doDelete(id){
var _this = this;
_this.tableLoading = true;
this.deleteRequest("/sal/salary/" + id).then(resp=> {
_this.tableLoading = false;
if (resp && resp.status == 200) {
var data = resp.data;
_this.$message({type: data.status, message: data.msg});
_this.loadSalaryCfg();
}
})
},
next(){
var _this = this;
if (this.index == 7) {
if (this.salary.id) {//更新
_this.tableLoading = true;
this.putRequest("/sal/salary", this.salary).then(resp=> {
_this.tableLoading = false;
if (resp && resp.status == 200) {
var data = resp.data;
_this.$message({type: data.status, message: data.msg});
_this.dialogVisible = false;
_this.index = 0;
_this.loadSalaryCfg();
}
});
} else {//添加
this.$prompt('請輸入賬套名稱', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消'
}).then(({value}) => {
this.salary.name = value;
this.postRequest("/sal/salary", this.salary).then(resp=> {
if (resp && resp.status == 200) {
var data = resp.data;
_this.$message({type: data.status, message: data.msg});
_this.dialogVisible = false;
_this.index = 0;
_this.loadSalaryCfg();
}
});
}).catch(() => {
});
}
} else {
this.index++;
}
},
loadSalaryCfg(){
this.tableLoading = true;
var _this = this;
this.getRequest("/sal/salary").then(resp=> {
_this.tableLoading = false;
if (resp && resp.status == 200) {
_this.salaries = resp.data;
}
})
},
emptySalary(){
this.salary = {
id: '',
createDate: '',
basicSalary: '',
trafficSalary: '',
lunchSalary: '',
bonus: '',
pensionBase: '',
pensionPer: '',
medicalBase: '',
medicalPer: '',
accumulationFundBase: '',
accumulationFundPer: ''
};
this.index = 0;
}
},
mounted: function () {
this.loadSalaryCfg();
}
};
</script>
<style>
.el-dialog__body {
padding-bottom: 10px;
}
</style>