用户信息

renchao@pashanhoo.com
Showing 2 changed files with 105 additions and 57 deletions
src/layout/components/Navbar.vue
src/views/system/dzqm/dzqm.vue → src/views/system/userInfo/index.vue
--- a/src/layout/components/Navbar.vue
View file @5265bc9
+++ b/src/layout/components/Navbar.vue
View file @5265bc9
@@ -17,49 +17,54 @@
            }}</span>
            <span style="padding-right: 10px">{{ userInfo.name }}</span>
          </p>
+          <el-dropdown>
+            <span class="el-dropdown-link">
              <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="user" @click.native="handleGetUser">用户信息</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
        </div>
        <svg-icon
          class="shutdown"
          @click.native="logout"
-          icon-class="shutdown"
+          icon-class="shutdown" />
-        />
      </div>
    </div>
    <NoticeBar
      class="NoticeBar"
      :noticeList="noticeList"
-      v-if="noticeList.length > 0"
+      v-if="noticeList.length > 0" />
-    />
  </div>
 </template>
 <script>
-import axios from "axios";
+  import axios from "axios";
-import Cookies from "js-cookie";
+  import Cookies from "js-cookie";
-import { mapGetters } from "vuex";
+  import { mapGetters } from "vuex";
-import NoticeBar from "@/components/NoticeBar/index";
+  import NoticeBar from "@/components/NoticeBar/index";
-import { getHomeNoticeList } from "@/api/home";
+  import { getHomeNoticeList } from "@/api/home";
-import { setToken } from "@/utils/util";
+  import { setToken } from "@/utils/util";
-export default {
+  export default {
    components: {
      NoticeBar,
    },
    computed: {
      ...mapGetters(["sidebar", "avatar", "name", "userInfo"]),
-    baseUrl() {
+      baseUrl () {
        return window._config.baseUrl;
      },
    },
-  data() {
+    data () {
      return {
        logo: require("../../image/bdclogo.png"),
        noticeList: [],
      };
    },
-  created() {
+    created () {
      this.queryNoticeList();
    },
-  mounted() {
+    mounted () {
      let that = this;
      window.addEventListener("message", function (messageEvent) {
        if (messageEvent.data.update) {
@@ -67,15 +72,23 @@ export default {
        }
      });
    },
-  destroyed() {
+    destroyed () {
      window.removeEventListener("message");
    },
    methods: {
+      /**
+       * @description: 获取用户信息
+       * @author: renchao
+       */
+      handleGetUser () {
+        this.$popupDialog('用户信息', 'system/userInfo/index', {}, '80%', true);
+      },
      /**
       * @description: queryNoticeList
       * @author: renchao
       */
-    queryNoticeList() {
+      queryNoticeList () {
        getHomeNoticeList().then((res) => {
          if (res.result) {
            this.noticeList = res.result.noticeList;
@@ -86,7 +99,7 @@ export default {
       * @description: logout
       * @author: renchao
       */
-    logout() {
+      logout () {
        axios
          .post(window._config.services.management + "/management/logout")
          .then(() => {
@@ -105,10 +118,10 @@ export default {
       * @param {*} val
       * @author: renchao
       */
-    themeChange(val) {
+      themeChange (val) {
        this.$store.dispatch("app/updateTheme", val);
      },
-    searchMessageCenter() {
+      searchMessageCenter () {
        this.$router.push({ name: "messagecenter" });
      },
      /**
@@ -116,26 +129,28 @@ export default {
       * @param {*} command
       * @author: renchao
       */
-    handleCommand(command) {
+      handleCommand (command) {
        if (command == "a") {
          //个人中心
          this.$router.push({ name: "personal" });
        }
      },
    },
-};
+  };
 </script>
 <style lang="scss" scoped>
-.navbar-con {
+  .navbar-con {
    position: relative;
-}
+  }
+  /deep/.el-dropdown {
-.NoticeBar {
+    height: 32px;
+  }
+  .NoticeBar {
    position: absolute;
    bottom: 0;
-}
+  }
-.el-dropdown-menu {
+  .el-dropdown-menu {
    padding: 0 !important;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
@@ -168,9 +183,9 @@ export default {
      background: #f6f7f9;
      color: #4a4a4a;
    }
-}
+  }
-.navbar {
+  .navbar {
    height: $headerHeight;
    overflow: hidden;
    position: relative;
@@ -321,5 +336,5 @@ export default {
        }
      }
    }
-}
+  }
 </style>
--- a/src/views/system/dzqm/dzqm.vue → src/views/system/userInfo/index.vue
View file @5265bc9
+++ b/src/views/system/dzqm/dzqm.vue → src/views/system/userInfo/index.vue
View file @5265bc9
@@ -2,32 +2,45 @@
  <div class="from-clues">
    <!-- 表单部分 -->
    <div class="from-clues-header">
-      <el-form :model="ruleForm" label-width="80px">
+      <el-form :model="ruleForm" label-width="100px">
        <el-row>
-          <el-col :span="5">
+          <el-col :span="6">
-            <el-form-item label="电子签名">
+            <el-form-item label="用户名称：">
-              <el-input v-model="ruleForm.dzqm"></el-input>
+              {{ruleForm.name}}
            </el-form-item>
          </el-col>
-          <el-col :span="19" class="btnColRight">
+          <el-col :span="6">
-            <el-form-item>
+            <el-form-item label="组织机构：">
-              <el-button type="primary" native-type="submit">查询</el-button>
+              {{ruleForm.organizationName}}
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="部门：">
+              {{ruleForm.departmentName}}
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="签名路径：">
+              <img :src="ruleForm.dzqmurl" class="signature-image">
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-upload
      class="upload-demo"
      action=""
      :limit="1"
      multiple
+      :key="key"
      :auto-upload="false"
-      accept=".jpg, .png"
+      accept=".jpg, .png, .jpeg"
      :on-change="handleChange"
      :before-upload="beforeUpload"
-      :file-list="fileList"
+      :show-file-list="false"
-      list-type="picture"
      drag>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
@@ -38,36 +51,51 @@
 </template>
 <script>
  import { dzqmUpload } from '@/api/dzqm'
+  import { getUserInfo } from '@/api/user'
  export default {
    name: "dzqm",
    data () {
      return {
-        ruleForm: {
+        ruleForm: {},
-          dzqm: ""
+        key: 0,
-        },
-        fileList: [], // 已上传文件列表
      }
    },
+    mounted () {
+      this.getUserInfo()
+    },
    methods: {
+      async getUserInfo () {
+        let res = await getUserInfo()
+        this.ruleForm = res.result
+      },
      beforeUpload (file) {
-        // 上传文件之前的钩子，返回false则停止上传
+        this.files = file;
-        const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
+        const allowedExtensions = ['jpg', 'jpeg', 'png'];
-        const isLt2M = file.size / 1024 / 1024 < 5;
+        const maxFileSizeMB = 5;
-        if (!isJPGorPNG) {
-          this.$message.error('上传图片只能是 JPG/PNG 格式!');
+        const extension = allowedExtensions.includes(file.name.split('.').pop().toLowerCase());
-          return false;
+        const isLt5M = file.size / 1024 / 1024 < maxFileSizeMB;
-        }
-        if (!isLt2M) {
+        if (!extension) {
-          this.$message.error('上传图片大小不能超过 5MB!');
+          this.$message.warning('上传模板只能是 jpg、jpeg、png 格式!');
-          return false;
+        } else if (!isLt5M) {
+          this.$message.warning(`上传模板大小不能超过 ${maxFileSizeMB}MB!`);
        }
-        return true;
+        return extension && isLt5M;
      },
      async handleChange (file) {
        var formdata = new FormData();
        formdata.append("file", file.raw);
        dzqmUpload(formdata).then(res => {
-          console.log(res);
+          if (res.code == 200) {
+            this.$message({
+              message: '上传成功！',
+              type: 'success'
+            })
+            this.key++
+            this.ruleForm.dzqmurl = res.message
+          }
        })
      }
    }
@@ -75,5 +103,10 @@
  </script>
 <style scoped lang="scss">
  @import "~@/styles/public.scss";
+  .signature-image {
+    width: 100%;
+    max-height: 360px;
+    object-fit: contain;
+  }
 </style>
\ No newline at end of file