Blame view

src/views/layout/header/header.vue 7.35 KB
c1b532ad   梁保满   权限配置,路由基础设置
1
2
3
4
  <template>
    <div>
      <el-header id="header">
        <span class="hideAside" @click="collapse"
d4283687   梁保满   首页布局完成,页面顶部返回组件
5
          ><i class="el-icon-s-fold" v-show="!isCollapse"></i>
ee6e7628   梁保满   备题组卷借口数据对接调整
6
7
          <i class="el-icon-s-unfold" v-show="isCollapse"></i
        ></span>
c1b532ad   梁保满   权限配置,路由基础设置
8
        <ul class="personal">
4c4f7640   梁保满   路由表,路由前端文件
9
10
11
          <!-- <li>
            <langSelect></langSelect>
          </li> -->
21dfdeae   梁保满   平台管理员
12
          <li class="dropdown-box" v-if="role != 'ROLE_PERSONAL'&&role != 'ROLE_PINGTAI'">
4c4f7640   梁保满   路由表,路由前端文件
13
14
15
16
            <div class="userInfo">
              <img :src="avatar" />
              <div class="txt">
                <p>{{ `${this.$store.getters.info.name}` }}</p>
42056450   阿宝   权限修改
17
                <p>{{ `${this.$store.getters.info.showRoleName}` }}</p>
