15.職業管理前端頁面設計
阿新 • • 發佈：2020-08-07
基礎資訊設定
- 在該頁面新增一個大div，然後新增一個tab選項卡，Element UI裡面有
把程式碼複製到大div裡面，把裡面的label和name屬性改成我們想要的，再把@tab-click="handleClick"去掉
<template> <div> <template> <el-tabs v-model="activeName" type="card"> <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="fifth">許可權組</el-tab-pane> </el-tabs> </template> </div> </template>
在data裡面設定activeName屬性，activeName:'second'：預設顯示第二個
data(){
return{
activeName:'second'
}
},
效果如下圖所示：
③：一共有五個選項卡，可不可以直接在每一個選項卡里面直接寫html標籤呢，答案是可以的，但是這樣寫的話，就要寫好久重複的，沒法管理，這時我們可以想到通過元件化開發來節省資源。就是一個很複雜的頁面我們可以拆分成很多個小頁面，在把很多小頁面拼接成一個完整的頁面。
元件可以放到components資料夾裡面來，頁面就要views資料夾中
④：先把這5個元件定義好
再引入這5個元件，在
引入之後並不能直接使用，還需要註冊成元件，元件有key和value，key和value相同，可以只寫一個，定義的元件想當於是自己定義的一個html標籤
export default {
name: "SysBasic",
data(){
return{
activeName:'second'
}
},
components:{
DepMana,
EcMana,
JobLevelMana,
PermissMana,
PosMana
}
}
把選項卡中的程式碼再修改一下：
<template>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="部門管理" name="first"><DepMana></DepMana></el-tab-pane>
<el-tab-pane label="職位管理" name="second"><PosMana></PosMana></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>
</template>
職位管理元件的編寫
分析：職位管理元件裡面有個輸入框，有個新增按鈕和一張表，可以分為兩個div
<el-input
size="small"
class="addPosInput"
placeholder="新增職位..."
prefix-icon="el-icon-plus"
v-model="pos.name">
</el-input>
v-model：一會要新增的資料，這個新增的資料可以從服務端看一下，未來想以json的形式上傳它，就可以在data裡面宣告name預設為空字元
export default {
name: "DepMana",
data() {
return {
pos: {
name: ''
}
}
}
}
右邊是一個藍色的新增按鈕 type="primary" 表示是藍色的 icon="el-icon-plus"：+號的標記 size="small：小號的
<el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
效果如下圖所示：
接下來就是新增職位下面的表格了，Element UI也有很多表格模板的
表格的程式碼如下：
<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>
在script標籤裡面的程式碼如下： plsitions:[]：從後端傳遞過來的json資料
<script>
export default {
name: "DepMana",
data() {
return {
pos: {
name: ''
},
positions: []
}
}
}
</script>
效果如下圖所示：
至此，微人事的系統管理中的基礎資訊設定中的職位管理的前端頁面已經完成，明天開始寫後端的介面
PosMana.vue全部程式碼
<template>
<div>
<el-input
size="small"
class="addPosInput"
placeholder="新增職位..."
prefix-icon="el-icon-plus"
v-model="pos.name">
</el-input>
<el-button type="primary" icon="el-icon-plus" size="small">新增</el-button>
<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>
</div>
</template>
<script>
export default {
name: "PosMana",
data(){
return{
pos:{
name:''
},
positions:[]
}
}
}
</script>
<style>
.addPosInput{
width: 300px;
margin-right: 8px;
}
.posManaMain{
margin-top: 10px;;
}
</style>