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,11 +1,6 @@
<template>
  <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-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"
                v-model="loginForm.tenantId"
@@ -14,27 +9,20 @@
        <i slot="prefix" class="icon-quanxian"/>
      </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-form-item prop="username">
            <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')">
        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
        <i slot="prefix" class="icon-mima"/>
      </el-input>
    </el-form-item>
    <!-- <el-form-item v-if="this.website.captchaMode" prop="code">
                <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')">
                <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword" />
                <i slot="prefix" class="icon-mima" />
            </el-input>
        </el-form-item>
        <!-- <el-form-item v-if="this.website.captchaMode" prop="code">
      <el-row :span="24">
        <el-col :span="16">
          <el-input size="small"
@@ -53,217 +41,211 @@
        </el-col>
      </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>
    </el-form-item>
    <el-dialog title="用户信息选择"
               append-to-body
               :visible.sync="userBox"
               width="350px">
      <avue-form :option="userOption" v-model="userForm" @submit="submitLogin"/>
    </el-dialog>
  </el-form>
        <el-form-item>
            <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">
            <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 {getCaptcha} from "@/api/user";
  import {getTopUrl} from "@/util/util";
import { mapGetters } from "vuex"
import { info } from "@/api/system/tenant"
// import {getCaptcha} from "@/api/user";
import { getTopUrl } from "@/util/util"

  export default {
export default {
    name: "userlogin",
    data() {
      return {
        tenantMode: this.website.tenantMode,
        loginForm: {
          //租户ID
          tenantId: "000000",
          //部门ID
          deptId: "",
          //角色ID
          roleId: "",
          //用户名
          username: "",
          //密码
          password: "",
          //账号类型
          type: "account",
          //验证码的值
          code: "",
          //验证码的索引
          key: "",
          //预加载白色背景
          image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
        },
        loginRules: {
          // tenantId: [
          //   {required: false, message: "请输入租户ID", trigger: "blur"}
          // ],
          username: [
            {required: true, message: "请输入用户名", trigger: "blur"}
          ],
          password: [
            {required: true, message: "请输入密码", trigger: "blur"},
            {min: 1, message: "密码长度最少为6位", trigger: "blur"}
          ]
        },
        passwordType: "password",
        userBox: false,
        userForm: {
          deptId: '',
          roleId: ''
        },
        userOption: {
          labelWidth: 70,
          submitBtn: true,
          emptyBtn: false,
          submitText: '登录',
          column: [
            {
              label: '部门',
              prop: 'deptId',
              type: 'select',
              props: {
                label: 'deptName',
                value: 'id'
              },
              dicUrl: '/api/blade-system/dept/select',
              span: 24,
              display: false,
              rules: [{
                required: true,
                message: "请选择部门",
                trigger: "blur"
              }],
    data () {
        return {
            tenantMode: this.website.tenantMode,
            loginForm: {
                //租户ID
                tenantId: "000000",
                //部门ID
                deptId: "",
                //角色ID
                roleId: "",
                //用户名
                username: "",
                //密码
                password: "",
                //账号类型
                type: "account",
                //验证码的值
                code: "",
                //验证码的索引
                key: "",
                //预加载白色背景
                image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
            },
            {
              label: '角色',
              prop: 'roleId',
              type: 'select',
              props: {
                label: 'roleName',
                value: 'id'
              },
              dicUrl: '/api/blade-system/role/select',
              span: 24,
              display: false,
              rules: [{
                required: true,
                message: "请选择角色",
                trigger: "blur"
              }],
            loginRules: {
                // tenantId: [
                //   {required: false, message: "请输入租户ID", trigger: "blur"}
                // ],
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 1, message: "密码长度最少为6位", trigger: "blur" }
                ]
            },
          ]
            passwordType: "password",
            userBox: false,
            userForm: {
                deptId: '',
                roleId: ''
            },
            userOption: {
                labelWidth: 70,
                submitBtn: true,
                emptyBtn: false,
                submitText: '登录',
                column: [
                    {
                        label: '部门',
                        prop: 'deptId',
                        type: 'select',
                        props: {
                            label: 'deptName',
                            value: 'id'
                        },
                        dicUrl: '/api/blade-system/dept/select',
                        span: 24,
                        display: false,
                        rules: [{
                            required: true,
                            message: "请选择部门",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: '角色',
                        prop: 'roleId',
                        type: 'select',
                        props: {
                            label: 'roleName',
                            value: 'id'
                        },
                        dicUrl: '/api/blade-system/role/select',
                        span: 24,
                        display: false,
                        rules: [{
                            required: true,
                            message: "请选择角色",
                            trigger: "blur"
                        }],
                    },
                ]
            }
        }
      };
    },
    created() {
      this.getTenant();
      this.refreshCode();
    created () {
        this.getTenant()
        //   this.refreshCode();
    },
    mounted() {
    mounted () {
    },
    watch: {
      'loginForm.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;
        } else {
          column.dicUrl = '';
        'loginForm.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
            } else {
                column.dicUrl = ''
            }
        },
        'loginForm.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
            } else {
                column.dicUrl = ''
            }
        }
      },
      'loginForm.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;
        } else {
          column.dicUrl = '';
        }
      }
    },
    computed: {
      ...mapGetters(["tagWel", "userInfo"])
        ...mapGetters(["tagWel", "userInfo"])
    },
    props: [],
    methods: {
      refreshCode() {
        if (this.website.captchaMode) {
          getCaptcha().then(res => {
            const data = res.data;
            this.loginForm.key = data.key;
            this.loginForm.image = data.image;
          })
        }
      },
      showPassword() {
        this.passwordType === ""
          ? (this.passwordType = "password")
          : (this.passwordType = "");
      },
      submitLogin (form, done) {
        if (form.deptId !== '') {
          this.loginForm.deptId = form.deptId;
        }
        if (form.roleId !== '') {
          this.loginForm.roleId = form.roleId;
        }
        this.handleLogin();
        done();
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            const loading = this.$loading({
              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;
                if (deptId.includes(",") || roleId.includes(",")) {
                  this.loginForm.deptId = deptId;
                  this.loginForm.roleId = roleId;
                  this.userBox = true;
                  this.$store.dispatch("LogOut").then(() => {
                    loading.close();
                  });
                  return false;
        refreshCode () {
            if (this.website.captchaMode) {
                getCaptcha().then(res => {
                    const data = res.data
                    this.loginForm.key = data.key
                    this.loginForm.image = data.image
                })
            }
        },
        showPassword () {
            this.passwordType === ""
                ? (this.passwordType = "password")
                : (this.passwordType = "")
        },
        submitLogin (form, done) {
            if (form.deptId !== '') {
                this.loginForm.deptId = form.deptId
            }
            if (form.roleId !== '') {
                this.loginForm.roleId = form.roleId
            }
            this.handleLogin()
            done()
        },
        handleLogin () {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    const loading = this.$loading({
                        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
                            if (deptId.includes(",") || roleId.includes(",")) {
                                this.loginForm.deptId = deptId
                                this.loginForm.roleId = roleId
                                this.userBox = true
                                this.$store.dispatch("LogOut").then(() => {
                                    loading.close()
                                })
                                return false
                            }
                        }
                        this.$router.push({ path: this.tagWel.value })
                        loading.close()
                    }).catch(() => {
                        loading.close()
                        this.refreshCode()
                    })
                }
              }
              this.$router.push({path: this.tagWel.value});
              loading.close();
            }).catch(() => {
              loading.close();
              this.refreshCode();
            });
          }
        });
      },
      getTenant() {
        let domain = getTopUrl();
        // 临时指定域名，方便测试
        //domain = "https://bladex.cn";
        info(domain).then(res => {
          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})`;
          }
        })
      }
            })
        },
        getTenant () {
            let domain = getTopUrl()
            // 临时指定域名，方便测试
            //domain = "https://bladex.cn";
            info(domain).then(res => {
                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})`
                }
            })
        }
    }
  };
}
</script>

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