123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312 |
- <template>
- <div class="app-container page-nesting" style="position: relative">
- <!-- 左侧start -->
- <el-card class="box-card grid-content treeDom roleLeft">
- <template #header>
- <div class="card-header">
- <span>个人中心</span>
- </div>
- </template>
- <div class="text item">
- <span class="text-left">租户名称:</span>
- <span class="text-right">{{tenantName}}</span>
- </div>
- <div class="text item">
- <span class="text-left">管理员:</span>
- <span class="text-right">{{nickName}}</span>
- </div>
- <div class="text item">
- <span class="text-left">管理员手机号:</span>
- <span class="text-right">{{phonenumber}}</span>
- </div>
- <div class="text item">
- <span class="text-left">系统平台:</span>
- <span class="text-right">智慧电力</span>
- </div>
- <div class="text item">
- <span class="text-left">地址:</span>
- <span class="text-right">{{address}}</span>
- </div>
- <div class="text item">
- <span class="text-left">到期时间:</span>
- <span class="text-right">{{tenantTerm}}</span>
- </div>
- </el-card>
- <!-- 左侧end -->
- <!-- 右侧start -->
- <el-card class="box-card grid-content nestingDom">
- <template #header>
- <div class="card-header">
- <span>基本资料</span>
- <!-- <el-button class="button" type="text">Operation button</el-button> -->
- </div>
- </template>
- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
- <el-tab-pane label="个人信息" name="first">
- <el-form :model="form" :rules="rules" label-width="120px">
- <el-form-item label="租户名称" prop="name">
- <el-input v-model="form.name" disabled />
- </el-form-item>
- <el-form-item label="管理员" prop="administrators">
- <el-input v-model="form.administrators" />
- </el-form-item>
- <el-form-item label="管理员手机号" prop="phone">
- <el-input v-model="form.phone" />
- </el-form-item>
- <el-form-item label="地址" prop="address">
- <el-input v-model="form.address" />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="onSubmit">保存</el-button>
- <el-button>取消</el-button>
- </el-form-item>
- </el-form>
- </el-tab-pane>
- <el-tab-pane label="修改密码" name="second">
- <el-form :model="form2" :rules="rules2" label-width="120px">
- <el-form-item label="账号" prop="account">
- <el-input v-model="form2.account" disabled />
- </el-form-item>
- <el-form-item label="原密码" prop="oldPass" type="password">
- <el-input v-model="form2.oldPass" show-password />
- </el-form-item>
- <el-form-item label="密码" prop="pass" type="password">
- <el-input v-model="form2.pass" show-password />
- </el-form-item>
- <el-form-item label="再次输入" prop="passAgain" type="password">
- <el-input v-model="form2.passAgain" show-password />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="onSubmit">保存</el-button>
- <el-button>取消</el-button>
- </el-form-item>
- </el-form>
- </el-tab-pane>
- </el-tabs>
- </el-card>
- <!-- 右侧end -->
- </div>
- </template>
- <script>
- import { defineComponent, ref, onMounted, reactive } from 'vue'
- import * as api from '@/api/user.js'
- // import { ElMessage } from 'element-plus'
- import { useStore } from 'vuex'
- export default defineComponent({
- components: {},
- setup() {
- const activeName = ref('first')
- const store = useStore()
- const tenantName = ref('')
- const phonenumber = ref('')
- const nickName = ref('')
- const address = ref('')
- const tenantTerm = ref('')
- const form = reactive({
- name: '西游科技有限公司',
- administrators: '孙悟空',
- phone: '13255666666',
- address: '上海市青浦区徐泾镇徐乐路208号',
- })
- const form2 = reactive({
- account: 'admin',
- oldPass: '',
- pass: '',
- passAggin: '',
- })
- const validatePass = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('请输入密码'))
- } else if(!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/.test(value)){
- callback(new Error('请输入6-18位特殊字符、字母、数字组合的密码'))
- }else {
- if (this.ruleForm.confirmPwd !== '') {
- this.$refs.ruleForm.validateField('confirmPwd')
- }
- callback()
- }
- }
- const validatePass2 = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('请再次输入密码'))
-
- } else if (value !== form2.pass) {
-
- callback(new Error('两次输入密码不一致!'))
- } else {
- callback()
- }
- }
- //根据不同的域名,显示不同的title和背景图
- function getUserData() {
- api
- .getUserData({
-
- })
- .then((requset) => {
- if (requset.status === 'SUCCESS') {
- console.log('request')
- tenantName.value=requset.data[0].tenantName
- phonenumber.value=requset.data[0].phonenumber
- nickName.value=requset.data[0].nickName
- address.value=requset.data[0].address
- tenantTerm.value=requset.data[0].tenantTerm
-
- // console.log(request)
- // this.backdropUrl = requset.data[0].loginBackUrl
- // this.companyName = requset.data[0].loginTitle
- } else {
- alert(requset.msg)
- }
- })
- }
- onMounted(() => {
- getUserData()
- })
- return {
- store,
- getUserData,
- tenantName,
- phonenumber,
- nickName,
- address,
- tenantTerm,
- activeName,
- form,
- form2,
- rules: {
- name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
- administrators: [
- { required: true, message: '请输入管理员', trigger: 'blur' },
- ],
- phone: [
- { required: true, message: '请输入管理员手机号', trigger: 'blur' },
- ],
- address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
- },
- rules2: {
- account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
- oldPass: [
- { required: true, message: '请输入原密码', trigger: 'blur' },
- { validator: validatePass, trigger: 'blur' },
- ],
- pass: [
- { required: true, message: '请输入密码', trigger: 'blur' },
- { validator: validatePass, trigger: 'blur' },
- ],
- passAgain: [
- { required: true, message: '请再次输入密码', trigger: 'blur' },
- { validator: validatePass2, trigger: 'blur', required: true },
- ],
- },
- }
- },
- })
- </script>
- <style scoped lang="scss">
- // start
- .nestingDom {
- margin-left: 285px;
- }
- .treeDom {
- width: 270px;
- position: absolute;
- left: 0;
- height: calc(100vh - 140px);
- }
- .grid-content {
- background: #fff;
- height: calc(100vh - 140px);
- overflow-y: auto;
- }
- .app-container.page-nesting {
- padding: 0;
- background: rgba(0, 0, 0, 0);
- }
- .card-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .text {
- font-size: 14px;
- }
- .item {
- margin-bottom: 18px;
- }
- .box-card {
- // width: 480px;
- }
- ::v-deep .el-card__body {
- padding: 15px;
- }
- ::v-deep .el-card__header {
- padding: 14px 15px 7px !important;
- }
- ::v-deep .item {
- padding: 11px 0;
- border-bottom: 1px solid #e7eaec;
- margin: 0;
- }
- .text-left {
- width: 98px;
- }
- .text-right {
- width: calc(100% - 98px);
- }
- .text-left,
- .text-right {
- display: inline-block;
- vertical-align: top;
- }
- .demo-tabs > .el-tabs__content {
- padding: 32px;
- color: #6b778c;
- font-size: 32px;
- font-weight: 600;
- }
- .el-form-item {
- margin: 20px 0 !important;
- max-width: auto;
- }
- .el-form-item__content {
- width: calc(100% - 120px) !important;
- }
- // end
- // .el-button + .el-button {
- // margin-left: 0;
- // }
- // .el-input__inner {
- // border-radius: 20px !important;
- // }
- </style>
|