icon加载异常的问题

shuishen

2023-12-23 632e006756d00391252d32e2ebaed6664e8e466f

icon加载异常的问题

 src/config/env.js

@@ -2,15 +2,23 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-12-14 17:10:00
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-12-19 16:55:56
 * @LastEditTime: 2023-12-23 18:03:39
 * @FilePath: \jczz_web\src\config\env.js
 * @Description:
 *
 * Copyright (c) 2023 by shuishen, All Rights Reserved.
 */
// 阿里矢量图标库配置
let iconfontVersion = ["567566_pwc3oottzol", "4380189_e93ccwuqira"];
let iconfontUrl = `//at.alicdn.com/t/c/font_$key.css`;
let iconData = [
  {
    icon: "567566_pwc3oottzol",
    url: `//at.alicdn.com/t/font_$key.css`,
  },
  {
    icon: "4380189_e93ccwuqira",
    url: `//at.alicdn.com/t/c/font_$key.css`,
  },
];

let baseUrl = "";
let codeUrl = `${baseUrl}/code`;
@@ -22,4 +30,4 @@
} else if (env.NODE_ENV === "test") {
  baseUrl = ``; //测试环境地址
}
export { baseUrl, iconfontUrl, iconfontVersion, codeUrl, env };
export { baseUrl, iconData, codeUrl, env };

 src/main.js

@@ -1,30 +1,27 @@
import Vue from 'vue';
import axios from './router/axios';
import VueAxios from 'vue-axios';
import App from './App';
import router from './router/router';
import './permission'; // 权限
import './error'; // 日志
import './cache';//页面缓存
import store from './store';
import {loadStyle} from './util/util'
import * as urls from '@/config/env';
import Element from 'element-ui';
import {
  iconfontUrl,
  iconfontVersion
} from '@/config/env';
import i18n from './lang'; // Internationalization
import './styles/common.scss';
import basicBlock from './components/basic-block/main';
import basicContainer from './components/basic-container/main';
import thirdRegister from './components/third-register/main';
import flowDesign from './components/flow-design/main';
import avueUeditor from 'avue-plugin-ueditor';
import website from '@/config/website';
import crudCommon from '@/mixins/crud';
import Vue from "vue";
import axios from "./router/axios";
import VueAxios from "vue-axios";
import App from "./App";
import router from "./router/router";
import "./permission"; // 权限
import "./error"; // 日志
import "./cache"; //页面缓存
import store from "./store";
import { loadStyle } from "./util/util";
import * as urls from "@/config/env";
import Element from "element-ui";
import { iconData } from "@/config/env";
import i18n from "./lang"; // Internationalization
import "./styles/common.scss";
import basicBlock from "./components/basic-block/main";
import basicContainer from "./components/basic-container/main";
import thirdRegister from "./components/third-register/main";
import flowDesign from "./components/flow-design/main";
import avueUeditor from "avue-plugin-ueditor";
import website from "@/config/website";
import crudCommon from "@/mixins/crud";
// 业务组件
import tenantPackage from './views/system/tenantpackage';
import tenantPackage from "./views/system/tenantpackage";

