SpringBoot + Vue micro personnel project (eighth day)

Basic Information Settings

• Add a big div to the page, and then add a tab, Element UI has

Copy the code into the big div, change the label and name attributes inside to what we want, and remove @tab-click="handleClick"

 <div>
        <el-tabs v-model="activeName" >
            <el-tab-pane label="部门管理" name="first">部门管理</el-tab-pane>
            <el-tab-pane label="职位管理" name="second">职位管理</el-tab-pane>
            <el-tab-pane label="职称管理" name="third">职称管理</el-tab-pane>
            <el-tab-pane label="奖惩规则" name="fourth">奖惩规则</el-tab-pane>
            <el-tab-pane label="权限组" name="fourth2">权限组</el-tab-pane>
        </el-tabs>
    </div>

Set the activeName attribute in the data, activeName:'second': the second is displayed by default

export default {
    
    
        name: "SysBasic",
        data(){
    
    
            return{
    
    
                activeName:'second',
            }
        },

Results as shown below:

• There are a total of five tabs. Can you directly write html tags in each tab? The answer is yes, but if you write this way, you will have to write for a long time and repeat it, which is impossible to manage. At this time, we can think of using components development to save resources. It is a very complicated page that we can split into many small pages, and then splicing many small pages into a complete page.
• Components can be placed in the components folder, and the page should be in the views folder
• First define these 5 components
• 

Introduce these 5 components again, in

    import EcMarna from '../../components/sys/basic/EcMarna'
    import JobLevelMarna from '../../components/sys/basic/JobLevelMarna'
    import PermissMarna from '../../components/sys/basic/PermissMarna'
    import PosMarna from '../../components/sys/basic/PosMarna'
    import DemMarna from '../../components/sys/basic/DepMarna'

After the introduction, it cannot be used directly, and it needs to be registered as a component. The component has a key and a value, and the key and value are the same. You can only write one. The defined component should be regarded as an html tag defined by yourself.

  components:{
    
    
            'DemMarna':DemMarna,
            'PosMarna': PosMarna,
            'PermissMarna':PermissMarna,
            'JobLevelMarna':JobLevelMarna,
            'EcMarna':EcMarna
        }

• Modify the code in the tab again:

    <div>
        <el-tabs v-model="activeName" >
            <el-tab-pane label="部门管理" name="first"><EcMarna></EcMarna></el-tab-pane>
            <el-tab-pane label="职位管理" name="second"><PosMarna></PosMarna></el-tab-pane>
            <el-tab-pane label="职称管理" name="third"><JobLevelMarna></JobLevelMarna></el-tab-pane>
            <el-tab-pane label="奖惩规则" name="fourth"><EcMarna></EcMarna></el-tab-pane>
            <el-tab-pane label="权限组" name="fourth2"><PermissMarna></PermissMarna></el-tab-pane>
        </el-tabs>
    </div>

Compilation of Job Management Components

Analysis: There is an input box in the position management component, an add button and a table, which can be divided into two divs

 <el-input
                size="small"
                style="width: 300px;"
                placeholder="添加职位..."
                prefix-icon="el-icon-plus"
                v-model="pos.name">
        </el-input>

v-model: the data to be added later, the added data can be viewed from the server, if you want to upload it in the form of json in the future, you can declare the name in the data to be an empty character by default

 export default {
    
    
        name: "DepMarna",
        data() {
    
    
            return {
    
    
                pos: {
    
    
                    name: ''
                }
            }
        }
    }

On the right is a blue add button type="primary" means blue icon="el-icon-plus": + mark size="small: small

<el-button type="primary" icon="el-icon-plus" size="small">添加</el-button>

The next step is to add the form under the position, Element UI also has many form templates

<!--:data="tableDate 是data数据里面的tableData属性。表格里面显示的数据是json数组"-->
<!--el-table-column:表格中的每一列-->

<div class="posManaMain">
            <el-table
                    :data="positions"
                    stripe
                    size="small"
                    border
                    style="width: 70%">
                <el-table-column
                        prop="id"
                        label="编号"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="职位名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="createDate"
                        label="创建时间">
                </el-table-column>
            </el-table>
</div>

The code in the script tag is as follows: plsitions:[]: JSON data passed from the backend

export default {
    
    
        name: "PosMarna",
        data(){
    
    
            return{
    
    
                pos:{
    
    
                    name:""
                },
                tableData: []
                    }
                }
    }