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