From 632e006756d00391252d32e2ebaed6664e8e466f Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 23 Dec 2023 18:10:37 +0800
Subject: [PATCH] icon加载异常的问题
---
src/config/env.js | 16 +
src/main.js | 81 ++++----
src/page/login/userlogin.vue | 420 ++++++++++++++++++++++------------------------
3 files changed, 252 insertions(+), 265 deletions(-)
diff --git a/src/config/env.js b/src/config/env.js
index 054158d..3c32b98 100644
--- a/src/config/env.js
+++ b/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 };
diff --git a/src/main.js b/src/main.js
index 5daa98c..625f2b0 100644
--- a/src/main.js
+++ b/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");
diff --git a/src/page/login/userlogin.vue b/src/page/login/userlogin.vue
index ce32449..57f8a2d 100644
--- a/src/page/login/userlogin.vue
+++ b/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>
--
Gitblit v1.9.3