微人事（11）- 基础信息设置

1 基础信息设置

https://element.eleme.cn/#/zh-CN/component/tabs

• tab 挨着上面太近，修改 Home.vue
  

• 组件化
  

• SysBasic.vue

<template>
    <div>
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="部门管理" name="first"><DepMana></DepMana></el-tab-pane>
            <el-tab-pane label="职位管理" name="second"><PostMana></PostMana></el-tab-pane>
            <el-tab-pane label="职称管理" name="third"><JobLevelMana></JobLevelMana></el-tab-pane>
            <el-tab-pane label="奖惩规则" name="fourth"><EcMana></EcMana></el-tab-pane>
            <el-tab-pane label="权限组" name="fifth"><PermissMana></PermissMana></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import DepMana from "@/components/sys/basic/DepMana";
import EcMana from "@/components/sys/basic/EcMana";
import JobLevelMana from "@/components/sys/basic/JobLevelMana";
import PermissMana from "@/components/sys/basic/PermissMana";
import PostMana from "@/components/sys/basic/PostMana";

export default {
    name: "SysBasic",
    data(){
        return{
            activeName:'second'
        }
    },
    // 注册组件
    components:{
        // key 和 value 相同可以只写一个， 'DepMana':DepMana
        DepMana,
        EcMana,
        JobLevelMana,
        PermissMana,
        PostMana
    }

}
</script>

<style scoped>

</style>

2 职位管理前端页面设置

https://element.eleme.cn/#/zh-CN/component/input

• PosMana.vue

<template>
    <div>
        <div>
            <el-input
                size = "small"
                class="addPosInput"
                placeholder="添加职位 "
                prefix-icon="el-icon-plus"
                v-model="pos.name">
            </el-input>
            <el-button icon="el-icon-plus" size="small" type="primary">
                添加
            </el-button>
        </div>
        <div class="posManaMain" >
            <el-table
                :data="positions"
                border
                size="small"
                stripe
                style="width: 70%">
                <el-table-column
                    prop="id"
                    label="编号"
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="职位名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="createDate"
                    label="创建时间">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    name: "PostMana",
    data(){
        return{
            pos:{
                name:''
            },
            positions:[

            ]
        }
    }
}
</script>

<style >
.addPosInput{
    width: 300px;
    margin-right: 8px;
}

.posManaMain{
    margin-top:10px;
}

</style>

3 职位管理后端接口

• 驼峰
  

• 修改所有的 createdate 为 createDate

• Controller

package com.tzb.controller.system.basic;

import com.tzb.model.Position;
import com.tzb.model.RespBean;
import com.tzb.service.PositionService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/system/basic/pos")
public class PositionController {

    @Autowired
    PositionService positionService;

    @GetMapping("/")
    public List<Position> getAllPosition(){
        return positionService.getAllPositions();
    }

    @PostMapping("/")
    public RespBean addPosition(@RequestBody Position position){

        if(positionService.addPosition(position) ==1){
            return RespBean.ok("添加成功！");
        }else{
            return RespBean.error("添加失败！");
        }

    }
}

• Service

package com.tzb.service;

import com.tzb.mapper.PositionMapper;
import com.tzb.model.Position;
import com.tzb.model.RespBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Date;
import java.util.List;

@Service
public class PositionService {

    @Autowired
    PositionMapper positionMapper;

    public List<Position> getAllPositions() {
        return positionMapper.getAllPositions();
    }

    public Integer addPosition(Position position) {
        position.setEnabled(true);
        position.setCreateDate(new Date());
        return positionMapper.insertSelective(position);
    }
}

• 先用 postman 测试
  
  
  
  

3.1 新增更新和删除操作

• 测试更新
  
  

• 测试删除