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

src/components/app-form-item/app-form-item.less

 .app-form-item {
-    // margin-bottom: 16px;
-    >.ivu-form-item-label {
-        text-decoration: none;
-        display: block;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-    >.ivu-form-item-content {
-        min-height: 36px;
-    }
+  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{
-    float: left;
-    text-align: right;
-    padding-right: 12px;
+.app-form-item.label-left, .app-form-item.label-right {
+  .app-form-item-label, .editor {
+      height: 100%;
   }
 }
-.app-form-item-label-right{
-  .app-form-item-label{
-    float: right;
-    text-align: left;
-    padding-left: 12px;
+
+.app-form-item.label-left {
+  .app-form-item-label {
+      float: left;
   }
 }
-.app-form-item-label-top{
-  .app-form-item-label{
-    display: block;
-    padding-bottom: 10px;
+
+.app-form-item.label-right {
+  .app-form-item-label {
+      float: right;
+      padding-left: 12px;
   }
 }
-.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

 <template>
-    <div>
-        <div v-if="this.uiStyle === 'STYLE2'">
-             <app-form-item2
+    <div :class="classes">
+        <template v-if="this.uiStyle === 'STYLE2'">
+            <app-form-item2
                 :caption="caption"
                 :labelStyle="labelStyle"
                 :error="error"
@@ -14,248 +14,261 @@
                 :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>
-                  </div>
-                  <span v-if="!Object.is(this.labelPos,'NONE') && this.isShowCaption && this.labelWidth > 0" :style="labelstyle"  :class="labelclasses">
-                      {{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">
+                </form-item>
+            </div>
+            <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="editor"
+                :style="slotstyle"
+            >
+                <form-item :prop="name" :error="error" :required="required" :rules="rules">
                     <slot></slot>
-                  </div>
-            </form-item>
-        </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 {
+  /**
+   * 名称
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public caption!: string;
 
-    /**
-     * 名称
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public caption!: string;
-
-    /**
-     * 错误信息
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public error?: string;
+  /**
+   * 错误信息
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public error?: string;
 
-    /**
-     * label样式
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public labelStyle?: string;
+  /**
+   * label样式
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public labelStyle?: string;
 
-    /**
-     * 标签位置
-     *
-     * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
-     * @memberof AppFormItem
-     */
-    @Prop() public labelPos?: string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP';
+  /**
+   * 标签位置
+   *
+   * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
+   * @memberof AppFormItem
+   */
+  @Prop() public labelPos?:
+    | string
+    | "BOTTOM"
+    | "LEFT"
+    | "NONE"
+    | "RIGHT"
+    | "TOP";
 
-    /**
-     * 标签宽度
-     *
-     * @type {number}
-     * @memberof AppFormItem
-     */
-    @Prop({}) public labelWidth!: number;
+  /**
+   * 标签宽度
+   *
+   * @type {number}
+   * @memberof AppFormItem
+   */
+  @Prop({}) public labelWidth!: number;
 
-    /**
-     * 是否显示标题
-     *
-     * @type {boolean}
-     * @memberof AppFormItem
-     */
-    @Prop() public isShowCaption?: boolean;
+  /**
+   * 是否显示标题
+   *
+   * @type {boolean}
+   * @memberof AppFormItem
+   */
+  @Prop() public isShowCaption?: boolean;
 
-    /**
-     * 标签是否空白
-     *
-     * @type {boolean}
-     * @memberof AppFormItem
-     */
-    @Prop() public isEmptyCaption?: boolean;
+  /**
+   * 标签是否空白
+   *
+   * @type {boolean}
+   * @memberof AppFormItem
+   */
+  @Prop() public isEmptyCaption?: boolean;
 
-    /**
-     * 表单项名称
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public name!: string;
+  /**
+   * 表单项名称
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public name!: string;
 
-    /**
-     * 内置样式
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public uiStyle?: string;
+  /**
+   * 内置样式
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public uiStyle?: string;
 
-    /**
-     * 表单项值规则
-     *
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    @Prop() public itemRules!: any;
+  /**
+   * 表单项值规则
+   *
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  @Prop() public itemRules!: any;
 
-    /**
-     * 值规则数组
-     *
-     * @type {any[]}
-     * @memberof AppFormItem
-     */
-    public rules: any[] = [];
+  /**
+   * 值规则数组
+   *
+   * @type {any[]}
+   * @memberof AppFormItem
+   */
+  public rules: any[] = [];
 
-    /**
-     * 是否必填
-     *
-     * @type {boolean}
-     * @memberof AppFormItem
-     */
-    public required: boolean = false;
+  /**
+   * 是否必填
+   *
+   * @type {boolean}
+   * @memberof AppFormItem
+   */
+  public required: boolean = false;
 
-    /**
-     * 表单项值规则监控
-     *
-     * @param {*} newVal
-     * @param {*} oldVal
-     * @memberof AppFormItem
-     */
-    @Watch('itemRules',{deep:true})
-    onItemRulesChange(newVal: any, oldVal: any) {
-        if (newVal) {
-            try {
-                this.rules = [];
-                const _rules: any[] = newVal;
-                this.rules = [..._rules];
-                this.rules.some((rule: any) => {
-                    if (rule.hasOwnProperty('required')) {
-                        this.required = rule.required;
-                        return true;
-                    }
-                    return false;
-                });
-            } catch (error) {
-            }
-        }
+  /**
+   * 表单项值规则监控
+   *
+   * @param {*} newVal
+   * @param {*} oldVal
+   * @memberof AppFormItem
+   */
+  @Watch("itemRules", { deep: true })
+  onItemRulesChange(newVal: any, oldVal: any) {
+    if (newVal) {
+      try {
+        this.rules = [];
+        const _rules: any[] = newVal;
+        this.rules = [..._rules];
+        this.rules.some((rule: any) => {
+          if (rule.hasOwnProperty("required")) {
+            this.required = rule.required;
+            return true;
+          }
+          return false;
+        });
+      } catch (error) {}
     }
+  }
 
-    /**
-     * 计算样式
-     *
-     * @readonly
-     * @type {string []}
-     * @memberof AppFormItem
-     */
-    get classes(): string[] {
-        let posClass = '';
-        switch (this.labelPos) {
-          case 'TOP':
-            posClass = 'app-form-item-label-top';
-            break;
-          case 'LEFT':
-            posClass = 'app-form-item-label-left';
-            break;
-          case 'BOTTOM':
-            posClass = 'app-form-item-label-bottom';
-            break;
-          case 'RIGHT':
-            posClass = 'app-form-item-label-right';
-            break;
-          case 'NONE':
-            posClass = 'app-form-item-label-none';
-            break;
-        }
-        return [
-            'app-form-item',
-            posClass
-        ];
+  /**
+   * 计算样式
+   *
+   * @readonly
+   * @type {string []}
+   * @memberof AppFormItem
+   */
+  get classes(): string[] {
+    let posClass = "";
+    switch (this.labelPos) {
+      case "TOP":
+        posClass = "label-top";
+        break;
+      case "LEFT":
+        posClass = "label-left";
+        break;
+      case "BOTTOM":
+        posClass = "label-bottom";
+        break;
+      case "RIGHT":
+        posClass = "label-right";
+        break;
+      case "NONE":
+        posClass = "label-none";
+        break;
     }
+    return [ "app-form-item", posClass ];
+  }
 
-    /**
-     * label样式
-     *
-     * @readonly
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    get labelclasses():string{
-        return this.labelStyle?this.labelStyle+' app-form-item-label':'app-form-item-label';
-    }
+  /**
+   * label样式
+   *
+   * @readonly
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  get labelclasses(): string {
+    return this.labelStyle
+      ? this.labelStyle + " app-form-item-label"
+      : "app-form-item-label";
+  }
 
-    /**
-     * label行内样式
-     *
-     * @readonly
-     * @type {string}
-     * @memberof AppFormItem
-     */
-    get labelstyle():any{
-        return {width:this.labelWidth+'px'};
+  /**
+   * label行内样式
+   *
+   * @readonly
+   * @type {string}
+   * @memberof AppFormItem
+   */
+  get labelstyle(): any {
+    if (Object.is(this.labelPos, 'LEFT') || Object.is(this.labelPos, 'RIGHT')) {
+      return { width: this.labelWidth + "px" };
     }
+  }
 
-    /**
-     * slot行内样式
-     *
-     * @readonly
-     * @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'};
-      }
+  /**
+   * slot行内样式
+   *
+   * @readonly
+   * @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" };
     }
+  }
 
-    /**
-     * vue 生命周期
-     *
-     * @memberof AppFormItem
-     */
-    public mounted() {
-        if (this.itemRules) {
-            try {
-                const _rules: any[] = this.itemRules;
-                this.rules = [..._rules];
-                this.rules.some((rule: any) => {
-                    if (rule.hasOwnProperty('required')) {
-                        this.required = rule.required;
-                        return true;
-                    }
-                    return false;
-                });
-            } catch (error) {
-            }
-        }
+  /**
+   * vue 生命周期
+   *
+   * @memberof AppFormItem
+   */
+  public mounted() {
+    if (this.itemRules) {
+      try {
+        const _rules: any[] = this.itemRules;
+        this.rules = [..._rules];
+        this.rules.some((rule: any) => {
+          if (rule.hasOwnProperty("required")) {
+            this.required = rule.required;
+            return true;
+          }
+          return false;
+        });
+      } 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

@@ -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) => {