4c4f7640   梁保满   路由表,路由前端文件
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
              </div>
              <i class="el-icon-arrow-down"></i>
            </div>
            <el-dropdown
              class="dropdown"
              @command="handleCommand"
              trigger="click"
            >
              <div class="el-dropdown-link dropdown-link"></div>
              <el-dropdown-menu slot="dropdown" v-if="permissions.length">
                <el-dropdown-item
                  v-for="item in permissions"
                  :key="item.role"
                  :command="item.role"
                  >{{ item.roleName }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </li>
21dfdeae   梁保满   平台管理员
37
38
39
40
41
          <li class="dropdown-box" v-if="role == 'ROLE_PINGTAI'">
             <div class="userInfo">
              <img :src="avatar" />
              <div class="txt">
                <p>{{ `${this.$store.getters.info.name}` }}</p>
21dfdeae   梁保满   平台管理员
42
43
44
45
              </div>
            </div>
          </li>
          <li class="dropdown-box" v-if="role == 'ROLE_PERSONAL'" @click="linkToUserInfo">
77ebf04d   梁保满   个人版
46
47
48
49
50
51
52
53
            <div class="userInfo">
              <img :src="avatar" />
              <div class="txt">
                <p>{{ `${this.$store.getters.info.name}` }}</p>
                <p>个人版</p>
              </div>
            </div>
          </li>
c1b532ad   梁保满   权限配置,路由基础设置
54
55
56
57
58
59
          <li class="fullScreen" @click="fullScreen">
            <el-tooltip
              class="item"
              effect="dark"
              content="全屏"
              placement="bottom"
b2d3d803   梁保满   批量设置答案优化
60
61
62
              ><i class="el-icon el-icon-full-screen"></i
            ></el-tooltip>
          </li>
85b306de   梁保满   跳转旧平台入口权限设置
63
          <li v-if="code && (role == 'ROLE_BANZHUREN' || role == 'ROLE_JIAOSHI')">
b2d3d803   梁保满   批量设置答案优化
64
65
66
67
68
69
70
            <el-tooltip
              class="item"
              effect="dark"
              content="老平台入口"
              placement="bottom"
            >
              <i @click="_LinkOld" class="el-icon el-icon-guide"></i
c1b532ad   梁保满   权限配置,路由基础设置
71
72
            ></el-tooltip>
          </li>
c1b532ad   梁保满   权限配置,路由基础设置
73
          <li>
4c4f7640   梁保满   路由表,路由前端文件
74
75
76
77
78
79
            <el-tooltip
              class="item"
              effect="dark"
              content="退出"
              placement="bottom"
            >
b2d3d803   梁保满   批量设置答案优化
80
              <i @click="logOut" class="el-icon el-icon-switch-button"></i
4c4f7640   梁保满   路由表,路由前端文件
81
            ></el-tooltip>
c1b532ad   梁保满   权限配置,路由基础设置
82
          </li>
c1b532ad   梁保满   权限配置,路由基础设置
83
84
85
86
87
88
89
        </ul>
      </el-header>
      <!-- <tabNav></tabNav> -->
    </div>
  </template>
  
  <script>
c1b532ad   梁保满   权限配置,路由基础设置
90
91
  import langSelect from "../../../components/lang/langSelect";
  import tabNav from "./tabNav";
b2d3d803   梁保满   批量设置答案优化
92
  import _ from "lodash";
c1b532ad   梁保满   权限配置,路由基础设置
93
94
  export default {
    name: "Header",
d5987f6a   阿宝   组件修改答案
95
    components: { tabNav, langSelect },
4c4f7640   梁保满   路由表,路由前端文件
96
97
98
99
100
    computed: {
      permissions: function () {
        return this.$store.getters.info.permissions || [];
      },
    },
c1b532ad   梁保满   权限配置,路由基础设置
101
102
    data() {
      return {
b2d3d803   梁保满   批量设置答案优化
103
        code: "",
7be21664   梁保满   跳转旧系统
104
        role: "",
c1b532ad   梁保满   权限配置,路由基础设置
105
106
107
108
109
110
        isfullScreen: true,
        avatar: require("@/assets/images/womandefault.png"),
        dialogInfoVisible: false,
        dialogPassVisible: false,
        title: "",
        userId: "",
ee6e7628   梁保满   备题组卷借口数据对接调整
111
        isCollapse: false,
c1b532ad   梁保满   权限配置,路由基础设置
112
113
      };
    },
ee6e7628   梁保满   备题组卷借口数据对接调整
114
    created() {
b2d3d803   梁保满   批量设置答案优化
115
      this.code = localStorage.getItem("csCode") || "";
03bce046   梁保满   个人版调整
116
      this.role = this.$store.getters.info.showRole || this.$store.getters.info.permissions[0].role;
ee6e7628   梁保满   备题组卷借口数据对接调整
117
      this.isCollapse = this.$store.getters.isCollapse;
65f592b6   梁保满   答题卡列表页
118
    },
c1b532ad   梁保满   权限配置,路由基础设置
119
    methods: {
b2d3d803   梁保满   批量设置答案优化
120
121
      _LinkOld: _.throttle(
        async function () {
7be21664   梁保满   跳转旧系统
122
          const { data, status, info } = await this.$request.linkOld();
b2d3d803   梁保满   批量设置答案优化
123
          if (status == 0) {
7be21664   梁保满   跳转旧系统
124
            window.location.href = data.url;
b2d3d803   梁保满   批量设置答案优化
125
126
127
128
129
130
131
          } else {
            this.$message.error(info);
          }
        },
        2000,
        { leading: true, trailing: false }
      ),
c2460294   梁保满   平台管理员接口联调
132
133
134
135
136
      linkToUserInfo() {
        this.$router.push({
          path:'/userInfo'
        })
      },
c1b532ad   梁保满   权限配置,路由基础设置
137
      collapse() {
ee6e7628   梁保满   备题组卷借口数据对接调整
138
        this.isCollapse = !this.isCollapse;
c1b532ad   梁保满   权限配置,路由基础设置
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
        this.$store.dispatch("collapse");
      },
      successCallback() {
        this.dialogInfoVisible = false;
      },
      editPwdCallback() {
        this.dialogPassVisible = false;
      },
      fullScreen() {
        if (this.isfullScreen) {
          var docElm = document.documentElement;
          if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
          } else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
          } else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
          } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
          }
          this.isfullScreen = false;
        } else {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
          this.isfullScreen = true;
        }
      },
      handleCommand(command) {
4c4f7640   梁保满   路由表,路由前端文件
174
        //刷新权限跳转首页
42056450   阿宝   权限修改
175
        this.$store.dispatch("permissions", command);
4c4f7640   梁保满   路由表,路由前端文件
176
      },
