From 60661ec01fab391ae1452c3480ccca9c72022e89 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Thu, 14 Mar 2024 17:23:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AF=86=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PanThumb/index.vue             | 142 ++++++++++++++++++
 src/layout/index.vue                          |   5 +
 src/router/index.js                           |  17 ++-
 src/views/system/component/Account.vue        |  72 +++++++++
 src/views/system/component/Timeline.vue       |  54 +++++++
 src/views/system/component/UserCard.vue       | 118 +++++++++++++++
 src/views/system/password.vue                 |  85 +++++++++++
 .../system/workerComponents/department.vue    |   6 +-
 src/views/system/workerComponents/toDo.vue    |  36 ++---
 src/views/system/workerComponents/type.vue    |   6 +-
 10 files changed, 510 insertions(+), 31 deletions(-)
 create mode 100644 src/components/PanThumb/index.vue
 create mode 100644 src/views/system/component/Account.vue
 create mode 100644 src/views/system/component/Timeline.vue
 create mode 100644 src/views/system/component/UserCard.vue
 create mode 100644 src/views/system/password.vue

diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
new file mode 100644
index 0000000..1bcf417
--- /dev/null
+++ b/src/components/PanThumb/index.vue
@@ -0,0 +1,142 @@
+<template>
+  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
+    <div class="pan-info">
+      <div class="pan-info-roles-container">
+        <slot />
+      </div>
+    </div>
+    <!-- eslint-disable-next-line -->
+    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PanThumb',
+  props: {
+    image: {
+      type: String,
+      required: true
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    width: {
+      type: String,
+      default: '150px'
+    },
+    height: {
+      type: String,
+      default: '150px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pan-item {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.pan-info-roles-container {
+  padding: 20px;
+  text-align: center;
+}
+
+.pan-thumb {
+  width: 100%;
+  height: 100%;
+  background-position: center center;
+  background-size: cover;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: 95% 40%;
+  transition: all 0.3s ease-in-out;
+}
+
+/* .pan-thumb:after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  border-radius: 50%;
+  top: 40%;
+  left: 95%;
+  margin: -4px 0 0 -4px;
+  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
+} */
+
+.pan-info {
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.pan-info h3 {
+  color: #fff;
+  text-transform: uppercase;
+  position: relative;
+  letter-spacing: 2px;
+  font-size: 18px;
+  margin: 0 60px;
+  padding: 22px 0 0 0;
+  height: 85px;
+  font-family: 'Open Sans', Arial, sans-serif;
+  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.pan-info p {
+  color: #fff;
+  padding: 10px 5px;
+  font-style: italic;
+  margin: 0 30px;
+  font-size: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.pan-info p a {
+  display: block;
+  color: #333;
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  color: #fff;
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 9px;
+  letter-spacing: 1px;
+  padding-top: 24px;
+  margin: 7px auto 0;
+  font-family: 'Open Sans', Arial, sans-serif;
+  opacity: 0;
+  transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
+  transform: translateX(60px) rotate(90deg);
+}
+
+.pan-info p a:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.pan-item:hover .pan-thumb {
+  transform: rotate(-110deg);
+}
+
+.pan-item:hover .pan-info p a {
+  opacity: 1;
+  transform: translateX(0px) rotate(0deg);
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 898b94f..4a34b81 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -30,6 +30,11 @@
             <router-link to="/">
               <el-dropdown-item> 系统首页 </el-dropdown-item>
             </router-link>
+            <router-link to="/info/password">
+              <el-dropdown-item>
+                个人信息
+              </el-dropdown-item>
+            </router-link>
             <el-dropdown-item divided @click.native="logout">
               <span style="display: block">退出</span>
             </el-dropdown-item>
diff --git a/src/router/index.js b/src/router/index.js
index 0096aec..40cd849 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -55,7 +55,22 @@ export const constantRoutes = [{
         icon: 'dashboard'
       }
     }]
-  }
+  },
+  {
+    path: "/info",
+    component: Layout,
+    children: [
+      {
+        path: "password",
+        component: () => import("@/views/system/password"),
+        name: "密码修改",
+        meta: {
+          title: "密码修改",
+        },
+      },
+    ],
+    hidden: true,
+  },
 ]
 
 /**
diff --git a/src/views/system/component/Account.vue b/src/views/system/component/Account.vue
new file mode 100644
index 0000000..41dce98
--- /dev/null
+++ b/src/views/system/component/Account.vue
@@ -0,0 +1,72 @@
+<template>
+  <el-form :model="form" ref="form" :rules="rules">
+    <el-form-item label="姓名" label-position="right" prop="name">
+      <el-input v-model.trim="form.name" />
+    </el-form-item>
+    <el-form-item label="密码" label-position="right" prop="password">
+      <el-input v-model.trim="form.password" type="password" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submit">保存</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+  import {
+    save
+  } from '@/api/system/user.js'
+  import {
+    getInfo
+  } from '@/api/user.js'
+
+  export default {
+    data() {
+      return {
+        form: {
+          id: "",
+          name: "",
+          username: "",
+          password: ""
+        },
+        rules: {
+          name: [{
+            required: true,
+            message: '请输入姓名',
+            trigger: 'blur'
+          }],
+          password: [{
+            required: true,
+            message: '请输入密码',
+            trigger: 'blur',
+          }]
+        },
+      }
+    },
+    created() {
+      getInfo().then(res => {
+        this.form.id = res.id;
+        this.form.name = res.name
+        this.form.username = res.username
+      })
+    },
+    methods: {
+      submit() {
+        let that = this;
+        this.$refs["form"].validate((valid) => {
+          if (valid) {
+            save(that.form).then(response => {
+              this.$Message.success('操作成功');
+            }).catch(error => {
+              //reject(error)
+            })
+          } else {
+            this.$Message.error('数据校验失败');
+            console.log('error submit!!');
+            return false;
+          }
+        });
+      }
+    }
+  }
+</script>
diff --git a/src/views/system/component/Timeline.vue b/src/views/system/component/Timeline.vue
new file mode 100644
index 0000000..fb00059
--- /dev/null
+++ b/src/views/system/component/Timeline.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="block">
+    <el-timeline>
+      <el-timeline-item v-for="(item,index) of timeline" :key="index" :timestamp="item.timestamp" placement="top">
+        <el-card>
+          <h4>{{ item.created_at }}</h4>
+          <p>{{ item.name }}</p>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+  import {
+    index as listlog
+  } from "@/api/system/log.js";
+  export default {
+    data() {
+      return {
+        timeline: [],
+        paginations: {
+          page: 1,
+          page_size: 15,
+          total: 0
+        },
+        tableHeight: 0,
+        //查询条件字段
+        searchFields: {
+          keyword: ""
+        }
+      }
+    },
+    created() {
+      this.load();
+    },
+    methods: {
+      load() {
+        var that = this;
+        listlog({
+          page: that.paginations.page,
+          ...this.searchFields
+        }).then(response => {
+          var data = response.data;
+          this.paginations.total = response.total;
+          that.timeline = data;
+        }).catch(error => {
+          console.log(error)
+          //reject(error)
+        })
+      }
+    }
+  }
+</script>
diff --git a/src/views/system/component/UserCard.vue b/src/views/system/component/UserCard.vue
new file mode 100644
index 0000000..f69c341
--- /dev/null
+++ b/src/views/system/component/UserCard.vue
@@ -0,0 +1,118 @@
+<template>
+  <el-card style="margin-bottom:20px;">
+    <div slot="header" class="clearfix">
+      <span>个人信息</span>
+    </div>
+
+    <div class="user-profile">
+      <div class="box-center">
+        <pan-thumb :image="user.avatar || ''" :height="'100px'" :width="'100px'" :hoverable="false">
+          <div>Hello</div>
+          {{ user.role }}
+        </pan-thumb>
+      </div>
+      <div class="box-center">
+        <div class="user-name text-center">{{ user.name }}</div>
+        <div class="user-role text-center text-muted">{{ user.role }}</div>
+      </div>
+    </div>
+
+    <div class="user-bio">
+      <div class="user-education user-bio-section">
+        <div class="user-bio-section-header">
+          <svg-icon icon-class="education" /><span>部门信息</span>
+        </div>
+        <div class="user-bio-section-body">
+          <div class="text-muted">
+            {{user.department||"暂无"}}
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </el-card>
+</template>
+
+<script>
+  import PanThumb from '@/components/PanThumb'
+
+  export default {
+    components: {
+      PanThumb
+    },
+    props: {
+      user: {
+        type: Object,
+        default: () => {
+          return {
+            name: '',
+            username: '',
+            avatar: '',
+            role: '',
+            department: ''
+          }
+        }
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .box-center {
+    margin: 0 auto;
+    display: table;
+  }
+
+  .text-muted {
+    color: #777;
+  }
+
+  .user-profile {
+    .user-name {
+      font-weight: bold;
+    }
+
+    .box-center {
+      padding-top: 10px;
+    }
+
+    .user-role {
+      padding-top: 10px;
+      font-weight: 400;
+      font-size: 14px;
+    }
+
+    .box-social {
+      padding-top: 30px;
+
+      .el-table {
+        border-top: 1px solid #dfe6ec;
+      }
+    }
+
+    .user-follow {
+      padding-top: 20px;
+    }
+  }
+
+  .user-bio {
+    margin-top: 20px;
+    color: #606266;
+
+    span {
+      padding-left: 4px;
+    }
+
+    .user-bio-section {
+      font-size: 14px;
+      padding: 15px 0;
+
+      .user-bio-section-header {
+        border-bottom: 1px solid #dfe6ec;
+        padding-bottom: 10px;
+        margin-bottom: 10px;
+        font-weight: bold;
+      }
+    }
+  }
+</style>
diff --git a/src/views/system/password.vue b/src/views/system/password.vue
new file mode 100644
index 0000000..4da59a5
--- /dev/null
+++ b/src/views/system/password.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="" style="margin: 20px;" id="reset-password">
+    <div v-if="user">
+      <el-row :gutter="20">
+
+        <el-col :span="6" :xs="24">
+          <user-card :user="user" />
+        </el-col>
+
+        <el-col :span="18" :xs="24">
+          <el-card>
+            <el-tabs v-model="activeTab">
+              <el-tab-pane label="操作日志" name="timeline">
+                <timeline />
+              </el-tab-pane>
+              <el-tab-pane label="信息修改" name="account">
+                <account />
+              </el-tab-pane>
+            </el-tabs>
+          </el-card>
+        </el-col>
+
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    mapGetters
+  } from 'vuex'
+  import UserCard from './component/UserCard'
+  import Timeline from './component/Timeline'
+  import Account from './component/Account'
+
+  import {
+    getInfo
+  } from '@/api/user'
+
+  export default {
+    name: 'Profile',
+    components: {
+      UserCard,
+      Timeline,
+      Account
+    },
+    data() {
+      return {
+        user: {},
+        activeTab: 'timeline'
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'name',
+        'avatar',
+        'roles'
+      ])
+    },
+    created() {
+      this.getUser()
+    },
+    methods: {
+      getUser() {
+
+        getInfo().then(res => {
+          this.user = {
+            name:res.name,
+            username:res.username,
+            role: this.roles.join(' | '),
+            avatar: this.avatar
+          }
+        })
+
+      }
+    }
+  }
+</script>
+<style lang="scss">
+#app:has(#reset-password) {
+  .sidebar-container {
+    display: none;
+  }
+}
+</style>
diff --git a/src/views/system/workerComponents/department.vue b/src/views/system/workerComponents/department.vue
index 85d6b35..22e29f4 100644
--- a/src/views/system/workerComponents/department.vue
+++ b/src/views/system/workerComponents/department.vue
@@ -7,8 +7,10 @@
       <i class="el-icon-more" style="float: right; font-size: 20px"></i>
     </div>
 
-    <div>
-      <Table :height="tableHeight" size="small" :data="departmentList" :columns="table"></Table>
+    <div style="position: relative">
+      <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
+        <Table :height="tableHeight" size="small" :data="departmentList" :columns="table"></Table>
+      </div>
     </div>
   </el-card>
 </template>
diff --git a/src/views/system/workerComponents/toDo.vue b/src/views/system/workerComponents/toDo.vue
index d04bee8..4142ada 100644
--- a/src/views/system/workerComponents/toDo.vue
+++ b/src/views/system/workerComponents/toDo.vue
@@ -7,32 +7,16 @@
       <i class="el-icon-more" style="float: right; font-size: 20px"></i>
     </div>
 
-    <div>
-      <Table
-        :height="tableHeight"
-        :loading="loading"
-        size="small"
-        :data="/^\/system/.test(this.$route.path) ? example : list"
-        :columns="table"
-      ></Table>
-
-<!--      <div-->
-<!--        ref="todo-page"-->
-<!--        style="display: flex; justify-content: center; margin: 10px 0"-->
-<!--      >-->
-<!--        <Page-->
-<!--          :total="/^\/system/.test(this.$route.path) ? example.length : total"-->
-<!--          size="small"-->
-<!--          show-elevator-->
-<!--          show-total-->
-<!--          @on-change="-->
-<!--            (e) => {-->
-<!--              select.page = e;-->
-<!--              getNotices();-->
-<!--            }-->
-<!--          "-->
-<!--        />-->
-<!--      </div>-->
+    <div style="position: relative">
+      <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
+        <Table
+          :height="tableHeight"
+          :loading="loading"
+          size="small"
+          :data="/^\/system/.test(this.$route.path) ? example : list"
+          :columns="table"
+        ></Table>
+      </div>
     </div>
   </el-card>
 </template>
diff --git a/src/views/system/workerComponents/type.vue b/src/views/system/workerComponents/type.vue
index 127a585..ec0afa9 100644
--- a/src/views/system/workerComponents/type.vue
+++ b/src/views/system/workerComponents/type.vue
@@ -7,8 +7,10 @@
       <i class="el-icon-more" style="float: right; font-size: 20px"></i>
     </div>
 
-    <div id="type-card-body">
-      <Table :height="tableHeight" size="small" :data="departmentList" :columns="table"></Table>
+    <div id="type-card-body" style="position: relative">
+      <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
+        <Table style="width: 100%;" :height="tableHeight" size="small" :data="departmentList" :columns="table"></Table>
+      </div>
     </div>
   </el-card>
 </template>