|
|
@@ -2,23 +2,34 @@
|
|
|
<el-dialog
|
|
|
:visible.sync="showDialog"
|
|
|
:title="title"
|
|
|
- width="800px"
|
|
|
+ width="900px"
|
|
|
:modal-append-to-body="false"
|
|
|
style="text-align:left;"
|
|
|
@close="closeDialog"
|
|
|
:close-on-click-modal="false"
|
|
|
>
|
|
|
- <div class="role-permission">
|
|
|
- <el-transfer
|
|
|
- v-model="relatedMenus"
|
|
|
- :data="menuList"
|
|
|
- v-loading="loading"
|
|
|
- filterable
|
|
|
- :filter-method="filterMethod"
|
|
|
- filter-placeholder="请输入关键字"
|
|
|
- :props="{key: 'id',label: 'description'}"
|
|
|
- :titles="['未分配菜单','已分配菜单']"
|
|
|
- ></el-transfer>
|
|
|
+ <div class="flex-row">
|
|
|
+ <div class="role-permission">
|
|
|
+ <el-transfer
|
|
|
+ v-model="relatedMenus"
|
|
|
+ :data="menuList"
|
|
|
+ v-loading="loading"
|
|
|
+ filterable
|
|
|
+ target-order="push"
|
|
|
+ :filter-method="filterMethod"
|
|
|
+ filter-placeholder="请输入关键字"
|
|
|
+ :props="{key: 'id',label: 'description'}"
|
|
|
+ :titles="['未分配菜单','已分配菜单']"
|
|
|
+ @right-check-change="rightCheckChange"
|
|
|
+ ></el-transfer>
|
|
|
+ </div>
|
|
|
+ <div class="flex-col">
|
|
|
+ <div>
|
|
|
+ <el-button round size="mini" @click="moveUp">上移</el-button>
|
|
|
+ <div style="height:10px;"></div>
|
|
|
+ <el-button round size="mini" @click="moveDown">下移</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="closeDialog">取 消</el-button>
|
|
|
@@ -37,7 +48,8 @@ export default {
|
|
|
relatedMenus: [],
|
|
|
loading: false,
|
|
|
showDialog: true,
|
|
|
- submitting: false
|
|
|
+ submitting: false,
|
|
|
+ rightCheckedItems: []
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -105,6 +117,31 @@ export default {
|
|
|
|
|
|
self.loading = false;
|
|
|
});
|
|
|
+ },
|
|
|
+ rightCheckChange(checkedItems) {
|
|
|
+ this.rightCheckedItems = checkedItems;
|
|
|
+ },
|
|
|
+ moveUp() {
|
|
|
+ this.rightCheckedItems.forEach(id=>{
|
|
|
+ var index = this.relatedMenus.indexOf(id);
|
|
|
+
|
|
|
+ if(index>0){
|
|
|
+ console.log(index + "," + id);
|
|
|
+ this.relatedMenus.splice(index,1);
|
|
|
+ this.relatedMenus.splice(index-1,0,id);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ moveDown() {
|
|
|
+ this.rightCheckedItems.forEach(id=>{
|
|
|
+ var index = this.relatedMenus.indexOf(id);
|
|
|
+
|
|
|
+ if(index<this.relatedMenus.length-1){
|
|
|
+ console.log(index + "," + id);
|
|
|
+ this.relatedMenus.splice(index,1);
|
|
|
+ this.relatedMenus.splice(index+1,0,id);
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -127,4 +164,16 @@ export default {
|
|
|
position: relative;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.flex-row{
|
|
|
+ display:flex;
|
|
|
+ flex-direction: row;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-col{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: col;
|
|
|
+ justify-content: center; /* 水平居中 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+}
|
|
|
</style>
|