index.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. <template>
  2. <div class="app-container page-nesting" style="position: relative">
  3. <!-- 左侧start -->
  4. <el-card class="box-card grid-content treeDom roleLeft">
  5. <template #header>
  6. <div class="card-header">
  7. <span>个人中心</span>
  8. </div>
  9. </template>
  10. <div class="text item">
  11. <span class="text-left">租户名称:</span>
  12. <span class="text-right">{{tenantName}}</span>
  13. </div>
  14. <div class="text item">
  15. <span class="text-left">管理员:</span>
  16. <span class="text-right">{{nickName}}</span>
  17. </div>
  18. <div class="text item">
  19. <span class="text-left">管理员手机号:</span>
  20. <span class="text-right">{{phonenumber}}</span>
  21. </div>
  22. <div class="text item">
  23. <span class="text-left">系统平台:</span>
  24. <span class="text-right">智慧电力</span>
  25. </div>
  26. <div class="text item">
  27. <span class="text-left">地址:</span>
  28. <span class="text-right">{{address}}</span>
  29. </div>
  30. <div class="text item">
  31. <span class="text-left">到期时间:</span>
  32. <span class="text-right">{{tenantTerm}}</span>
  33. </div>
  34. </el-card>
  35. <!-- 左侧end -->
  36. <!-- 右侧start -->
  37. <el-card class="box-card grid-content nestingDom">
  38. <template #header>
  39. <div class="card-header">
  40. <span>基本资料</span>
  41. <!-- <el-button class="button" type="text">Operation button</el-button> -->
  42. </div>
  43. </template>
  44. <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  45. <el-tab-pane label="个人信息" name="first">
  46. <el-form :model="form" :rules="rules" label-width="120px">
  47. <el-form-item label="租户名称" prop="name">
  48. <el-input v-model="form.name" disabled />
  49. </el-form-item>
  50. <el-form-item label="管理员" prop="administrators">
  51. <el-input v-model="form.administrators" />
  52. </el-form-item>
  53. <el-form-item label="管理员手机号" prop="phone">
  54. <el-input v-model="form.phone" />
  55. </el-form-item>
  56. <el-form-item label="地址" prop="address">
  57. <el-input v-model="form.address" />
  58. </el-form-item>
  59. <el-form-item>
  60. <el-button type="primary" @click="onSubmit">保存</el-button>
  61. <el-button>取消</el-button>
  62. </el-form-item>
  63. </el-form>
  64. </el-tab-pane>
  65. <el-tab-pane label="修改密码" name="second">
  66. <el-form :model="form2" :rules="rules2" label-width="120px">
  67. <el-form-item label="账号" prop="account">
  68. <el-input v-model="form2.account" disabled />
  69. </el-form-item>
  70. <el-form-item label="原密码" prop="oldPass" type="password">
  71. <el-input v-model="form2.oldPass" show-password />
  72. </el-form-item>
  73. <el-form-item label="密码" prop="pass" type="password">
  74. <el-input v-model="form2.pass" show-password />
  75. </el-form-item>
  76. <el-form-item label="再次输入" prop="passAgain" type="password">
  77. <el-input v-model="form2.passAgain" show-password />
  78. </el-form-item>
  79. <el-form-item>
  80. <el-button type="primary" @click="onSubmit">保存</el-button>
  81. <el-button>取消</el-button>
  82. </el-form-item>
  83. </el-form>
  84. </el-tab-pane>
  85. </el-tabs>
  86. </el-card>
  87. <!-- 右侧end -->
  88. </div>
  89. </template>
  90. <script>
  91. import { defineComponent, ref, onMounted, reactive } from 'vue'
  92. import * as api from '@/api/user.js'
  93. // import { ElMessage } from 'element-plus'
  94. import { useStore } from 'vuex'
  95. export default defineComponent({
  96. components: {},
  97. setup() {
  98. const activeName = ref('first')
  99. const store = useStore()
  100. const tenantName = ref('')
  101. const phonenumber = ref('')
  102. const nickName = ref('')
  103. const address = ref('')
  104. const tenantTerm = ref('')
  105. const form = reactive({
  106. name: '西游科技有限公司',
  107. administrators: '孙悟空',
  108. phone: '13255666666',
  109. address: '上海市青浦区徐泾镇徐乐路208号',
  110. })
  111. const form2 = reactive({
  112. account: 'admin',
  113. oldPass: '',
  114. pass: '',
  115. passAggin: '',
  116. })
  117. const validatePass = (rule, value, callback) => {
  118. if (value === '') {
  119. callback(new Error('请输入密码'))
  120. } else if(!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/.test(value)){
  121. callback(new Error('请输入6-18位特殊字符、字母、数字组合的密码'))
  122. }else {
  123. if (this.ruleForm.confirmPwd !== '') {
  124. this.$refs.ruleForm.validateField('confirmPwd')
  125. }
  126. callback()
  127. }
  128. }
  129. const validatePass2 = (rule, value, callback) => {
  130. if (value === '') {
  131. callback(new Error('请再次输入密码'))
  132. } else if (value !== form2.pass) {
  133. callback(new Error('两次输入密码不一致!'))
  134. } else {
  135. callback()
  136. }
  137. }
  138. //根据不同的域名,显示不同的title和背景图
  139. function getUserData() {
  140. api
  141. .getUserData({
  142. })
  143. .then((requset) => {
  144. if (requset.status === 'SUCCESS') {
  145. console.log('request')
  146. tenantName.value=requset.data[0].tenantName
  147. phonenumber.value=requset.data[0].phonenumber
  148. nickName.value=requset.data[0].nickName
  149. address.value=requset.data[0].address
  150. tenantTerm.value=requset.data[0].tenantTerm
  151. // console.log(request)
  152. // this.backdropUrl = requset.data[0].loginBackUrl
  153. // this.companyName = requset.data[0].loginTitle
  154. } else {
  155. alert(requset.msg)
  156. }
  157. })
  158. }
  159. onMounted(() => {
  160. getUserData()
  161. })
  162. return {
  163. store,
  164. getUserData,
  165. tenantName,
  166. phonenumber,
  167. nickName,
  168. address,
  169. tenantTerm,
  170. activeName,
  171. form,
  172. form2,
  173. rules: {
  174. name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }],
  175. administrators: [
  176. { required: true, message: '请输入管理员', trigger: 'blur' },
  177. ],
  178. phone: [
  179. { required: true, message: '请输入管理员手机号', trigger: 'blur' },
  180. ],
  181. address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
  182. },
  183. rules2: {
  184. account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  185. oldPass: [
  186. { required: true, message: '请输入原密码', trigger: 'blur' },
  187. { validator: validatePass, trigger: 'blur' },
  188. ],
  189. pass: [
  190. { required: true, message: '请输入密码', trigger: 'blur' },
  191. { validator: validatePass, trigger: 'blur' },
  192. ],
  193. passAgain: [
  194. { required: true, message: '请再次输入密码', trigger: 'blur' },
  195. { validator: validatePass2, trigger: 'blur', required: true },
  196. ],
  197. },
  198. }
  199. },
  200. })
  201. </script>
  202. <style scoped lang="scss">
  203. // start
  204. .nestingDom {
  205. margin-left: 285px;
  206. }
  207. .treeDom {
  208. width: 270px;
  209. position: absolute;
  210. left: 0;
  211. height: calc(100vh - 140px);
  212. }
  213. .grid-content {
  214. background: #fff;
  215. height: calc(100vh - 140px);
  216. overflow-y: auto;
  217. }
  218. .app-container.page-nesting {
  219. padding: 0;
  220. background: rgba(0, 0, 0, 0);
  221. }
  222. .card-header {
  223. display: flex;
  224. justify-content: space-between;
  225. align-items: center;
  226. }
  227. .text {
  228. font-size: 14px;
  229. }
  230. .item {
  231. margin-bottom: 18px;
  232. }
  233. .box-card {
  234. // width: 480px;
  235. }
  236. ::v-deep .el-card__body {
  237. padding: 15px;
  238. }
  239. ::v-deep .el-card__header {
  240. padding: 14px 15px 7px !important;
  241. }
  242. ::v-deep .item {
  243. padding: 11px 0;
  244. border-bottom: 1px solid #e7eaec;
  245. margin: 0;
  246. }
  247. .text-left {
  248. width: 98px;
  249. }
  250. .text-right {
  251. width: calc(100% - 98px);
  252. }
  253. .text-left,
  254. .text-right {
  255. display: inline-block;
  256. vertical-align: top;
  257. }
  258. .demo-tabs > .el-tabs__content {
  259. padding: 32px;
  260. color: #6b778c;
  261. font-size: 32px;
  262. font-weight: 600;
  263. }
  264. .el-form-item {
  265. margin: 20px 0 !important;
  266. max-width: auto;
  267. }
  268. .el-form-item__content {
  269. width: calc(100% - 120px) !important;
  270. }
  271. // end
  272. // .el-button + .el-button {
  273. // margin-left: 0;
  274. // }
  275. // .el-input__inner {
  276. // border-radius: 20px !important;
  277. // }
  278. </style>