36.工資賬套

服務端接口設計

salary/SalaryController

@RestController
@RequestMapping("/salary/sob")
public class SalaryController {
    @Autowired
    SalaryService salaryService;

    @GetMapping("/")
    public List<Salary> getAllSalary(){
        return salaryService.getAllSalary();
    }

    @PostMapping("/")
    public RespBean addSalary(@RequestBody Salary salary) {
        if (salaryService.addSalary(salary) == 1) {
            return RespBean.ok("添加成功");
        }
        return RespBean.error("添加失敗");
    }

    @DeleteMapping("/{id}")
    public RespBean deleteSalary(@PathVariable Integer id) {
        if (salaryService.deleteSalary(id)==1) {
            return RespBean.ok("删除成功");
        }
        return RespBean.error("删除失敗");
    }

    @PutMapping("/")
    public RespBean updateSalary(@RequestBody Salary salary) {
        if (salaryService.updateSalary(salary) == 1) {
            return RespBean.ok("更改成功");
        }
        return RespBean.error("更改失敗");
    }
}

salarySerice

@Service
public class SalaryService {

    @Autowired
    SalaryMapper salaryMapper;

    public List<Salary> getAllSalary() {
        return salaryMapper.getAllSalary();
    }

    public Integer addSalary(Salary salary) {
        return salaryMapper.insertSelective(salary);
    }

    public Integer deleteSalary(Integer id) {
        return salaryMapper.deleteByPrimaryKey(id);
    }

    public Integer updateSalary(Salary salary) {
        return salaryMapper.updateByPrimaryKeySelective(salary);
    }
}

mapper

public interface SalaryMapper {
    int deleteByPrimaryKey(Integer id);

    int insert(Salary record);

    int insertSelective(Salary record);

    Salary selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Salary record);

    int updateByPrimaryKey(Salary record);

    List<Salary> getAllSalary();
}

xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.qwl.vhr.mapper.SalaryMapper" >
  <resultMap id="BaseResultMap" type="com.qwl.vhr.model.Salary" >
    <id column="id" property="id" jdbcType="INTEGER" />
    <result column="basicSalary" property="basicsalary" jdbcType="INTEGER" />
    <result column="bonus" property="bonus" jdbcType="INTEGER" />
    <result column="lunchSalary" property="lunchsalary" jdbcType="INTEGER" />
    <result column="trafficSalary" property="trafficsalary" jdbcType="INTEGER" />
    <result column="allSalary" property="allsalary" jdbcType="INTEGER" />
    <result column="pensionBase" property="pensionbase" jdbcType="INTEGER" />
    <result column="pensionPer" property="pensionper" jdbcType="REAL" />
    <result column="createDate" property="createdate" jdbcType="TIMESTAMP" />
    <result column="medicalBase" property="medicalbase" jdbcType="INTEGER" />
    <result column="medicalPer" property="medicalper" jdbcType="REAL" />
    <result column="accumulationFundBase" property="accumulationfundbase" jdbcType="INTEGER" />
    <result column="accumulationFundPer" property="accumulationfundper" jdbcType="REAL" />
    <result column="name" property="name" jdbcType="VARCHAR" />
  </resultMap>
  <sql id="Base_Column_List" >
    id, basicSalary, bonus, lunchSalary, trafficSalary, allSalary, pensionBase, pensionPer, 
    createDate, medicalBase, medicalPer, accumulationFundBase, accumulationFundPer, name
  </sql>
  <select id="getAllSalary" resultType="com.qwl.vhr.model.Salary">
    select 
    <include refid="Base_Column_List"></include>
    from salary
  </select>
  <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
    select 
    <include refid="Base_Column_List" />
    from salary
    where id = #{id,jdbcType=INTEGER}
  </select>
  <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
    delete from salary
    where id = #{id,jdbcType=INTEGER}
  </delete>
  <insert id="insert" parameterType="com.qwl.vhr.model.Salary" >
    insert into salary (id, basicSalary, bonus, 
      lunchSalary, trafficSalary, allSalary, 
      pensionBase, pensionPer, createDate, 
      medicalBase, medicalPer, accumulationFundBase, 
      accumulationFundPer, name)
    values (#{id,jdbcType=INTEGER}, #{basicsalary,jdbcType=INTEGER}, #{bonus,jdbcType=INTEGER}, 
      #{lunchsalary,jdbcType=INTEGER}, #{trafficsalary,jdbcType=INTEGER}, #{allsalary,jdbcType=INTEGER}, 
      #{pensionbase,jdbcType=INTEGER}, #{pensionper,jdbcType=REAL}, #{createdate,jdbcType=TIMESTAMP}, 
      #{medicalbase,jdbcType=INTEGER}, #{medicalper,jdbcType=REAL}, #{accumulationfundbase,jdbcType=INTEGER}, 
      #{accumulationfundper,jdbcType=REAL}, #{name,jdbcType=VARCHAR})
  </insert>
  <insert id="insertSelective" parameterType="com.qwl.vhr.model.Salary" >
    insert into salary
    <trim prefix="(" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        id,
      </if>
      <if test="basicsalary != null" >
        basicSalary,
      </if>
      <if test="bonus != null" >
        bonus,
      </if>
      <if test="lunchsalary != null" >
        lunchSalary,
      </if>
      <if test="trafficsalary != null" >
        trafficSalary,
      </if>
      <if test="allsalary != null" >
        allSalary,
      </if>
      <if test="pensionbase != null" >
        pensionBase,
      </if>
      <if test="pensionper != null" >
        pensionPer,
      </if>
      <if test="createdate != null" >
        createDate,
      </if>
      <if test="medicalbase != null" >
        medicalBase,
      </if>
      <if test="medicalper != null" >
        medicalPer,
      </if>
      <if test="accumulationfundbase != null" >
        accumulationFundBase,
      </if>
      <if test="accumulationfundper != null" >
        accumulationFundPer,
      </if>
      <if test="name != null" >
        name,
      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        #{id,jdbcType=INTEGER},
      </if>
      <if test="basicsalary != null" >
        #{basicsalary,jdbcType=INTEGER},
      </if>
      <if test="bonus != null" >
        #{bonus,jdbcType=INTEGER},
      </if>
      <if test="lunchsalary != null" >
        #{lunchsalary,jdbcType=INTEGER},
      </if>
      <if test="trafficsalary != null" >
        #{trafficsalary,jdbcType=INTEGER},
      </if>
      <if test="allsalary != null" >
        #{allsalary,jdbcType=INTEGER},
      </if>
      <if test="pensionbase != null" >
        #{pensionbase,jdbcType=INTEGER},
      </if>
      <if test="pensionper != null" >
        #{pensionper,jdbcType=REAL},
      </if>
      <if test="createdate != null" >
        #{createdate,jdbcType=TIMESTAMP},
      </if>
      <if test="medicalbase != null" >
        #{medicalbase,jdbcType=INTEGER},
      </if>
      <if test="medicalper != null" >
        #{medicalper,jdbcType=REAL},
      </if>
      <if test="accumulationfundbase != null" >
        #{accumulationfundbase,jdbcType=INTEGER},
      </if>
      <if test="accumulationfundper != null" >
        #{accumulationfundper,jdbcType=REAL},
      </if>
      <if test="name != null" >
        #{name,jdbcType=VARCHAR},
      </if>
    </trim>
  </insert>
  <update id="updateByPrimaryKeySelective" parameterType="com.qwl.vhr.model.Salary" >
    update salary
    <set >
      <if test="basicsalary != null" >
        basicSalary = #{basicsalary,jdbcType=INTEGER},
      </if>
      <if test="bonus != null" >
        bonus = #{bonus,jdbcType=INTEGER},
      </if>
      <if test="lunchsalary != null" >
        lunchSalary = #{lunchsalary,jdbcType=INTEGER},
      </if>
      <if test="trafficsalary != null" >
        trafficSalary = #{trafficsalary,jdbcType=INTEGER},
      </if>
      <if test="allsalary != null" >
        allSalary = #{allsalary,jdbcType=INTEGER},
      </if>
      <if test="pensionbase != null" >
        pensionBase = #{pensionbase,jdbcType=INTEGER},
      </if>
      <if test="pensionper != null" >
        pensionPer = #{pensionper,jdbcType=REAL},
      </if>
      <if test="createdate != null" >
        createDate = #{createdate,jdbcType=TIMESTAMP},
      </if>
      <if test="medicalbase != null" >
        medicalBase = #{medicalbase,jdbcType=INTEGER},
      </if>
      <if test="medicalper != null" >
        medicalPer = #{medicalper,jdbcType=REAL},
      </if>
      <if test="accumulationfundbase != null" >
        accumulationFundBase = #{accumulationfundbase,jdbcType=INTEGER},
      </if>
      <if test="accumulationfundper != null" >
        accumulationFundPer = #{accumulationfundper,jdbcType=REAL},
      </if>
      <if test="name != null" >
        name = #{name,jdbcType=VARCHAR},
      </if>
    </set>
    where id = #{id,jdbcType=INTEGER}
  </update>
  <update id="updateByPrimaryKey" parameterType="com.qwl.vhr.model.Salary" >
    update salary
    set basicSalary = #{basicsalary,jdbcType=INTEGER},
      bonus = #{bonus,jdbcType=INTEGER},
      lunchSalary = #{lunchsalary,jdbcType=INTEGER},
      trafficSalary = #{trafficsalary,jdbcType=INTEGER},
      allSalary = #{allsalary,jdbcType=INTEGER},
      pensionBase = #{pensionbase,jdbcType=INTEGER},
      pensionPer = #{pensionper,jdbcType=REAL},
      createDate = #{createdate,jdbcType=TIMESTAMP},
      medicalBase = #{medicalbase,jdbcType=INTEGER},
      medicalPer = #{medicalper,jdbcType=REAL},
      accumulationFundBase = #{accumulationfundbase,jdbcType=INTEGER},
      accumulationFundPer = #{accumulationfundper,jdbcType=REAL},
      name = #{name,jdbcType=VARCHAR}
    where id = #{id,jdbcType=INTEGER}
  </update>
</mapper>

頁面設計

<template>
    <div>
        <div style="display: flex;justify-content: space-between">
            <el-button icon="el-icon-plus" type="primary" @click="showAddSalaryView">添加工資賬套</el-button>
            <el-button icon="el-icon-refresh" type="success" @click="initSalaries"></el-button>
        </div>
        <div style="margin-top: 10px">
            <el-table :data="salaries" border stripe>
                <el-table-column type="selection" width="55"></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 width="70" prop="bonus" label="獎金"></el-table-column>
                <el-table-column width="100" prop="createdate" label="啟用時間"></el-table-column>
                <el-table-column label="養老金" align="center">
                    <el-table-column width="70" prop="pensionper" 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 width="70" prop="medicalbase" 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 width="70" prop="accumulationfundbase" label="基數"></el-table-column>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showEditSalaryView(scope.row)">編輯</el-button>
                        <el-button type="danger" @click="deleteSalary(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="50%">
            <div style="display: flex;justify-content: space-around;align-items: center">
                <el-steps direction="vertical" :active="activeItemIndex">
                    <el-step :title="itemName" v-for="(itemName,index) in salaryItemName" :key="index"></el-step>
                </el-steps>
                <el-input v-model="salary[title]" :placeholder="'請輸入'+salaryItemName[index]+'...'"
                          v-for="(value,title,index) in salary"
                          :key="index" v-show="activeItemIndex==index" style="width: 200px"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="preStep">{{activeItemIndex==10?'取消':'上一步'}}</el-button>
    <el-button type="primary" @click="nextStep">{{activeItemIndex==10?'完成':'下一步'}}</el-button>
  </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: "SalSob",
        data() {
            return {
                dialogVisible: false,
                dialogTitle: '添加工資賬套',
                salaries: [],
                activeItemIndex: 0,
                salaryItemName: [
                    '基本工資',
                    '交通補助',
                    '午餐補助',
                    '獎金',
                    '養老金比率',
                    '養老金基數',
                    '醫療保險比率',
                    '醫療保險基數',
                    '公積金比率',
                    '公積金基數',
                    '賬套名稱'
                ],
                salary: {
                    basicsalary: 0,
                    trafficsalary: 0,
                    lunchsalary: 0,
                    bonus: 0,
                    pensionper: 0,
                    pensionbase: 0,
                    medicalper: 0,
                    medicalbase: 0,
                    accumulationfundper: 0,
                    accumulationfundbase: 0,
                    name: ''
                }
            }
        },
        mounted() {
            this.initSalaries();
        },
        methods: {
            showEditSalaryView(data) {
                this.dialogTitle = '修改工資賬套';
                this.dialogVisible = true;
                this.salary.basicsalary = data.basicsalary;
                this.salary.trafficsalary = data.trafficsalary;
                this.salary.lunchsalary = data.lunchsalary;
                this.salary.bonus = data.bonus;
                this.salary.pensionper = data.pensionper;
                this.salary.pensionbase = data.pensionbase;
                this.salary.medicalper = data.medicalper;
                this.salary.medicalbase = data.medicalbase;
                this.salary.accumulationfundper = data.accumulationfundper;
                this.salary.accumulationfundbase = data.accumulationfundbase;
                this.salary.name = data.name;
                this.salary.id = data.id;
            },
            deleteSalary(data) {
                this.$confirm('此操作将删除【' + data.name + '】賬套，是否繼續？', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定'
                }).then(() => {
                    this.deleteRequest("/salary/sob/" + data.id).then(resp => {
                        if (resp) {
                            this.initSalaries();
                        }
                    })
                }).catch(() => {
                    this.$message.info("取消删除!");
                })
            },
            preStep() {
                if (this.activeItemIndex == 0) {
                    return;
                } else if (this.activeItemIndex == 10) {
                    //關閉對話框
                    this.dialogVisible = false;
                    return;
                }
                this.activeItemIndex--;
            },
            nextStep() {
                if (this.activeItemIndex == 10) {
                    if (this.salary.id) {
                        this.putRequest("/salary/sob/", this.salary).then(resp=>{
                            if (resp) {
                                this.initSalaries();
                                this.dialogVisible = false;
                            }
                        })
                    } else {
                        this.postRequest("/salary/sob/", this.salary).then(resp => {
                            if (resp) {
                                this.initSalaries();
                                this.dialogVisible = false;
                            }
                        });
                    }
                    return;
                }
                this.activeItemIndex++;
            },
            showAddSalaryView() {
                //資料初始化
                this.salary = {
                    basicsalary: 0,
                    trafficsalary: 0,
                    lunchsalary: 0,
                    bonus: 0,
                    pensionper: 0,
                    pensionbase: 0,
                    medicalper: 0,
                    medicalbase: 0,
                    accumulationfundper: 0,
                    accumulationfundbase: 0,
                    name: '預設名稱'
                }
                this.dialogTitle = '添加工資賬套';
                this.activeItemIndex = 0;
                this.dialogVisible = true;
            },
            initSalaries() {
                this.getRequest("/salary/sob/").then(resp => {
                    if (resp) {
                        this.salaries = resp;
                    }
                })
            }
        }
    }
</script>
<style scoped>
</style>

效果圖

36.工資賬套

服務端接口設計

頁面設計

效果圖

繼續閱讀

8.Home頁的Title制作和下拉菜單

30.員工管理後端

28.員工管理後端接口設計

29.員工管理前端頁面

31.權限組取消所有角色所有權限的bug解決

27.登入頁面增加資料加載進度條

26.操作員管理

25.部門管理

24.登入問題完善

6.前後端接口對接

5.服務端登入接口制作

4.服務端環境搭建

3.處理前端登入事件

2.登入頁面制作

1.vue-cli3建構Vue項目

微人事學習筆記（持續更新）登入頁面服務端登入接口制作前後端接口對接Home頁面制作前後端分離權限管理思路探讨權限管理：後端接口設計基礎資訊設定頁面