---修改输入数字组件bug
1、调整日期范围组件为不可修改
13
src/App.vue
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<ConfigProvider :locale="antdLocal">
|
||||
<AppProvider>
|
||||
<ConfigProvider :locale="antdLocal" >
|
||||
<AppProvider class="app lng-theme-primary">
|
||||
<RouterView />
|
||||
</AppProvider>
|
||||
</ConfigProvider>
|
||||
@ -17,9 +17,10 @@
|
||||
import { useLocale } from '/@/locales/useLocale';
|
||||
import { useAppStore } from '/@/store/modules/app';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import { computed } from 'vue';
|
||||
import { computed,onMounted } from 'vue';
|
||||
import { getLogoInfo } from './api/system/login';
|
||||
import { onBeforeUnmount } from 'vue';
|
||||
import { AppTheme } from '/@/utils/theme';
|
||||
//import { getAppEnvConfig } from '/@/utils/env';
|
||||
// support Multi-language
|
||||
|
||||
@ -46,9 +47,14 @@
|
||||
if (getLocale.value === 'zh_TW') {
|
||||
return zhTW;
|
||||
}
|
||||
|
||||
return zhCN;
|
||||
});
|
||||
|
||||
onMounted(()=>{
|
||||
AppTheme.init();
|
||||
})
|
||||
|
||||
const beforeUnloadHandler = (e) => {
|
||||
if (e) {
|
||||
e.returnValue = '关闭提示';
|
||||
@ -63,6 +69,7 @@
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('beforeunload', beforeUnloadHandler);
|
||||
});
|
||||
|
||||
|
||||
// Listening to page changes and dynamically changing site titles
|
||||
//useTitle();
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
|
||||
|
||||
.lng-theme-primary {
|
||||
.lng-menu {
|
||||
.vben-menu-submenu,.vben-menu-submenu-title,.vben-menu{
|
||||
background: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vben-layout-sideBar {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
}
|
||||
BIN
src/assets/style/theme/imgs/15-1.png
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
src/assets/style/theme/imgs/15-2.png
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
src/assets/style/theme/imgs/18-1.png
Normal file
|
After Width: | Height: | Size: 100 KiB |
BIN
src/assets/style/theme/imgs/18-2.png
Normal file
|
After Width: | Height: | Size: 37 KiB |
BIN
src/assets/style/theme/imgs/21-1.png
Normal file
|
After Width: | Height: | Size: 93 KiB |
BIN
src/assets/style/theme/imgs/21-2.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/style/theme/imgs/24-1.png
Normal file
|
After Width: | Height: | Size: 209 KiB |
BIN
src/assets/style/theme/imgs/24-2.png
Normal file
|
After Width: | Height: | Size: 55 KiB |
BIN
src/assets/style/theme/imgs/25-1.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
src/assets/style/theme/imgs/25-2.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/style/theme/imgs/3-1.png
Normal file
|
After Width: | Height: | Size: 110 KiB |
BIN
src/assets/style/theme/imgs/3-2.png
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
src/assets/style/theme/imgs/4-1.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/style/theme/imgs/4-2.png
Normal file
|
After Width: | Height: | Size: 7.0 KiB |
BIN
src/assets/style/theme/imgs/5-1-1.png
Normal file
|
After Width: | Height: | Size: 153 KiB |
BIN
src/assets/style/theme/imgs/5-2-2.png
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/style/theme/imgs/9-1.png
Normal file
|
After Width: | Height: | Size: 144 KiB |
BIN
src/assets/style/theme/imgs/9-2.png
Normal file
|
After Width: | Height: | Size: 110 KiB |
BIN
src/assets/style/theme/imgs/primary-left.png
Normal file
|
After Width: | Height: | Size: 146 KiB |
BIN
src/assets/style/theme/imgs/primary-top.png
Normal file
|
After Width: | Height: | Size: 79 KiB |
47
src/assets/style/theme/lng-theme.less
Normal file
@ -0,0 +1,47 @@
|
||||
|
||||
|
||||
.lng-theme-primary {
|
||||
.lng-menu {
|
||||
.vben-menu-submenu,.vben-menu-submenu-title,.vben-menu{
|
||||
background: unset !important;
|
||||
|
||||
.vben-menu-submenu-title-active:not(.vben-menu-submenu){
|
||||
color: #fff !important;
|
||||
background-color: rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after {
|
||||
border-bottom: 2px solid #0960bd;
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
|
||||
.ant-menu-title-content{
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vben-layout-sideBar {
|
||||
background: unset !important;
|
||||
background-image: url('/@/assets/style/theme/imgs/primary-left.png') !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
|
||||
.vben-default-layout-main{
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
|
||||
.ant-layout-header{
|
||||
background: unset !important;
|
||||
background-image: url('/@/assets/style/theme/imgs/primary-top.png') !important;
|
||||
background-size: 100% 100% !important;
|
||||
|
||||
|
||||
.ant-menu-title-content{
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<a-range-picker :size="size" v-model:value="modelValue" :placeholder="placeholder" :allowClear="allowClear" :disabled="disabled"
|
||||
@input.stop="() => {}" @keydown.stop="() => {}" :inputReadOnly="true" @keyup.stop="() => {}" @change.stop="handleChange" />
|
||||
:inputReadOnly="true" @change="handleChange" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watchEffect, inject, watch } from 'vue';
|
||||
@ -31,7 +31,6 @@ import dayjs, { Dayjs } from 'dayjs';
|
||||
watch(
|
||||
() => props.value,
|
||||
(val: any) => {
|
||||
debugger;
|
||||
modelValue.value = props.valueType == 'Array' ? val || [] : val ? val.split(',') : '';
|
||||
},
|
||||
{
|
||||
@ -44,7 +43,6 @@ import dayjs, { Dayjs } from 'dayjs';
|
||||
// emit('update:value', []);
|
||||
// return;
|
||||
// }
|
||||
debugger;
|
||||
if (props.mainKey) {
|
||||
if (!formModel[props.mainKey]) return;
|
||||
const emitData =
|
||||
@ -60,7 +58,6 @@ import dayjs, { Dayjs } from 'dayjs';
|
||||
}
|
||||
});
|
||||
const handleChange = (time,e) => {
|
||||
debugger;
|
||||
console.log(time,e);
|
||||
emit('update:value', props.valueType == 'Array' || !time ? time : time.join(','));
|
||||
emit('change', props.valueType == 'Array' || !time ? time : time.join(','));
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import { NoValueType } from "@grapecity/activereports/core";
|
||||
|
||||
declare type ValueType = string | number | undefined;
|
||||
|
||||
|
||||
@ -45,7 +43,7 @@ export class InputNumberModel {
|
||||
}
|
||||
|
||||
viewToModel(vv: ValueType):ValueType {
|
||||
if(vv===undefined || vv=="" || vv=="-") return;
|
||||
if(vv===undefined || vv==="" || vv==="-") return;
|
||||
if(!this.focus){
|
||||
this.viewValue = Number.format(Number.parse(vv),this.numberFormat);
|
||||
}
|
||||
|
||||
@ -83,6 +83,9 @@ export default {
|
||||
() => props.value,
|
||||
(val) => {
|
||||
model.value.setModelValue(val);
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
const handleChange = (e) => {
|
||||
|
||||
@ -122,8 +122,6 @@
|
||||
|
||||
.@{prefix-cls} {
|
||||
z-index: @layout-sider-fixed-z-index;
|
||||
background-image: url('/@/assets/images/left_menu.jpg');
|
||||
background-size: 100% 100%;
|
||||
|
||||
&--fixed {
|
||||
position: fixed;
|
||||
|
||||
@ -2,6 +2,7 @@ import 'virtual:windi-base.css';
|
||||
import 'virtual:windi-components.css';
|
||||
import '/@/design/index.less';
|
||||
import 'virtual:windi-utilities.css';
|
||||
import '/@/assets/style/theme/lng-theme.less';
|
||||
// Register icon sprite
|
||||
import 'virtual:svg-icons-register';
|
||||
import App from './App.vue';
|
||||
|
||||
144
src/utils/theme.ts
Normal file
@ -0,0 +1,144 @@
|
||||
/**
|
||||
* 主题样式
|
||||
*/
|
||||
export interface ThemeCss {
|
||||
class?: string;
|
||||
backColor: string;
|
||||
textColor?: string;
|
||||
borderColor: string;
|
||||
hoverColor: string;
|
||||
hoverTextColor?: string;
|
||||
activeColor: string;
|
||||
activeTextColor?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 主题详情
|
||||
*/
|
||||
export class ThemeInfo {
|
||||
name: string;
|
||||
css: ThemeCss;
|
||||
|
||||
constructor(name: string, css: ThemeCss) {
|
||||
this.name = name;
|
||||
this.css = css;
|
||||
}
|
||||
};
|
||||
|
||||
export const ThemeType = {
|
||||
PRIMARY: new ThemeInfo('PRIMARY', { class: 'lng-theme-primary', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }),
|
||||
LIGHT: new ThemeInfo('LIGHT', { class: 'lng-theme-light', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }),
|
||||
}
|
||||
|
||||
/*--menu-top-active-color*/
|
||||
|
||||
|
||||
export class AppThemeType {
|
||||
|
||||
info: ThemeInfo | undefined = undefined;
|
||||
app: HTMLElement | undefined | null = undefined;
|
||||
|
||||
setTheme(theme?: ThemeInfo):boolean {
|
||||
let old = this.info!=undefined?this.info.name:null;
|
||||
if(theme==undefined){
|
||||
this.info = ThemeType.PRIMARY;
|
||||
}else{
|
||||
if(old && old == theme.name){
|
||||
return false;
|
||||
}
|
||||
this.info = theme;
|
||||
}
|
||||
localStorage.setItem('themeType', this.info.name);
|
||||
//删除旧的class
|
||||
if(old && old != undefined && old != null){
|
||||
this.app?.classList.remove(ThemeType[old].css.class);
|
||||
}
|
||||
//添加新的主题样式
|
||||
this.app?.classList.add(this.info.css.class);
|
||||
//顶部菜单样式
|
||||
this.setCssVar('--menu-top-bg-color', this.info.css.backColor);
|
||||
this.setCssVar('--menu-top-color', this.info.css.textColor);
|
||||
this.setCssVar('--menu-top-active-bg-color', this.info.css.activeColor);
|
||||
this.setCssVar('--menu-top-active-color', this.info.css.activeTextColor);
|
||||
this.setCssVar('--menu-top-hover-bg-color', this.info.css.hoverColor);
|
||||
this.setCssVar('--menu-top-hover-color', this.info.css.hoverTextColor);
|
||||
|
||||
//左边菜单主题样式
|
||||
this.setCssVar('--menu-left-bg-color', this.info.css.backColor);
|
||||
this.setCssVar('--menu-left-color', this.info.css.textColor);
|
||||
this.setCssVar('--menu-left-active-bg-color', this.info.css.activeColor);
|
||||
this.setCssVar('--menu-left-active-color', this.info.css.activeTextColor);
|
||||
this.setCssVar('--menu-left-hover-bg-color', this.info.css.hoverColor);
|
||||
this.setCssVar('--menu-left-hover-color', this.info.css.hoverTextColor);
|
||||
|
||||
//其他主题样式
|
||||
this.setCssVar('--other-theme-bg-color', this.info.css.backColor);
|
||||
this.setCssVar('--other-theme-color', this.info.css.textColor);
|
||||
this.setCssVar('--other-theme-active-bg-color', this.info.css.activeColor);
|
||||
this.setCssVar('--other-theme-active-color', this.info.css.activeTextColor);
|
||||
this.setCssVar('--other-theme-hover-bg-color', this.info.css.hoverColor);
|
||||
this.setCssVar('--other-theme-hover-color', this.info.css.hoverTextColor);
|
||||
return true;
|
||||
}
|
||||
|
||||
getTheme() {
|
||||
return this.info;
|
||||
}
|
||||
|
||||
setCssVar(prop: string, val: any) {
|
||||
document.documentElement.style.setProperty(prop, val);
|
||||
}
|
||||
|
||||
init() {
|
||||
this.app = document.getElementById('app');
|
||||
let themeType = localStorage.getItem('themeType');
|
||||
if (!themeType){
|
||||
this.setTheme();
|
||||
}else{
|
||||
this.setTheme(ThemeType[themeType]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export const AppTheme = {
|
||||
|
||||
/**@type {ThemeInfo | undefined} */
|
||||
info:undefined,
|
||||
app:undefined,
|
||||
|
||||
setTheme:function(theme: ThemeInfo) {
|
||||
let old = this.info!=undefined?this.info.name:null;
|
||||
if(old && old !== theme.name){
|
||||
this.app?.classList.remove(`lng-theme-${old}`);
|
||||
}
|
||||
this.info = theme;
|
||||
localStorage.setItem('themeType', theme.name);
|
||||
let classList = this.app?.classList;
|
||||
if(classList){
|
||||
for(let i=0;i<classList.length;i++){
|
||||
if(classList[i].startsWith('lng-theme-')){
|
||||
this.app?.classList.remove(classList[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.app?.classList.add(theme.css.class);
|
||||
},
|
||||
getTheme:function() {
|
||||
return this.info;
|
||||
},
|
||||
getThemeCss:function() {
|
||||
return this.info.css;
|
||||
},
|
||||
init:function() {
|
||||
this.app = document.getElementById('app');
|
||||
let themeType = localStorage.getItem('themeType') || 'PRIMARY';
|
||||
this.info = ThemeType[themeType];
|
||||
this.setTheme(this.info);
|
||||
},
|
||||
setCssVar(prop: string, val: any) {
|
||||
document.documentElement.style.setProperty(prop, val);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
/**
|
||||
* 主题样式
|
||||
*/
|
||||
export interface ThemeCss {
|
||||
leftImg?: string;
|
||||
topImg?: string;
|
||||
backColor: string;
|
||||
borderColor: string;
|
||||
hoverColor: string;
|
||||
activeColor: string;
|
||||
textColor?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 主题详情
|
||||
*/
|
||||
export class ThemeInfo {
|
||||
name: string;
|
||||
css: ThemeCss;
|
||||
|
||||
constructor(name: string, css: ThemeCss) {
|
||||
this.name = name;
|
||||
this.css = css;
|
||||
}
|
||||
};
|
||||
|
||||
export const ThemeType = {
|
||||
DEFAULT: new ThemeInfo('default', { leftImg: '', topImg: '', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }),
|
||||
LIGHT: new ThemeInfo('light', { leftImg: '', topImg: '', backColor: '', borderColor: '', hoverColor: '', activeColor: '', textColor: '' }),
|
||||
}
|
||||
|
||||
export const AppTheme = {
|
||||
|
||||
info:ThemeType.DEFAULT,
|
||||
|
||||
setTheme(theme: ThemeInfo) {
|
||||
this.info = theme;
|
||||
},
|
||||
getTheme() {
|
||||
return this.info;
|
||||
},
|
||||
getThemeCss() {
|
||||
return this.info.css;
|
||||
},
|
||||
|
||||
}
|
||||
@ -91,7 +91,7 @@
|
||||
<a-col :span="8">
|
||||
<a-form-item label="合同金额(万元)" name="amount">
|
||||
<input-number v-model:value="formState.amount" style="width: 100%"
|
||||
@blur="amountBlur(formState.amount)" :min="0" :disabled="isDisable" />
|
||||
@blur="amountBlur(formState.amount)" :min="0" :disabled="isDisable" :digits="2" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
|
||||