// 注册全局crud驱动
window.$crudCommon = crudCommon;
@@ -32,32 +29,32 @@
Vue.use(router);
Vue.use(VueAxios, axios);
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
  i18n: (key, value) => i18n.t(key, value),
});
Vue.use(window.AVUE, {
  size: 'small',
  tableSize: 'small',
  size: "small",
  tableSize: "small",
  calcHeight: 65,
  i18n: (key, value) => i18n.t(key, value)
  i18n: (key, value) => i18n.t(key, value),
});
// 注册全局容器
Vue.component('basicContainer', basicContainer);
Vue.component('basicBlock', basicBlock);
Vue.component('thirdRegister', thirdRegister);
Vue.component('avueUeditor', avueUeditor);
Vue.component('flowDesign', flowDesign);
Vue.component('tenantPackage', tenantPackage);
Vue.component("basicContainer", basicContainer);
Vue.component("basicBlock", basicBlock);
Vue.component("thirdRegister", thirdRegister);
Vue.component("avueUeditor", avueUeditor);
Vue.component("flowDesign", flowDesign);
Vue.component("tenantPackage", tenantPackage);
// 加载相关url地址
Object.keys(urls).forEach(key => {
Object.keys(urls).forEach((key) => {
  Vue.prototype[key] = urls[key];
});
// 加载NutFlow
Vue.use(window.WfDesignBase);
// 加载website
Vue.prototype.website = website;
// 动态加载阿里云字体库
iconfontVersion.forEach(ele => {
  loadStyle(iconfontUrl.replace('$key', ele));

iconData.forEach((item) => {
  loadStyle(item.url.replace("$key", item.icon));
});

Vue.config.productionTip = false;
@@ -66,5 +63,5 @@
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app');
  render: (h) => h(App),
}).$mount("#app");

 src/page/login/userlogin.vue

@@ -1,10 +1,5 @@
<template>
  <el-form class="login-form"
           status-icon
           :rules="loginRules"
           ref="loginForm"
           :model="loginForm"
           label-width="0">
    <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
    <!-- <el-form-item v-if="tenantMode" prop="tenantId">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
@@ -15,21 +10,14 @@
      </el-input>
    </el-form-item> -->
    <el-form-item prop="username">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.username"
                auto-complete="off"
            <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off"
                :placeholder="$t('login.username')">
        <i slot="prefix" class="icon-yonghu"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                :type="passwordType"
                v-model="loginForm.password"
                auto-complete="off"
                :placeholder="$t('login.password')">
            <el-input size="small" @keyup.enter.native="handleLogin" :type="passwordType" v-model="loginForm.password"
                auto-complete="off" :placeholder="$t('login.password')">
        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
        <i slot="prefix" class="icon-mima"/>
      </el-input>
@@ -54,26 +42,21 @@
      </el-row>
    </el-form-item> -->
    <el-form-item>
      <el-button type="primary"
                 size="small"
                 @click.native.prevent="handleLogin"
                 class="login-submit">{{$t('login.submit')}}
            <el-button type="primary" size="small" @click.native.prevent="handleLogin" class="login-submit">{{
                $t('login.submit') }}
      </el-button>
    </el-form-item>
    <el-dialog title="用户信息选择"
               append-to-body
               :visible.sync="userBox"
               width="350px">
        <el-dialog title="用户信息选择" append-to-body :visible.sync="userBox" width="350px">
      <avue-form :option="userOption" v-model="userForm" @submit="submitLogin"/>
    </el-dialog>
  </el-form>
</template>

<script>
  import {mapGetters} from "vuex";
  import {info} from "@/api/system/tenant";
import { mapGetters } from "vuex"
import { info } from "@/api/system/tenant"
  // import {getCaptcha} from "@/api/user";
  import {getTopUrl} from "@/util/util";
import { getTopUrl } from "@/util/util"

  export default {
    name: "userlogin",
@@ -160,31 +143,31 @@
            },
          ]
        }
      };
        }
    },
    created() {
      this.getTenant();
      this.refreshCode();
        this.getTenant()
        //   this.refreshCode();
    },
    mounted() {
    },
    watch: {
      'loginForm.deptId'() {
        const column = this.findObject(this.userOption.column, "deptId");
            const column = this.findObject(this.userOption.column, "deptId")
        if (this.loginForm.deptId.includes(",")) {
          column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`;
          column.display = true;
                column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`
                column.display = true
        } else {
          column.dicUrl = '';
                column.dicUrl = ''
        }
      },
      'loginForm.roleId'() {
        const column = this.findObject(this.userOption.column, "roleId");
            const column = this.findObject(this.userOption.column, "roleId")
        if (this.loginForm.roleId.includes(",")) {
          column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`;
          column.display = true;
                column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`
                column.display = true
        } else {
          column.dicUrl = '';
                column.dicUrl = ''
        }
      }
    },
@@ -196,26 +179,26 @@
      refreshCode() {
        if (this.website.captchaMode) {
          getCaptcha().then(res => {
            const data = res.data;
            this.loginForm.key = data.key;
            this.loginForm.image = data.image;
                    const data = res.data
                    this.loginForm.key = data.key
                    this.loginForm.image = data.image
          })
        }
      },
      showPassword() {
        this.passwordType === ""
          ? (this.passwordType = "password")
          : (this.passwordType = "");
                : (this.passwordType = "")
      },
      submitLogin (form, done) {
        if (form.deptId !== '') {
          this.loginForm.deptId = form.deptId;
                this.loginForm.deptId = form.deptId
        }
        if (form.roleId !== '') {
          this.loginForm.roleId = form.roleId;
                this.loginForm.roleId = form.roleId
        }
        this.handleLogin();
        done();
            this.handleLogin()
            done()
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
@@ -224,46 +207,45 @@
              lock: true,
              text: '登录中,请稍后。。。',
              spinner: "el-icon-loading"
            });
                    })
            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
              if (this.website.switchMode) {
                const deptId = this.userInfo.dept_id;
                const roleId = this.userInfo.role_id;
                            const deptId = this.userInfo.dept_id
                            const roleId = this.userInfo.role_id
                if (deptId.includes(",") || roleId.includes(",")) {
                  this.loginForm.deptId = deptId;
                  this.loginForm.roleId = roleId;
                  this.userBox = true;
                                this.loginForm.deptId = deptId
                                this.loginForm.roleId = roleId
                                this.userBox = true
                  this.$store.dispatch("LogOut").then(() => {
                    loading.close();
                  });
                  return false;
                                    loading.close()
                                })
                                return false
                }
              }
              this.$router.push({path: this.tagWel.value});
              loading.close();
                        this.$router.push({ path: this.tagWel.value })
                        loading.close()
            }).catch(() => {
              loading.close();
              this.refreshCode();
            });
                        loading.close()
                        this.refreshCode()
                    })
          }
        });
            })
      },
      getTenant() {
        let domain = getTopUrl();
            let domain = getTopUrl()
        // 临时指定域名，方便测试
        //domain = "https://bladex.cn";
        info(domain).then(res => {
          const data = res.data;
                const data = res.data
          if (data.success && data.data.tenantId) {
            this.tenantMode = false;
            this.loginForm.tenantId = data.data.tenantId;
            this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
                    this.tenantMode = false
                    this.loginForm.tenantId = data.data.tenantId
                    this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`
          }
        })
      }
    }
  };
}
</script>

<style>
</style>
<style></style>