Skip to content

iBiz-Vue-R7-Plus-Res
iBiz-Vue-R7-Plus-Res
提交 3d4c4539 编写于 作者: tony001's avatar tony001
浏览文件
操作

修改表单项必填、错误提示和登录功能

上级 27db1da5
显示空白字符变更
内嵌 并排
正在显示 包含 263 行增加 和 248 行删除
src/components/app-form-item/app-form-item.less
浏览文件 @ 3d4c4539
.app-form-item {
// margin-bottom: 16px;
>.ivu-form-item-label {
text-decoration: none;
display: block;
overflow: hidden;
white-space: nowrap;
}
>.ivu-form-item-content {
height: 100%;
.editor {
height: 100%;
.ivu-form-item-content {
height: 100%;
min-height: 36px;
}
}
.app-form-item-label {
padding: 6px 12px 6px 0px;
}
}
.app-form-item-label-top {
>.ivu-form-item-label {
float: none;
display: inline-block;
padding: 0 0 10px;
.app-form-item.label-top, .app-form-item.label-bottom {
.app-form-item-label {
display: block;
}
}
.app-form-item-label-left{
.app-form-item-label{
.app-form-item.label-left, .app-form-item.label-right {
.app-form-item-label, .editor {
height: 100%;
}
}
.app-form-item.label-left {
.app-form-item-label {
float: left;
text-align: right;
padding-right: 12px;
}
}
.app-form-item-label-right{
.app-form-item-label{
.app-form-item.label-right {
.app-form-item-label {
float: right;
text-align: left;
padding-left: 12px;
}
}
.app-form-item-label-top{
.app-form-item-label{
display: block;
padding-bottom: 10px;
}
}
.app-form-item-label-bottom{
.app-form-item-label{
display: block;
padding-top: 10px;
.app-form-item.label-none {
.app-form-item-label {
display: none !important;
}
}
\ No newline at end of file
src/components/app-form-item/app-form-item.vue
浏览文件 @ 3d4c4539
<template>
<div>
<div v-if="this.uiStyle === 'STYLE2'">
<div :class="classes">
<template v-if="this.uiStyle === 'STYLE2'">
<app-form-item2
:caption="caption"
:labelStyle="labelStyle"
......@@ -14,33 +14,42 @@
:itemRules="itemRules">
<slot></slot>
</app-form-item2>
</div>
<div v-if="this.uiStyle !== 'STYLE2'">
<form-item
:prop="name"
:error="error"
:required="required"
:rules="rules"
:class="classes">
<div v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos" class="slot-editor" :style="slotstyle">
</template>
<template v-if="this.uiStyle !== 'STYLE2'">
<div
v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos"
class="editor"
:style="slotstyle"
>
<form-item :prop="name" :error="error" :required="required" :rules="rules">
<slot></slot>
</form-item>
</div>
<span v-if="!Object.is(this.labelPos,'NONE') && this.isShowCaption && this.labelWidth > 0" :style="labelstyle" :class="labelclasses">
<span
v-if="!Object.is(this.labelPos,'NONE') && this.isShowCaption && this.labelWidth > 0"
:style="labelstyle"
:class="labelclasses"
>
<span v-if="required" style="color:red;">* </span>
{{this.isEmptyCaption ? '' : this.caption}}
</span>
<div v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')" class="slot-editor" :style="slotstyle">
<div
v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')"
class="editor"
:style="slotstyle"
>
<form-item :prop="name" :error="error" :required="required" :rules="rules">
<slot></slot>
</div>
</form-item>
</div>
</template>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({})
export default class AppFormItem extends Vue {
/**
* 名称
*
......@@ -71,7 +80,13 @@ export default class AppFormItem extends Vue {
* @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
* @memberof AppFormItem
*/
@Prop() public labelPos?: string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP';
@Prop() public labelPos?:
| string
| "BOTTOM"
| "LEFT"
| "NONE"
| "RIGHT"
| "TOP";
/**
* 标签宽度
......@@ -144,7 +159,7 @@ export default class AppFormItem extends Vue {
* @param {*} oldVal
* @memberof AppFormItem
*/
@Watch('itemRules',{deep:true})
@Watch("itemRules", { deep: true })
onItemRulesChange(newVal: any, oldVal: any) {
if (newVal) {
try {
......@@ -152,14 +167,13 @@ export default class AppFormItem extends Vue {
const _rules: any[] = newVal;
this.rules = [..._rules];
this.rules.some((rule: any) => {
if (rule.hasOwnProperty('required')) {
if (rule.hasOwnProperty("required")) {
this.required = rule.required;
return true;
}
return false;
});
} catch (error) {
}
} catch (error) {}
}
}
......@@ -171,28 +185,25 @@ export default class AppFormItem extends Vue {
* @memberof AppFormItem
*/
get classes(): string[] {
let posClass = '';
let posClass = "";
switch (this.labelPos) {
case 'TOP':
posClass = 'app-form-item-label-top';
case "TOP":
posClass = "label-top";
break;
case 'LEFT':
posClass = 'app-form-item-label-left';
case "LEFT":
posClass = "label-left";
break;
case 'BOTTOM':
posClass = 'app-form-item-label-bottom';
case "BOTTOM":
posClass = "label-bottom";
break;
case 'RIGHT':
posClass = 'app-form-item-label-right';
case "RIGHT":
posClass = "label-right";
break;
case 'NONE':
posClass = 'app-form-item-label-none';
case "NONE":
posClass = "label-none";
break;
}
return [
'app-form-item',
posClass
];
return [ "app-form-item", posClass ];
}
/**
......@@ -202,8 +213,10 @@ export default class AppFormItem extends Vue {
* @type {string}
* @memberof AppFormItem
*/
get labelclasses():string{
return this.labelStyle?this.labelStyle+' app-form-item-label':'app-form-item-label';
get labelclasses(): string {
return this.labelStyle
? this.labelStyle + " app-form-item-label"
: "app-form-item-label";
}
/**
......@@ -213,8 +226,10 @@ export default class AppFormItem extends Vue {
* @type {string}
* @memberof AppFormItem
*/
get labelstyle():any{
return {width:this.labelWidth+'px'};
get labelstyle(): any {
if (Object.is(this.labelPos, 'LEFT') || Object.is(this.labelPos, 'RIGHT')) {
return { width: this.labelWidth + "px" };
}
}
/**
......@@ -224,11 +239,11 @@ export default class AppFormItem extends Vue {
* @type {string}
* @memberof AppFormItem
*/
get slotstyle():any{
if(Object.is(this.labelPos,'LEFT')){
return {marginLeft:this.labelWidth+'px'};
}else if(Object.is(this.labelPos,'RIGHT')){
return {marginRight:this.labelWidth+'px'};
get slotstyle(): any {
if (Object.is(this.labelPos, "LEFT")) {
return { marginLeft: this.labelWidth + "px" };
} else if (Object.is(this.labelPos, "RIGHT")) {
return { marginRight: this.labelWidth + "px" };
}
}
......@@ -243,19 +258,17 @@ export default class AppFormItem extends Vue {
const _rules: any[] = this.itemRules;
this.rules = [..._rules];
this.rules.some((rule: any) => {
if (rule.hasOwnProperty('required')) {
if (rule.hasOwnProperty("required")) {
this.required = rule.required;
return true;
}
return false;
});
} catch (error) {
} catch (error) {}
}
}
}
}
</script>
<style lang='less'>
@import './app-form-item.less';
@import "./app-form-item.less";
</style>
\ No newline at end of file
src/components/login/login.vue
浏览文件 @ 3d4c4539
......@@ -162,6 +162,10 @@ export default class Login extends Vue {
* @memberof Login
*/
public handleSubmit(): void {
// 清除cookie
let leftTime = new Date();
leftTime.setTime(leftTime.getSeconds() - 1000);
document.cookie = "ibzuaa-token=;expires=" + leftTime.toUTCString();
const form: any = this.$refs.loginForm;
let validatestate: boolean = true;
form.validate((valid: boolean) => {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或