ee6e7628   梁保满   备题组卷借口数据对接调整
177
      async logOut() {
b2d3d803   梁保满   批量设置答案优化
178
        const { data, status, info } = await this.$request.logout();
6fffbd55   阿宝   组卷接口调整
179
180
        if (status == 0) {
          if (data) {
ee6e7628   梁保满   备题组卷借口数据对接调整
181
182
            window.location.href = data;
          } else {
76eb1bf6   梁保满   授课端版本管理,学生画像接口联调
183
            localStorage.setItem("token","")
bbc51d4b   梁保满   组卷添加修改分数,打开新开页面跳转...
184
185
186
187
            this.$store.commit("setToken", "");
            this.$store.commit("setInfo", {});
            this.$store.commit("setRouters", []);
            this.$store.commit("resetTabnavBox");
ee6e7628   梁保满   备题组卷借口数据对接调整
188
189
190
            this.$router.push({
              path: "/login",
            });
b2d3d803   梁保满   批量设置答案优化
191
            window.location.reload();
ee6e7628   梁保满   备题组卷借口数据对接调整
192
193
          }
        } else {
b2d3d803   梁保满   批量设置答案优化
194
          this.$message.error(info);
ee6e7628   梁保满   备题组卷借口数据对接调整
195
        }
c1b532ad   梁保满   权限配置,路由基础设置
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
      },
    },
  };
  </script>
  
  <style lang="scss">
  $top: top;
  $bottom: bottom;
  $left: left;
  $right: right;
  $leftright: ($left, $right);
  %w100 {
    width: 100%;
  }
  
  %h100 {
    height: 100%;
  }
  
  %cursor {
    cursor: pointer;
  }
  
  html,
  body,
  #app,
  .el-container,
  #asideNav,
  ul.el-menu {
    @extend %h100;
  }
  
  @mixin set-value($side, $value) {
    @each $prop in $leftright {
      #{$side}-#{$prop}: $value;
    }
  }
  
  #header {
    max-height: 50px;
    line-height: 50px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
4c4f7640   梁保满   路由表,路由前端文件
238
    background: #03152a;
c1b532ad   梁保满   权限配置,路由基础设置
239
240
    display: flex;
    justify-content: space-between;
4c4f7640   梁保满   路由表,路由前端文件
241
    color: #fff;
ee6e7628   梁保满   备题组卷借口数据对接调整
242
    padding: 0 20px 0 10px;
c1b532ad   梁保满   权限配置,路由基础设置
243
244
    .hideAside {
      @extend %cursor;
ee6e7628   梁保满   备题组卷借口数据对接调整
245
246
      i {
        font-size: 24px;
d4283687   梁保满   首页布局完成,页面顶部返回组件
247
248
        line-height: 50px;
      }
c1b532ad   梁保满   权限配置,路由基础设置
249
250
251
252
253
    }
    .personal {
      display: flex;
      flex-direction: row;
      li {
4c4f7640   梁保满   路由表,路由前端文件
254
        @include set-value(margin, 8px);
c1b532ad   梁保满   权限配置,路由基础设置
255
        font-size: 12px;
c1b532ad   梁保满   权限配置,路由基础设置
256
        @extend %cursor;
4c4f7640   梁保满   路由表,路由前端文件
257
        position: relative;
d4283687   梁保满   首页布局完成,页面顶部返回组件
258
        line-height: 50px;
c1b532ad   梁保满   权限配置,路由基础设置
259
      }
4c4f7640   梁保满   路由表,路由前端文件
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
    }
    .userInfo {
      display: flex;
      align-items: center;
      height: 50px;
      @extend %cursor;
      .txt {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 5px;
        p {
          line-height: 16px;
          font-size: 12px;
        }
c1b532ad   梁保满   权限配置,路由基础设置
275
      }
4c4f7640   梁保满   路由表,路由前端文件
276
      img {
c1b532ad   梁保满   权限配置,路由基础设置
277
        border-radius: 5px;
4c4f7640   梁保满   路由表,路由前端文件
278
279
280
281
        width: 28px;
        height: 28px;
      }
    }
b2d3d803   梁保满   批量设置答案优化
282
    .el-icon {
4c4f7640   梁保满   路由表,路由前端文件
283
      font-size: 20px;
d4283687   梁保满   首页布局完成,页面顶部返回组件
284
      line-height: 50px;
4c4f7640   梁保满   路由表,路由前端文件
285
286
287
288
289
290
291
292
293
294
295
296
    }
    .fa-lg {
      color: #fff;
    }
    .dropdown {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      .dropdown-link {
        height: 50px;
c1b532ad   梁保满   权限配置,路由基础设置
297
298
299
300
      }
    }
  }
  </style>