|
|
@@ -1,79 +1,187 @@
|
|
|
<template>
|
|
|
- <el-container>
|
|
|
+ <el-container class="dashboard-container">
|
|
|
<el-main class="movie-list">
|
|
|
- <div>
|
|
|
- <h3>我的角色</h3>
|
|
|
- <el-button
|
|
|
- v-for="(item, index) in roles"
|
|
|
- :key="index"
|
|
|
- icon="el-icon-user-solid"
|
|
|
- style="padding: 5px"
|
|
|
- @click="goToRole(item)"
|
|
|
- >
|
|
|
- {{ item }}
|
|
|
- </el-button>
|
|
|
+ <div class="section-block">
|
|
|
+ <h3 class="section-title">我的角色</h3>
|
|
|
+ <div class="btn-group">
|
|
|
+ <el-button
|
|
|
+ v-for="item in roles"
|
|
|
+ :key="item"
|
|
|
+ icon="el-icon-user-solid"
|
|
|
+ size="small"
|
|
|
+ @click="goToRole(item)"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <h3>Dashboard</h3>
|
|
|
- <el-button icon="el-icon-files" style="padding: 5px" @click="goToDisk">Disk</el-button>
|
|
|
- <el-button icon="el-icon-film" style="padding: 5px" @click="goToVod">VOD</el-button>
|
|
|
- <el-button icon="el-icon-document" style="padding: 5px" @click="goToBlog">Blog</el-button>
|
|
|
+
|
|
|
+ <div class="section-block">
|
|
|
+ <h3 class="section-title">Dashboard</h3>
|
|
|
+ <div class="btn-group">
|
|
|
+ <el-button icon="el-icon-files" size="small" @click="navTo('/disk')">Disk</el-button>
|
|
|
+ <el-button icon="el-icon-film" size="small" @click="navTo('/')">VOD</el-button>
|
|
|
+ <el-button icon="el-icon-document" size="small" @click="navTo('/blog')">Blog</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-grid">
|
|
|
+ <el-card class="box-card" shadow="hover">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>我的资料</span>
|
|
|
+ </div>
|
|
|
+ <el-form ref="profileForm" :model="loginUser" label-width="80px" size="small">
|
|
|
+ <el-form-item label="性别">
|
|
|
+ <el-input v-model="loginUser.gender" class="w-70" readonly />
|
|
|
+ </el-form-item>
|
|
|
+ <br />
|
|
|
+ <el-form-item label="签名">
|
|
|
+ <el-input
|
|
|
+ v-model="loginUser.signature"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ class="w-70"
|
|
|
+ readonly
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box-card" shadow="hover">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>我的帐号</span>
|
|
|
+ </div>
|
|
|
+ <el-form ref="accountForm" :model="loginUser" label-width="80px" size="small">
|
|
|
+ <el-form-item label="用户 ID">
|
|
|
+ <el-input v-model="loginUser.userId" class="w-70" readonly />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用户名">
|
|
|
+ <el-input v-model="loginUser.username" class="w-70" readonly />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="显示名">
|
|
|
+ <el-input v-model="loginUser.screenName" class="w-70" readonly />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机">
|
|
|
+ <el-input v-model="loginUser.mobile" class="w-70" readonly />
|
|
|
+ <el-button type="primary" plain size="mini" class="ml-10" @click="showUpdateDialog(1)">更新</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码">
|
|
|
+ <el-input value="******" type="password" class="w-70" readonly show-password />
|
|
|
+ <el-button type="primary" plain size="mini" class="ml-10" @click="showUpdateDialog(2)">更新</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
</el-main>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { userMixin } from 'assets/js/mixin'
|
|
|
import { getAuthedUser } from '@/utils/auth'
|
|
|
|
|
|
export default {
|
|
|
name: 'Dashboard',
|
|
|
+ mixins: [userMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
+ // 初始化防空指针报错
|
|
|
+ loginUser: {
|
|
|
+ gender: '',
|
|
|
+ signature: '',
|
|
|
+ userId: '',
|
|
|
+ username: '',
|
|
|
+ screenName: '',
|
|
|
+ mobile: '',
|
|
|
+ roles: []
|
|
|
+ },
|
|
|
roles: [],
|
|
|
machineStatList: [],
|
|
|
sysInfo: null
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- const { roles } = getAuthedUser()
|
|
|
- this.roles = roles
|
|
|
- document.title = 'Dashboard'
|
|
|
- this.getData()
|
|
|
+ this.initUserData()
|
|
|
},
|
|
|
methods: {
|
|
|
- getData() {
|
|
|
+ initUserData() {
|
|
|
+ document.title = 'Dashboard'
|
|
|
+ const user = getAuthedUser()
|
|
|
+ if (user) {
|
|
|
+ this.loginUser = user
|
|
|
+ this.roles = user.roles || []
|
|
|
+ }
|
|
|
+ this.getData()
|
|
|
},
|
|
|
- goToRole(data) {
|
|
|
- this.$message.info('role -> ' + data)
|
|
|
+ getData() {
|
|
|
+ // 异步获取其他数据
|
|
|
},
|
|
|
- goToDisk() {
|
|
|
- const path = '/disk'
|
|
|
- if (this.$route.path === path) {
|
|
|
- this.$router.go(0)
|
|
|
- return
|
|
|
- }
|
|
|
- this.$router.push(path)
|
|
|
+ goToRole(role) {
|
|
|
+ this.$message.info(`role -> ${role}`)
|
|
|
},
|
|
|
- goToVod() {
|
|
|
- const path = '/'
|
|
|
+ /**
|
|
|
+ * 统一路由跳转方法，代替原有的三个重复方法
|
|
|
+ * @param {string} path 目标路径
|
|
|
+ */
|
|
|
+ navTo(path) {
|
|
|
if (this.$route.path === path) {
|
|
|
this.$router.go(0)
|
|
|
return
|
|
|
}
|
|
|
this.$router.push(path)
|
|
|
},
|
|
|
- goToBlog() {
|
|
|
- const path = '/blog'
|
|
|
- if (this.$route.path === path) {
|
|
|
- this.$router.go(0)
|
|
|
- return
|
|
|
- }
|
|
|
- this.$router.push(path)
|
|
|
+ showUpdateDialog(type) {
|
|
|
+ // 弹出更新弹窗的逻辑
|
|
|
+ this.$message.success(`打开更新弹窗: ${type === 1 ? '手机' : '密码'}`)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style scoped>
|
|
|
+.dashboard-container {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.section-block {
|
|
|
+ margin-bottom: 25px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 15px 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ color: #303133;
|
|
|
+ font-size: 16px;
|
|
|
+ border-left: 4px solid #409EFF;
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-group .el-button {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 布局网格 */
|
|
|
+.card-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.box-card {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 工具类样式 */
|
|
|
+.w-70 {
|
|
|
+ width: 70% !important;
|
|
|
+}
|
|
|
+.ml-10 {
|
|
|
+ margin-left: 10px !important;
|
|
|
+}
|
|
|
</style>
|
