提交 73f45d9d authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw

fix: 修复个人信息、修改密码刷新后左侧留白;表单过大。

上级 c5fc275c
...@@ -84,6 +84,11 @@ export default { ...@@ -84,6 +84,11 @@ export default {
'user' 'user'
]) ])
}, },
mounted() {
this.$nextTick(() => {
this.$store.dispatch('app/toggleSideBarHide', true)
})
},
created() { created() {
this.$store.dispatch('app/toggleSideBarHide', true) this.$store.dispatch('app/toggleSideBarHide', true)
this.initVersion() this.initVersion()
......
<template> <template>
<layout-content :header="$t('user.change_password')"> <layout-content>
<div style="width: 100%;display: flex;justify-content: center;">
<el-form ref="createUserForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right"> <el-card class="box-card about-card">
<el-form-item :label="$t('user.origin_passwd')" prop="oldPwd"> <div class="form-header">
<el-input v-model="form.oldPwd" type="password" /> <span>{{ $t('user.change_password') }}</span>
</el-form-item> </div>
<el-form-item :label="$t('user.new_passwd')" prop="newPwd"> <el-form ref="createUserForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
<el-input v-model="form.newPwd" type="password" /> <el-form-item :label="$t('user.origin_passwd')" prop="oldPwd">
</el-form-item> <el-input v-model="form.oldPwd" type="password" />
<el-form-item :label="$t('user.confirm_passwd')" prop="repeatPwd"> </el-form-item>
<el-input v-model="form.repeatPwd" type="password" /> <el-form-item :label="$t('user.new_passwd')" prop="newPwd">
</el-form-item> <el-input v-model="form.newPwd" type="password" />
</el-form-item>
<el-form-item> <el-form-item :label="$t('user.confirm_passwd')" prop="repeatPwd">
<el-button type="primary" @click="save">{{ $t('commons.confirm') }}</el-button> <el-input v-model="form.repeatPwd" type="password" />
</el-form-item> </el-form-item>
</el-form>
<el-form-item>
<el-button type="primary" @click="save">{{ $t('commons.confirm') }}</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</layout-content> </layout-content>
</template> </template>
...@@ -54,7 +59,11 @@ export default { ...@@ -54,7 +59,11 @@ export default {
} }
}, },
mounted() {
this.$nextTick(() => {
this.$store.dispatch('app/toggleSideBarHide', true)
})
},
created() { created() {
this.$store.dispatch('app/toggleSideBarHide', true) this.$store.dispatch('app/toggleSideBarHide', true)
}, },
...@@ -86,3 +95,21 @@ export default { ...@@ -86,3 +95,21 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
.about-card {
background: inherit;
margin-top: 5%;
flex-direction: row;
width: 640px;
min-width: 640px;
height: auto;
position: relative;
>>>div.el-card__header {
padding: 0;
}
}
.form-header {
line-height: 60px;
font-size: 18px;
}
</style>
<template> <template>
<layout-content header="个人信息"> <layout-content>
<div> <div style="width: 100%;display: flex;justify-content: center;">
<el-form ref="createUserForm" :disabled="formType !== 'modify'" :model="form" :rules="rule" size="small" label-width="auto" label-position="right"> <el-card class="box-card about-card">
<el-form-item label="ID" prop="username"> <div class="form-header">
<el-input v-model="form.username" disabled /> <span>{{ $t('commons.personal_info') }}</span>
</el-form-item> </div>
<el-form-item :label="$t('commons.phone')" prop="phone"> <el-form ref="createUserForm" :disabled="formType !== 'modify'" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
<el-input v-model="form.phone" /> <el-form-item label="ID" prop="username">
</el-form-item> <el-input v-model="form.username" disabled />
<el-form-item :label="$t('commons.nick_name')" prop="nickName"> </el-form-item>
<el-input v-model="form.nickName" /> <el-form-item :label="$t('commons.phone')" prop="phone">
</el-form-item> <el-input v-model="form.phone" />
<el-form-item :label="$t('commons.email')" prop="email"> </el-form-item>
<el-input v-model="form.email" /> <el-form-item :label="$t('commons.nick_name')" prop="nickName">
</el-form-item> <el-input v-model="form.nickName" />
</el-form-item>
<el-form-item :label="$t('commons.email')" prop="email">
<el-input v-model="form.email" />
</el-form-item>
<el-form-item :label="$t('commons.status')"> <el-form-item :label="$t('commons.status')">
<el-radio-group v-model="form.enabled" disabled style="width: 140px"> <el-radio-group v-model="form.enabled" disabled style="width: 140px">
<el-radio :label="1">{{ $t('commons.enable') }}</el-radio> <el-radio :label="1">{{ $t('commons.enable') }}</el-radio>
<el-radio :label="0">{{ $t('commons.disable') }}</el-radio> <el-radio :label="0">{{ $t('commons.disable') }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item disabled :label="$t('commons.organization')" prop="dept"> <el-form-item disabled :label="$t('commons.organization')" prop="dept">
<treeselect <treeselect
v-model="form.deptId" v-model="form.deptId"
disabled disabled
:options="depts" :options="depts"
:load-options="loadDepts" :load-options="loadDepts"
:auto-load-root-options="false" :auto-load-root-options="false"
:placeholder="$t('user.choose_org')" :placeholder="$t('user.choose_org')"
/>
</el-form-item>
<el-form-item :label="$t('commons.role')" prop="roleIds">
<el-select
v-model="form.roleIds"
disabled
style="width: 100%"
multiple
:placeholder="$t('commons.please_select')"
@remove-tag="deleteTag"
@change="changeRole"
>
<el-option
v-for="item in roles"
:key="item.name"
:label="item.name"
:value="item.id"
/> />
</el-select> </el-form-item>
</el-form-item> <el-form-item :label="$t('commons.role')" prop="roleIds">
<!-- <el-form-item> <el-select
v-model="form.roleIds"
disabled
style="width: 100%"
multiple
:placeholder="$t('commons.please_select')"
@remove-tag="deleteTag"
@change="changeRole"
>
<el-option
v-for="item in roles"
:key="item.name"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- <el-form-item>
<el-button v-if="formType==='modify'" type="primary" @click="save">保存</el-button> <el-button v-if="formType==='modify'" type="primary" @click="save">保存</el-button>
<el-button v-if="formType==='modify'" @click="reset">重置</el-button> <el-button v-if="formType==='modify'" @click="reset">重置</el-button>
</el-form-item> --> </el-form-item> -->
</el-form> </el-form>
<div slot="footer" style="margin-left: 30px;" class="dialog-footer"> <div slot="footer" style="margin-left: 30px;" class="dialog-footer">
<el-button v-if="formType==='modify'" type="text" @click="reset">{{ $t('commons.cancel') }}</el-button> <el-button v-if="formType==='modify'" type="text" @click="reset">{{ $t('commons.cancel') }}</el-button>
<el-button v-if="formType==='modify'" type="primary" @click="save">{{ $t('commons.confirm') }}</el-button> <el-button v-if="formType==='modify'" type="primary" @click="save">{{ $t('commons.confirm') }}</el-button>
<el-button v-if="formType!=='modify'" type="primary" @click="edit">{{ $t('commons.edit') }}</el-button> <el-button v-if="formType!=='modify'" type="primary" @click="edit">{{ $t('commons.edit') }}</el-button>
</div> </div>
</el-card>
</div> </div>
</layout-content> </layout-content>
...@@ -149,7 +154,11 @@ export default { ...@@ -149,7 +154,11 @@ export default {
formType: 'add' formType: 'add'
} }
}, },
mounted() {
this.$nextTick(() => {
this.$store.dispatch('app/toggleSideBarHide', true)
})
},
created() { created() {
this.$store.dispatch('app/toggleSideBarHide', true) this.$store.dispatch('app/toggleSideBarHide', true)
this.queryPerson() this.queryPerson()
...@@ -259,3 +268,21 @@ export default { ...@@ -259,3 +268,21 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
.about-card {
background: inherit;
margin-top: 5%;
flex-direction: row;
width: 640px;
min-width: 640px;
height: auto;
position: relative;
>>>div.el-card__header {
padding: 0;
}
}
.form-header {
line-height: 60px;
font-size: 18px;
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论