小伙伴们都看到了，这里两个表格非常像，但是不一样，考虑到两个表格可复用性非常大，因此我创建一个组件PosMana来实现这两个功能，组件注册成功后，按如下方式引用：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| "defaultTab" type="card">
"部门管理" name="depMana">
</dep-mana>
el-tab-pane>
"职位管理" name="positionMana">
"position"></pos-mana>
el-tab-pane>
"职称管理" name="jobTitleMana">
"jobtitle"></pos-mana>
el-tab-pane>
"奖惩规则" name="ecCfg">
</ec-mana>
el-tab-pane>
"权限组" name="menuRole">
</menu-role>
el-tab-pane>
</el-tabs>
|
大家注意职位管理和职称管理是同一个组件，但是state参数不一样。在组件中，我将根据state参数来决定表格的显示样式，请求的地址等。如：
表格是否显示职称等级列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
prop="titleLevel"
label="职称级别"
width="180"
align="left" v-if="state=='jobtitle'">
</el-table-column>
#### 职位名称or职称名称
prop="name"
:label="state=='position'?'职位名称':'职称名称'"
width="180"
align="left">
el-table-column>
|
增删改地址
1
2
3
4
5
6
7
8
9
10
11
| doDelete(ids){
var _this = this;
_this.loading = true;
var url = this.state == 'position' ? '/system/basic/position/' : '/system/basic/joblevel/';
this.deleteRequest(url + ids).then(resp=> {
_this.loading = false;
if (resp && resp.status == 200) {
_this.loadTableData();
}
})
}
|
动态资源都根据state来动态调整，详细的小伙伴们可以参考vuehr\src\components\system\basic\PosMana.vue组件。