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