修改

src/router/index.js

@@ -56,7 +56,7 @@ export const constantRoutes = [
       {
         path: '/acccount',
         name: 'acccount',
-        meta: { title: '修改密码' },
+        meta: { title: '个人中心' },
         component: () => import('@/views/account/index.vue')
       }
     ]

src/views/account/index.vue

@@ -2,61 +2,42 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one">
-          <custom-form v-model="form" :fields="fields" :rules="rules" @save="toSave"></custom-form>
-        </el-col>
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span>个人中心</span>
+            </div>
+          </template>
+          <el-col :span="24" class="one">
+            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+              <el-tab-pane label="基本信息" name="first">
+                <basic></basic>
+              </el-tab-pane>
+              <el-tab-pane label="修改密码" name="second">
+                <password></password>
+              </el-tab-pane>
+            </el-tabs>
+          </el-col>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup>
-import { UserStore } from '@/store/user'
-import { useTagsViewStore } from '@/store'
-import { LoginStore } from '@/store/api/login'
-const store = LoginStore()
-const userStore = UserStore()
-const tagsViewStore = useTagsViewStore()
-const user = computed(() => userStore.user)
-const router = useRouter()
-const $checkRes = inject('$checkRes')
+import basic from './parts/basic.vue'
+import password from './parts/password.vue'
 // 加载中
 const loading = ref(false)
-// 表单
-const form = ref({})
-const fields = ref([
-  { label: '新密码', model: 'password', type: 'password' },
-  { label: '确认新密码', model: 'ispassword', type: 'password' }
-])
-const rules = ref({
-  password: [{ required: true, message: '请输入新密码' }],
-  ispassword: [
-    { required: true, message: '请输入确认新密码' },
-    {
-      trigger: 'blur',
-      validator: (rule, value, callback) => {
-        if (form.value.password !== value) {
-          callback(new Error('两次输入的密码不一致'))
-        } else {
-          callback()
-        }
-      }
-    }
-  ]
-})
 // 请求
 onMounted(async () => {
   loading.value = true
   loading.value = false
 })
-// 提交保存
-const toSave = async (data) => {
-  let res = await store.rp({ id: user.id, password: data.password, type: user.role })
-  if ($checkRes(res, true)) {
-    userStore.logOut()
-    tagsViewStore.delAllViews()
-    router.push('/login')
-  }
+const activeName = ref('first')
+
+const handleClick = (tab, event) => {
+  console.log(tab, event)
 }
 </script>
 <style scoped lang="scss"></style>

src/views/account/parts/basic.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main" v-loading="loading">
+        <el-col :span="24" class="one">
+          <custom-form v-model="form" :fields="fields" :rules="rules" @save="toSave">
+            <template #is_super="{ item }">
+              <template v-if="item.model === 'is_super'">
+                <el-col :span="24" class="one_1">{{ form.is_super == true ? '是' : '否' }}</el-col>
+              </template>
+            </template>
+            <template #role="{ item }">
+              <template v-if="item.model === 'role'">
+                <el-col :span="24" class="one_1" v-if="form.role?.length > 0">{{ getRole(form.role) }}</el-col>
+                <el-col :span="24" class="one_1" v-else>暂无角色</el-col>
+              </template>
+            </template>
+          </custom-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { UserStore } from '@/store/user'
+import { RoleStore } from '@/store/api/system/role'
+const roleStore = RoleStore()
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+const $checkRes = inject('$checkRes')
+// 加载中
+const loading = ref(false)
+// 表单
+const form = ref({})
+const fields = ref([
+  { label: '昵称', model: 'nick_name' },
+  { label: '账号', model: 'account', options: { readonly: true } },
+  { label: '角色', model: 'role', custom: true },
+  { label: '超级管理员', model: 'is_super', options: { readonly: true }, custom: true }
+])
+const rules = ref({
+  nick_name: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
+  is_super: [{ required: true, message: '请输入超级管理员', trigger: 'blur' }],
+  account: [{ required: true, message: '请输入用户账号', trigger: 'blur' }]
+})
+const roleList = ref([])
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await searchOther()
+  await search()
+  loading.value = false
+})
+const searchOther = async () => {
+  let result
+  // 是否使用
+  result = await roleStore.query({ is_use: '0' })
+  if ($checkRes(result)) roleList.value = result.data
+}
+const search = async () => {
+  console.log(user.value)
+  form.value = user.value
+}
+const getRole = (i) => {
+  if (i && i.length > 0) {
+    const arr = []
+    for (const val of i) {
+      const r = roleList.value.find((f) => f.code === val)
+      if (r) arr.push(r.name)
+    }
+    return arr.join(';')
+  }
+}
+// 提交保存
+const toSave = async (data) => {
+  console.log(data)
+}
+</script>
+<style scoped lang="scss"></style>

src/views/account/parts/password.vue

@@ -0,0 +1,55 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main ">
+        <el-col :span="24" class="one">
+          <custom-form v-model="form" :fields="fields" :rules="rules" @save="toSave"></custom-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { UserStore } from '@/store/user'
+import { useTagsViewStore } from '@/store'
+import { LoginStore } from '@/store/api/login'
+const store = LoginStore()
+const userStore = UserStore()
+const tagsViewStore = useTagsViewStore()
+const user = computed(() => userStore.user)
+const router = useRouter()
+const $checkRes = inject('$checkRes')
+// 表单
+const form = ref({})
+const fields = ref([
+  { label: '新密码', model: 'password', type: 'password' },
+  { label: '确认新密码', model: 'ispassword', type: 'password' }
+])
+const rules = ref({
+  password: [{ required: true, message: '请输入新密码' }],
+  ispassword: [
+    { required: true, message: '请输入确认新密码' },
+    {
+      trigger: 'blur',
+      validator: (rule, value, callback) => {
+        if (form.value.password !== value) {
+          callback(new Error('两次输入的密码不一致'))
+        } else {
+          callback()
+        }
+      }
+    }
+  ]
+})
+// 提交保存
+const toSave = async (data) => {
+  let res = await store.rp({ id: user._id, password: data.password, type: user.role })
+  if ($checkRes(res, true)) {
+    userStore.logOut()
+    tagsViewStore.delAllViews()
+    router.push('/login')
+  }
+}
+</script>
+<style scoped lang="scss"></style>