client-base-v5/src/client/top-nav-role-select.vue

<template>
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        {{ roleStateInstance.userRoleOrTemplate != null ? roleStateInstance.userRoleOrTemplate.roleOrTemplateName : '全部'
        }}
        <span class="caret" />
      </a>
      <ul v-if="userRoleOrTemplateList != null && userRoleOrTemplateList.length > 0" class="dropdown-menu">
        <li
          v-for="userRoleOrTemplate in userRoleOrTemplateList"
          :key="userRoleOrTemplate.userRoleTemplateId + '-' + userRoleOrTemplate.userRoleId"
          style="cursor: pointer;"
        >
          <a
            @click="roleStateInstance.setUserRoleOrTemplate(userRoleOrTemplate); uploadSelectedRole(userRoleOrTemplate)"
          >{{
            userRoleOrTemplate.roleOrTemplateName }}</a>
        </li>
        <li style="cursor: pointer;">
          <a @click="roleStateInstance.setUserRoleOrTemplate(null); uploadSelectedRole(null)">全部</a>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>

import Common from '../common/Common.js';
import ClientResourceV2 from '../api/base/ClientResourceV2.js';
import TokenClientResource from '../api/base/TokenClientResource.js';
import { Notify, Uuid } from 'pc-component-v3';
import { useRoleStateSingleton } from './RoleState.js';
import { UserStorageResource } from 'pc-component-v3';
import { message } from 'ant-design-vue';

export default {
  props: {

  },

  data: function () {
    return {
      userRoleOrTemplateList: [],
      loginClientName: '',
      visible: false,
      roleStateInstance: useRoleStateSingleton,
    };
  },


  mounted: function () {
    this.listUserRoleOrTemplate();
  },

  methods: {
    /**
     * 查询登录用户具备的角色OR角色模板
     */
    listUserRoleOrTemplate: function () {
      var _self = this;
      $.ajax({
        url: Common.getApiURL('RoleResourceV3/listUserRoleOrTemplate'),
        type: 'get',
        contentType: 'application/json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (response) {
          if (response.errorCode === 0) {
            _self.userRoleOrTemplateList = response.datas;
            _self.downloadSelectedRole();
          } else {
            Notify.error('错误', response.errorMessage, false);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest);
        },
      });
    },


    /**
     * 选择的用户权限存储只后端
     * @author YangZhiJie
     * @date 2024-10-14
     */
    uploadSelectedRole: function (userRoleOrTemplate) {
      let key = 'UserSelectedRole';
      let userStorageDtos = [
        {
          key: key,
          value: userRoleOrTemplate == null ? null : JSON.stringify(userRoleOrTemplate),
        },
      ];
      UserStorageResource.uploadUserStorage(userStorageDtos).then(successData => {
        console.log(successData);
      }, errorData => {
        Common.processException(errorData);
      });
    },


    /**
     * 选择的用户权限存储只后端
     * @author YangZhiJie
     * @date 2024-10-14
     */
    downloadSelectedRole: function () {
      var _self = this;
      let key = 'UserSelectedRole';

      UserStorageResource.uniqueByKey(key).then(
        success => {
          if (success.errorCode == 0) {
            if (success.data) {
              let userRoleTemplate = JSON.parse(success.data);
              if(_self.userRoleOrTemplateList != null){
                _self.userRoleOrTemplateList.forEach(item => {
                  if(
                    (item.userRoleTemplateId + '-' + item.userRoleId) == 
                    (userRoleTemplate.userRoleTemplateId + '-' + userRoleTemplate.userRoleId)
                  ){
                    _self.roleStateInstance.setUserRoleOrTemplate(item);
                  }
                });
              }
            } else {
              _self.roleStateInstance.setUserRoleOrTemplate(null);
            }
          } else {
            message.warning(success.errorMessage);
          }
        },
        error => {
          Common.processException(error);
        },
      );
    },
  },
};
</script>