cKey
5 years ago
committed by
GitHub
GitHub
23 changed files with 439 additions and 72 deletions
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -0,0 +1,102 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-row |
||||
|
v-for="(key, index) in Object.keys(objectValue)" |
||||
|
:key="index" |
||||
|
style="margin-bottom: 10px;" |
||||
|
> |
||||
|
<el-col :span="10"> |
||||
|
<span style="width: 30%;">名称</span> |
||||
|
<el-input |
||||
|
:value="key" |
||||
|
style="width: 80%;margin-left: 10px;" |
||||
|
/> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<span style="width: 30%;">值</span> |
||||
|
<el-input |
||||
|
:value="value[key]" |
||||
|
style="width: 87%;margin-left: 10px;" |
||||
|
/> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-button |
||||
|
type="danger" |
||||
|
icon="el-icon-delete" |
||||
|
style="width: 100%;" |
||||
|
@click="onItemDeleted(key)" |
||||
|
> |
||||
|
删除项目 |
||||
|
</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row style="margin-top: 10px;"> |
||||
|
<el-col :span="10"> |
||||
|
<span style="width: 30%;">名称</span> |
||||
|
<el-input |
||||
|
v-model="newItemName" |
||||
|
style="width: 80%;margin-left: 10px;" |
||||
|
/> |
||||
|
</el-col> |
||||
|
<el-col :span="10"> |
||||
|
<span style="width: 30%;">值</span> |
||||
|
<el-input |
||||
|
v-model="newItemValue" |
||||
|
style="width: 87%;margin-left: 10px;" |
||||
|
/> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
style="width: 100%;" |
||||
|
@click="onItemAdded(newItemName, newItemValue)" |
||||
|
> |
||||
|
<i class="ivu-icon ivu-icon-md-add" /> |
||||
|
添加项目 |
||||
|
</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue, Prop } from 'vue-property-decorator' |
||||
|
|
||||
|
@Component({ |
||||
|
name: 'InputObject' |
||||
|
}) |
||||
|
export default class extends Vue { |
||||
|
@Prop({ default: () => { return {} } }) |
||||
|
private value!: object |
||||
|
|
||||
|
private newItemName = '' |
||||
|
private newItemValue = '' |
||||
|
|
||||
|
get objectValue() { |
||||
|
if (this.value) { |
||||
|
return this.value |
||||
|
} |
||||
|
return {} |
||||
|
} |
||||
|
|
||||
|
onItemAdded(key: string, value: any) { |
||||
|
if (key && value) { |
||||
|
let added: {[key: string]: any} = {} |
||||
|
added = Object.assign(this.objectValue, added) |
||||
|
added[key] = value |
||||
|
console.log(added) |
||||
|
this.$emit('input', added) |
||||
|
this.newItemName = '' |
||||
|
this.newItemValue = '' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onItemDeleted(key: string) { |
||||
|
let changed: {[key: string]: any} = {} |
||||
|
changed = Object.assign(this.objectValue, changed) |
||||
|
delete changed[key] |
||||
|
this.$emit('input', changed) |
||||
|
this.$forceUpdate() |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,172 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-el-draggable-dialog |
||||
|
width="800px" |
||||
|
:title="$t('AppPlatform.Menu:Manage')" |
||||
|
:visible="showDialog" |
||||
|
custom-class="modal-form" |
||||
|
:close-on-click-modal="false" |
||||
|
:close-on-press-escape="false" |
||||
|
:show-close="false" |
||||
|
@close="onFormClosed" |
||||
|
> |
||||
|
<el-form> |
||||
|
<el-card> |
||||
|
<el-form-item |
||||
|
label-width="120px" |
||||
|
:label="$t('AppPlatform.DisplayName:PlatformType')" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="getMenuQuery.platformType" |
||||
|
style="width: 100%;" |
||||
|
class="filter-item" |
||||
|
clearable |
||||
|
:placeholder="$t('pleaseSelectBy', {name: $t('AppPlatform.DisplayName:PlatformType')})" |
||||
|
@change="onPlatformTypeChanged" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in platformTypes" |
||||
|
:key="item.key" |
||||
|
:label="item.key" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label-width="120px" |
||||
|
:label="$t('AppPlatform.DisplayName:Menus')" |
||||
|
> |
||||
|
<el-tree |
||||
|
ref="userMenuTree" |
||||
|
show-checkbox |
||||
|
:check-strictly="true" |
||||
|
node-key="id" |
||||
|
:data="menus" |
||||
|
:props="menuProps" |
||||
|
:default-checked-keys="userMenuIds" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-card> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
class="cancel" |
||||
|
type="info" |
||||
|
style="width:100px" |
||||
|
@click="onFormClosed" |
||||
|
> |
||||
|
{{ $t('AbpUi.Cancel') }} |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
class="confirm" |
||||
|
type="primary" |
||||
|
style="width:100px" |
||||
|
icon="el-icon-check" |
||||
|
:loading="confirmButtonBusy" |
||||
|
@click="onSave" |
||||
|
> |
||||
|
{{ confirmButtonTitle }} |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue, Prop, Watch } from 'vue-property-decorator' |
||||
|
import MenuService, { Menu, GetAllMenu, UserMenu } from '@/api/menu' |
||||
|
import { generateTree } from '@/utils' |
||||
|
import { PlatformType, PlatformTypes } from '@/api/layout' |
||||
|
import { Tree } from 'element-ui' |
||||
|
|
||||
|
@Component({ |
||||
|
name: 'ManageUserMenuDialog' |
||||
|
}) |
||||
|
export default class ManageUserMenuDialog extends Vue { |
||||
|
@Prop({ default: false }) |
||||
|
private showDialog!: boolean |
||||
|
|
||||
|
@Prop({ default: '' }) |
||||
|
private userId!: string |
||||
|
|
||||
|
private menus = new Array<Menu>() |
||||
|
private userMenuIds = new Array<string>() |
||||
|
private getMenuQuery = new GetAllMenu() |
||||
|
private platformTypes = PlatformTypes |
||||
|
private confirmButtonBusy = false |
||||
|
private menuProps = { |
||||
|
children: 'children', |
||||
|
label: 'displayName' |
||||
|
} |
||||
|
|
||||
|
get confirmButtonTitle() { |
||||
|
if (this.confirmButtonBusy) { |
||||
|
return this.$t('AbpUi.SavingWithThreeDot') |
||||
|
} |
||||
|
return this.$t('AbpUi.Save') |
||||
|
} |
||||
|
|
||||
|
@Watch('showDialog', { immediate: true }) |
||||
|
private onShowDialogChanged() { |
||||
|
this.handleGetUserMenus() |
||||
|
} |
||||
|
|
||||
|
private onPlatformTypeChanged() { |
||||
|
this.handleGetMenus() |
||||
|
this.handleGetUserMenus() |
||||
|
} |
||||
|
|
||||
|
private handleGetMenus() { |
||||
|
MenuService |
||||
|
.getAll(this.getMenuQuery) |
||||
|
.then(res => { |
||||
|
this.menus = generateTree(res.items) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
private handleGetUserMenus() { |
||||
|
if (this.showDialog && this.userId) { |
||||
|
MenuService |
||||
|
.getUserMenuList(this.userId, this.getMenuQuery.platformType || PlatformType.None) |
||||
|
.then(res => { |
||||
|
this.userMenuIds = res.items.map(item => item.id) |
||||
|
}) |
||||
|
} else { |
||||
|
this.userMenuIds.length = 0 |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private onSave() { |
||||
|
const userMenuTree = this.$refs.userMenuTree as Tree |
||||
|
const userMenu = new UserMenu() |
||||
|
userMenu.userId = this.userId |
||||
|
userMenu.menuIds = userMenuTree.getCheckedKeys() |
||||
|
MenuService |
||||
|
.setUserMenu(userMenu) |
||||
|
.then(() => { |
||||
|
this.$message.success(this.$t('successful').toString()) |
||||
|
this.onFormClosed() |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
private onFormClosed() { |
||||
|
this.$nextTick(() => { |
||||
|
const tree = this.$refs.userMenuTree as Tree |
||||
|
tree.setCheckedKeys([]) |
||||
|
}) |
||||
|
this.$emit('closed') |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.confirm { |
||||
|
position: absolute; |
||||
|
margin-top: 10px; |
||||
|
right: 0px; |
||||
|
} |
||||
|
.cancel { |
||||
|
position: absolute; |
||||
|
margin-top: 10px; |
||||
|
right: 120px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue