Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 b5e06fb8 编写于 作者: RedPig97's avatar RedPig97
浏览文件
操作

update：登录组件更新

上级 e8723ee1
隐藏空白字符变更
内嵌 并排
正在显示 包含 286 行增加 和 113 行删除
src/components/layout-element/login/app-login-button/app-login-button.vue
浏览文件 @ b5e06fb8
<template>
<div :class="[model.sysCss, 'app-login-button']" :style="containerStyle">
<i-button @click="handleClick" :type="curStyle">
<template v-if="model.sysImage">
<i v-if="model.sysImage.iconcls" :class="model.sysImage.iconcls"/>
<img v-else-if="model.sysImage.imagePath" :src="model.sysImage.imagePath" />
</template>
<span v-show="model.isShowCaption">{{ model.caption }}</span>
<div :class="curClassName" :style="curStyle">
<i-button
@click="handleClick"
:disabled="disabled"
:title="curTooltip"
:type="buttonType">
<div :class="['button-content', iconAlign.toLowerCase()]">
<span v-if="cssClass || imagePath" class="icon">
<i v-if="cssClass" :class="cssClass" />
<img v-else :src="imagePath" />
</span>
<span v-if="showCaption" class="caption">{{ curCaption }}</span>
</div>
</i-button>
</div>
</template>
<script lang="ts">
import { PanelButtonModel } from "@/model/panel-detail";
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
......@@ -20,7 +25,7 @@ export default class AppLoginButton extends Vue {
/**
* 名称
*
* @type {PanelButtonModel}
* @type {string}
* @memberof AppLoginButton
*/
@Prop() public name!: string;
......@@ -28,10 +33,10 @@ export default class AppLoginButton extends Vue {
/**
* 模型
*
* @type {PanelButtonModel}
* @type {any}
* @memberof AppLoginButton
*/
@Prop() public model!: PanelButtonModel;
@Prop() public layoutModelDetails: any;
/**
* 类型
......@@ -41,29 +46,154 @@ export default class AppLoginButton extends Vue {
*/
@Prop() public defaultStyle?: string;
/**
* 加载状态
*
* @memberof AppLoginButton
*/
@Prop({ default: false }) public loading?: boolean;
/**
* 标题
*
* @memberof AppLoginButton
*/
get curCaption() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.caption;
}
/**
* 提示信息
*
* @memberof AppLoginButton
*/
get curTooltip() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.tooltip;
}
/**
* 显示标题
*
* @memberof AppLoginButton
*/
get showCaption() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.isShowCaption;
}
/**
* 当前按钮类型
*
* @type {string}
* @memberof AppLoginButton
*/
get curStyle(): string {
if (this.model.renderMode == 'LINK') {
get buttonType(): string {
const layoutModel = this.layoutModelDetails[this.name];
if (layoutModel.renderMode == 'LINK') {
return 'text';
} else if (this.model.buttonStyle != "DEFAULT" && this.defaultStyle) {
} else if (layoutModel.buttonStyle != "DEFAULT" && this.defaultStyle) {
return this.defaultStyle;
} else {
return this.model.buttonStyle.toLowerCase();
if (
Object.is(layoutModel.buttonStyle, 'DEFAULT') ||
Object.is(layoutModel.buttonStyle, 'STYLE2') ||
Object.is(layoutModel.buttonStyle, 'STYLE3') ||
Object.is(layoutModel.buttonStyle, 'STYLE4')
) {
return 'default';
} else if (Object.is(layoutModel.buttonStyle, 'DANGER')) {
return 'error';
} else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
return 'primary';
} else {
return layoutModel.buttonStyle.toLowerCase();
}
}
}
/**
* 当前容器样式
*
* @memberof AppLoginButton
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 禁用
*
* @memberof AppLoginButton
*/
get disabled(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.disabled;
}
/**
* 类名
*
* @memberof AppLoginButton
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-button ${this.name} ${layoutModel.sysCss}`;
}
/**
* 图片路径
*
* @memberof AppLoginButton
*/
get imagePath() {
const layoutModel = this.layoutModelDetails[this.name];
let imagePath = '';
if (layoutModel.sysImage) {
imagePath = layoutModel.sysImage.imagePath;
} else if (layoutModel.uiAction) {
imagePath = layoutModel.uiAction.imagePath;
}
return imagePath;
}
/**
* 按钮样式
* 图标
*
* @type {string}
* @memberof AppLoginButton
*/
public containerStyle: any = null;
get cssClass() {
const layoutModel = this.layoutModelDetails[this.name];
let cssClass = '';
if (layoutModel.sysImage) {
cssClass = layoutModel.sysImage.iconcls;
} else if (layoutModel.uiAction) {
cssClass = layoutModel.uiAction.iconcls;
}
return cssClass;
}
/**
* 图标方向
*
* @memberof AppLoginButton
*/
get iconAlign() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.iconAlign || 'LEFT';
}
/**
* 按钮幽灵属性，使按钮背景透明
*
* @memberof AppLoginButton
*/
get buttonGhost() {
const layoutModel = this.layoutModelDetails[this.name];
return Object.is(layoutModel.buttonStyle, 'INVERSE');
}
/**
* 处理点击
......@@ -75,11 +205,6 @@ export default class AppLoginButton extends Vue {
this.$emit("itemClick", this.name);
}
public mounted() {
if (this.model) {
this.containerStyle = this.model.getElementStyle();
}
}
}
</script>
......
src/components/layout-element/login/app-login-captcha/app-login-captcha.vue
浏览文件 @ b5e06fb8
<template>
<div :class="[model.sysCss, 'app-login-captcha']" :style="containerStyle">
<div :class="curClassName" :style="curStyle">
<auth-puzzle-vcode :show="show" @success="onSuccess" @fail="onFail" />
<i-button :type="type" @click="executeOpen">验证</i-button>
</div>
</template>
<script lang="ts">
import { PanelUserControlModel } from "@/model/panel-detail";
import { Vue, Component, Prop } from "vue-property-decorator";
import AuthPuzzleVcode from "./vue-puzzle-code/vue-puzzle-code.vue";
@Component({
......@@ -21,7 +20,7 @@ export default class AppLoginCaptcha extends Vue {
* @type {string}
* @memberof AppLoginCaptcha
*/
@Prop() public model!: PanelUserControlModel;
@Prop() public layoutModelDetails: any;
/**
* 值
......@@ -40,12 +39,24 @@ export default class AppLoginCaptcha extends Vue {
@Prop() public name!: string;
/**
* 容器样式
* 当前容器样式
*
* @memberof AppLoginCaptcha
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 类名
*
* @type {any}
* @memberof AppLoginCaptcha
*/
public containerStyle: any = null;
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-captcha ${this.name} ${layoutModel.sysCss}`;
}
/**
* 是否显示
......@@ -57,10 +68,7 @@ export default class AppLoginCaptcha extends Vue {
*/
public type: string = 'default';
public mounted() {
if (this.model) {
this.containerStyle = this.model.getElementStyle();
}
public created() {
if (this.value) {
this.type = 'success';
}
......
src/components/layout-element/login/app-login-input/app-login-input.vue
浏览文件 @ b5e06fb8
<template>
<div :class="[model.sysCss, 'app-login-input']" :style="containerStyle">
<div :class="curClassName" :style="curStyle">
<i-input
size='large'
:prefix='defaultIcon'
......@@ -7,13 +7,12 @@
:type="defaultType"
:disabled="disabled"
:readonly="readonly"
:placeholder="model.caption">
:placeholder="curCaption">
</i-input>
</div>
</template>
<script lang="ts">
import { PanelFieldModel } from '@/model/panel-detail';
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({
......@@ -23,10 +22,10 @@ export default class AppLoginInput extends Vue {
/**
* 模型
*
* @type {string}
* @type {any}
* @memberof AppLoginInput
*/
@Prop() public model!: PanelFieldModel;
@Prop() public layoutModelDetails: any;
/**
* 值
......@@ -60,29 +59,35 @@ export default class AppLoginInput extends Vue {
*/
@Prop() public defaultType?: string;
/**
* 容器样式
/**
* 标题
*
* @type {any}
* @memberof AppLoginInput
*/
public containerStyle: any = null;
get curCaption() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.caption;
}
/**
* 禁用模式
*
* @type {any}
* 当前容器样式
*
* @memberof AppLoginInput
*/
public disabled: boolean = false;
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 只读模式
* 类名
*
* @type {any}
* @memberof AppLoginInput
*/
public readonly: boolean = false;
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-input ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前值
......@@ -103,12 +108,24 @@ export default class AppLoginInput extends Vue {
this.$emit('valueChange', { name: this.name, value: val });
}
public mounted() {
if (this.model) {
this.containerStyle = this.model.getElementStyle();
this.disabled = Object.is(this.model.fieldState, '1');
this.readonly = Object.is(this.model.fieldState, '2');
}
/**
* 禁用
*
* @memberof AppPresetSwitch
*/
get disabled() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.disabled;
}
/**
* 只读
*
* @memberof AppPresetSwitch
*/
get readonly() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.readonly;
}
}
......
src/components/layout-element/login/app-login-message/app-login-message.vue
浏览文件 @ b5e06fb8
<template>
<div :class="[model.sysCss, 'app-login-message']" :style="containerStyle">
<div :class="curClassName" :style="curStyle">
<alert v-show="value" type="error" show-icon>{{ value }}</alert>
</div>
</template>
<script lang='ts'>
import { PanelFieldModel } from "@/model/panel-detail";
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({})
......@@ -14,16 +13,16 @@ export default class AppLoginMessage extends Vue {
/**
* 模型
*
* @type {string}
* @memberof AppLoginInput
* @type {any}
* @memberof AppLoginMessage
*/
@Prop() public model!: PanelFieldModel;
@Prop() public layoutModelDetails: any;
/**
* 值
*
* @type {string}
* @memberof AppLoginInput
* @memberof AppLoginMessage
*/
@Prop() public value!: string;
......@@ -31,22 +30,28 @@ export default class AppLoginMessage extends Vue {
* 名称
*
* @type {string}
* @memberof AppLoginInput
* @memberof AppLoginMessage
*/
@Prop() public name!: string;
/**
* 容器样式
*
* @type {any}
* @memberof AppLoginInput
* 当前容器样式
*
* @memberof AppLoginMessage
*/
public containerStyle: any = null;
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
public mounted() {
if (this.model) {
this.containerStyle = this.model.getElementStyle();
}
/**
* 类名
*
* @memberof AppLoginMessage
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-message ${this.name} ${layoutModel.sysCss}`;
}
}
......
src/components/layout-element/login/app-login-note-verify/app-login-note-verify.vue
浏览文件 @ b5e06fb8
<template>
<div :class="[model.sysCss, 'app-login-note-verify']" :style="containerStyle">
<div :class="curClassName" :style="curStyle">
<div class="content">
<i-input
size="default"
......@@ -26,7 +26,6 @@
</template>
<script lang="ts">
import { PanelFieldModel } from "@/model/panel-detail";
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
......@@ -34,16 +33,16 @@ export default class AppLoginNoteVerify extends Vue {
/**
* 模型
*
* @type {string}
* @memberof AppLoginInput
* @type {any}
* @memberof AppLoginNoteVerify
*/
@Prop() public model!: PanelFieldModel;
@Prop() public layoutModelDetails: any;
/**
* 值
*
* @type {string}
* @memberof AppLoginInput
* @memberof AppLoginNoteVerify
*/
@Prop() public value!: string;
......@@ -51,7 +50,7 @@ export default class AppLoginNoteVerify extends Vue {
* 名称
*
* @type {string}
* @memberof AppLoginInput
* @memberof AppLoginNoteVerify
*/
@Prop() public name!: string;
......@@ -113,17 +112,23 @@ export default class AppLoginNoteVerify extends Vue {
public timer: any = null;
/**
* 容器样式
*
* @type {any}
* @memberof AppLoginInput
* 当前容器样式
*
* @memberof AppLoginNoteVerify
*/
public containerStyle: any = null;
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
public mounted() {
if (this.model) {
this.containerStyle = this.model.getElementStyle();
}
/**
* 类名
*
* @memberof AppLoginNoteVerify
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-note-verify ${this.name} ${layoutModel.sysCss}`;
}
/**
......
src/components/layout-element/login/app-login-org/app-login-org.vue
浏览文件 @ b5e06fb8
<template>
<div :class="[model.sysCss, 'app-login-org']" :style="containerStyle">
<div :class="curClassName" :style="curStyle">
<Select v-model="curKey">
<Option v-for="(item, index) in items" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
</template>
<script lang='ts'>
import { PanelFieldModel } from '@/model/panel-detail';
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
......@@ -34,7 +33,7 @@ export default class AppLoginOrg extends Vue {
* @type {*}
* @memberof AppLoginOrg
*/
@Prop() public model!: PanelFieldModel;
@Prop() public layoutModelDetails: any;
/**
* 当前值
......@@ -63,12 +62,24 @@ export default class AppLoginOrg extends Vue {
public items: Array<any> = [];
/**
* 容器样式
* 当前容器样式
*
* @memberof AppLoginOrg
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 类名
*
* @type {any}
* @memberof AppLoginInput
* @memberof AppLoginOrg
*/
public containerStyle: any = null;
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-org ${this.name} ${layoutModel.sysCss}`;
}
/**
* 组件初始化数据，vue生命周期
......@@ -77,9 +88,6 @@ export default class AppLoginOrg extends Vue {
*/
public created() {
this.getOrgData();
if (this.model) {
this.containerStyle = this.model.getElementStyle();
}
}
/**
......
src/components/layout-element/login/app-login-third/app-login-third.vue
浏览文件 @ b5e06fb8
<template>
<div :class="[model.sysCss, 'app-login-third']" :style="containerStyle">
<div :class="curClassName" :style="curStyle">
<div class="app-login-third__title">{{ $t("components.login.other") }}</div>
<div class="app-login-third__content">
<div class="sign-btn" @click="handleThirdLogin('DINGDING')">
......@@ -13,7 +13,6 @@
</template>
<script lang="ts">
import { PanelUserControlModel } from "@/model/panel-detail";
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({})
export default class AppThirdLogin extends Vue {
......@@ -21,16 +20,16 @@ export default class AppThirdLogin extends Vue {
/**
* 模型
*
* @type {string}
* @memberof AppLoginInput
* @type {any}
* @memberof AppThirdLogin
*/
@Prop() public model!: PanelUserControlModel;
@Prop() public layoutModelDetails: any;
/**
* 值
*
* @type {string}
* @memberof AppLoginInput
* @memberof AppThirdLogin
*/
@Prop() public value!: string;
......@@ -38,22 +37,28 @@ export default class AppThirdLogin extends Vue {
* 名称
*
* @type {string}
* @memberof AppLoginInput
* @memberof AppThirdLogin
*/
@Prop() public name!: string;
/**
* 容器样式
*
* @type {any}
* @memberof AppLoginInput
* 当前容器样式
*
* @memberof AppThirdLogin
*/
public containerStyle: any = null;
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
public mounted() {
if (this.model) {
this.containerStyle = this.model.getElementStyle();
}
/**
* 类名
*
* @memberof AppThirdLogin
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-input ${this.name} ${layoutModel.sysCss}`;
}
/**
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或