cKey
5 years ago
5 changed files with 13 additions and 424 deletions
@ -1,45 +0,0 @@ |
|||
<template> |
|||
<div class="role-reference-pane"> |
|||
<el-table |
|||
ref="roleTable" |
|||
v-loading="userLoading" |
|||
row-key="id" |
|||
:data="userList" |
|||
border |
|||
fit |
|||
highlight-current-row |
|||
max-height="250px" |
|||
@row-click="onRowClick" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { dateFormat } from '@/utils' |
|||
import { Component, Vue } from 'vue-property-decorator' |
|||
import RoleAppService, { RoleGetPagedDto } from '@/api/roles' |
|||
|
|||
@Component({ |
|||
name: 'RoleReference', |
|||
filters: { |
|||
dateTimeFilter(datetime: string) { |
|||
const date = new Date(datetime) |
|||
return dateFormat(date, 'YYYY-mm-dd HH:MM') |
|||
} |
|||
} |
|||
}) |
|||
export default class extends Vue { |
|||
private roleQueryFilter = new RoleGetPagedDto() |
|||
|
|||
private hanldGetRoles() { |
|||
// TODO 待完成 |
|||
RoleAppService.getRoles(this.roleQueryFilter).then(res => { |
|||
console.log(res) |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
|
|||
</style> |
|||
@ -1,176 +0,0 @@ |
|||
<template> |
|||
<div class="user-reference-pane"> |
|||
<el-form> |
|||
<el-form-item> |
|||
<el-button |
|||
class="confirm" |
|||
type="primary" |
|||
style="width:100px" |
|||
> |
|||
{{ $t('global.confirm') }} |
|||
</el-button> |
|||
<el-button |
|||
class="cancel" |
|||
style="width:100px" |
|||
> |
|||
{{ $t('global.cancel') }} |
|||
</el-button> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-table |
|||
ref="userTable" |
|||
v-loading="userLoading" |
|||
row-key="id" |
|||
:data="userList" |
|||
border |
|||
fit |
|||
highlight-current-row |
|||
max-height="250px" |
|||
@row-click="onRowClick" |
|||
> |
|||
<el-table-column |
|||
type="selection" |
|||
width="50" |
|||
align="center" |
|||
/> |
|||
<el-table-column |
|||
:label="$t('users.userName')" |
|||
prop="userName" |
|||
sortable |
|||
width="110px" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.userName }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('users.name')" |
|||
prop="name" |
|||
width="110px" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.name }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('users.email')" |
|||
prop="email" |
|||
sortable |
|||
min-width="180" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.email }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('users.phoneNumber')" |
|||
prop="phoneNumber" |
|||
width="140px" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.phoneNumber }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('users.lockoutEnd')" |
|||
prop="lockoutEnd" |
|||
sortable |
|||
width="140px" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.lockoutEnd | dateTimeFilter }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('users.creationTime')" |
|||
prop="creationTime" |
|||
sortable |
|||
width="140px" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.creationTime | dateTimeFilter }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<pagination |
|||
v-show="userCount>0" |
|||
:total="userCount" |
|||
:page.sync="userQueryFilter.skipCount" |
|||
:limit.sync="userQueryFilter.maxResultCount" |
|||
@pagination="handleGetUserList" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { dateFormat } from '@/utils' |
|||
import { Component, Vue } from 'vue-property-decorator' |
|||
import Pagination from '@/components/Pagination/index.vue' |
|||
import UserAppService, { UsersGetPagedDto, UserDataDto } from '@/api/users' |
|||
|
|||
@Component({ |
|||
name: 'UserReference', |
|||
components: { |
|||
Pagination |
|||
}, |
|||
filters: { |
|||
dateTimeFilter(datetime: string) { |
|||
const date = new Date(datetime) |
|||
return dateFormat(date, 'YYYY-mm-dd HH:MM') |
|||
} |
|||
} |
|||
}) |
|||
export default class extends Vue { |
|||
private userCount = 0 |
|||
private userLoading = false |
|||
private userList = new Array<UserDataDto>() |
|||
private userQueryFilter = new UsersGetPagedDto() |
|||
|
|||
mounted() { |
|||
this.handleGetUserList() |
|||
// 滚动延迟加载 |
|||
// const userTable = this.$refs.userTable as any |
|||
// userTable.bodyWrapper.addEventListener('scroll', (res: any) => this.onTableScrollChanged(res), true) |
|||
} |
|||
|
|||
private handleGetUserList() { |
|||
this.userLoading = true |
|||
UserAppService.getUsers(this.userQueryFilter).then(res => { |
|||
this.userList = res.items |
|||
this.userCount = res.totalCount |
|||
this.userLoading = false |
|||
}) |
|||
} |
|||
|
|||
private onRowClick(row: any) { |
|||
const table = this.$refs.userTable as any |
|||
table.toggleRowSelection(row) |
|||
} |
|||
|
|||
private onTableScrollChanged(dom: any) { |
|||
console.log(dom) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.user-reference-pane .user-table { |
|||
width: 100%; |
|||
cursor: pointer; |
|||
} |
|||
.confirm { |
|||
position: relative; |
|||
} |
|||
.cancel { |
|||
position: relative; |
|||
} |
|||
</style> |
|||
@ -1,189 +0,0 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-el-draggable-dialog |
|||
width="800px" |
|||
:visible="showDialog" |
|||
:title="$t('identityServer.identityResourceProperties')" |
|||
custom-class="modal-form" |
|||
:show-close="false" |
|||
@close="onFormClosed(false)" |
|||
> |
|||
<div class="app-container"> |
|||
<el-form |
|||
v-if="checkPermission(['IdentityServer.IdentityResources.Properties.Create'])" |
|||
ref="formIdentityProperty" |
|||
label-width="100px" |
|||
:model="identityProperty" |
|||
:rules="identityPropertyRules" |
|||
> |
|||
<el-form-item |
|||
prop="key" |
|||
:label="$t('identityServer.propertyKey')" |
|||
> |
|||
<el-input |
|||
v-model="identityProperty.key" |
|||
:placeholder="$t('pleaseInputBy', {key: $t('identityServer.propertyKey')})" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
prop="value" |
|||
:label="$t('identityServer.propertyValue')" |
|||
> |
|||
<el-input |
|||
v-model="identityProperty.value" |
|||
:placeholder="$t('pleaseInputBy', {key: $t('identityServer.propertyValue')})" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item |
|||
style="text-align: center;" |
|||
label-width="0px" |
|||
> |
|||
<el-button |
|||
type="primary" |
|||
style="width:180px" |
|||
@click="onSaveIdentityProperty" |
|||
> |
|||
{{ $t('identityServer.createIdentityProperty') }} |
|||
</el-button> |
|||
</el-form-item> |
|||
<el-divider /> |
|||
</el-form> |
|||
</div> |
|||
<el-table |
|||
row-key="key" |
|||
:data="identityResource.properties" |
|||
border |
|||
fit |
|||
highlight-current-row |
|||
style="width: 100%;" |
|||
> |
|||
<el-table-column |
|||
:label="$t('identityServer.propertyKey')" |
|||
prop="key" |
|||
sortable |
|||
width="200px" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.key }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('identityServer.propertyValue')" |
|||
prop="value" |
|||
sortable |
|||
min-width="400px" |
|||
align="center" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<span>{{ row.value }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
:label="$t('operaActions')" |
|||
align="center" |
|||
width="150px" |
|||
> |
|||
<template slot-scope="{row}"> |
|||
<el-button |
|||
:disabled="!checkPermission(['IdentityServer.Clients.Properties.Delete'])" |
|||
size="mini" |
|||
type="primary" |
|||
@click="handleDeleteIdentityProperty(row.key, row.value)" |
|||
> |
|||
{{ $t('identityServer.deleteProperty') }} |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import IdentityResourceService, { IdentityResource, IdentityPropertyCreate } from '@/api/identityresources' |
|||
import { Component, Vue, Prop } from 'vue-property-decorator' |
|||
import { checkPermission } from '@/utils/permission' |
|||
import { ElForm } from 'element-ui/types/form' |
|||
|
|||
@Component({ |
|||
name: 'IdentityPropertyEditForm', |
|||
methods: { |
|||
checkPermission |
|||
} |
|||
}) |
|||
export default class extends Vue { |
|||
@Prop({ default: false }) |
|||
private showDialog!: boolean |
|||
|
|||
@Prop({ default: () => IdentityResource.empty() }) |
|||
private identityResource!: IdentityResource |
|||
|
|||
private identityProperty: IdentityPropertyCreate |
|||
private identityPropertyRules = { |
|||
key: [ |
|||
{ required: true, message: this.l('pleaseInputBy', { key: this.l('identityServer.propertyKey') }), trigger: 'blur' } |
|||
], |
|||
value: [ |
|||
{ required: true, message: this.l('pleaseInputBy', { key: this.l('identityServer.propertyValue') }), trigger: 'blur' } |
|||
] |
|||
} |
|||
|
|||
constructor() { |
|||
super() |
|||
this.identityProperty = IdentityPropertyCreate.empty() |
|||
} |
|||
|
|||
private handleDeleteIdentityProperty(key: string) { |
|||
this.$confirm(this.l('identityServer.deleteIdentityPropertyByKey', { key: key }), |
|||
this.l('identityServer.deleteProperty'), { |
|||
callback: (action) => { |
|||
if (action === 'confirm') { |
|||
IdentityResourceService.deleteProperty(this.identityResource.id, key).then(() => { |
|||
const deletePropertyIndex = this.identityResource.properties.findIndex(p => p.key === key && p.value === key) |
|||
this.identityResource.properties.splice(deletePropertyIndex, 1) |
|||
this.$message.success(this.l('identityServer.deleteIdentityPropertySuccess', { key: key })) |
|||
this.onFormClosed(true) |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
private onSaveIdentityProperty() { |
|||
const frmIdentityProperty = this.$refs.formIdentityProperty as any |
|||
frmIdentityProperty.validate((valid: boolean) => { |
|||
if (valid) { |
|||
this.identityProperty.identityResourceId = this.identityResource.id |
|||
this.identityProperty.concurrencyStamp = this.identityResource.concurrencyStamp |
|||
IdentityResourceService.createProperty(this.identityProperty).then(property => { |
|||
this.identityResource.properties.push(property) |
|||
const successMessage = this.l('identityServer.createIdentityPropertySuccess', { key: this.identityProperty.key }) |
|||
this.$message.success(successMessage) |
|||
this.onFormClosed(true) |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
private onFormClosed(changed: boolean) { |
|||
this.resetFields() |
|||
this.$emit('closed', changed) |
|||
} |
|||
|
|||
private resetFields() { |
|||
const frmIdentityProperty = this.$refs.formIdentityProperty as ElForm |
|||
frmIdentityProperty.resetFields() |
|||
} |
|||
|
|||
private l(name: string, values?: any[] | { [key: string]: any }) { |
|||
return this.$t(name, values).toString() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.full-select { |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue