app-panel-field.vue

<template>
  <div :class="curClassName" :style="curStyle">
    <div v-if="Object.is(labelPos, 'NONE') || !labelPos" class="editor">
      <div :class="{'check-error': !valueCheck}">
        <slot></slot>
        <span v-if="!valueCheck" class="error-info">{{ error }}</span>
      </div>
    </div>
    <div v-if="!Object.is(labelPos, 'NONE')" class="app-panel-field-label">
      <span v-if="required" style="color: red">* </span>
      <span v-if="showCaption">{{ caption }}</span>
    </div>
    <div
      v-if="
        Object.is(labelPos, 'BOTTOM') ||
        Object.is(labelPos, 'TOP') ||
        Object.is(labelPos, 'LEFT') ||
        Object.is(labelPos, 'RIGHT')
      "
      class="editor"
    >
      <div :class="{'check-error': !valueCheck}">
        <slot></slot>
        <span v-if="!valueCheck" class="error-info">{{ error }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component({})
export default class AppPanelField extends Vue {
  /**
   * 名称
   *
   * @type {string}
   * @memberof AppPanelField
   */
  @Prop() public name!: string;

  /**
   * 标题
   *
   * @type {string}
   * @memberof AppPanelField
   */
  @Prop() public caption!: string;

  /**
   * 下标
   *
   * @type {string}
   * @memberof AppPanelField
   */
  @Prop({ default: 0 }) public index?: number;

  /**
   * 编辑器值
   *
   * @type {any}
   * @memberof AppPanelField
   */
  @Prop() public value!: any;

  /**
   * 布局模型详情
   *
   * @type {*}
   * @memberof AppPanelField
   */
  @Prop() public layoutModelDetails!: any;

  /**
   * 项名称
   *
   * @memberof AppPanelField
   */
  get itemName() {
    return this.index ? `${this.name}_${this.index}` : this.name;
  }

  /**
   * 显示标题
   *
   * @memberof AppPanelField
   */
  get showCaption() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.isShowCaption;
    }
  }

  /**
   * 类名
   *
   * @memberof AppPanelField
   */
  get curClassName() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      let posClass = "";
      switch (layoutModel.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-panel-field ${posClass} ${this.itemName} ${layoutModel.sysCss}`;
    }
  }

  /**
   * 样式
   *
   * @memberof AppPanelField
   */
  get curStyle() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.getElementStyle();
    }
  }

  /**
   * 标签位置
   *
   * @memberof AppPanelField
   */
  get labelPos() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.labelPos || "LEFT";
    }
    return "LEFT";
  }

  /**
   * 必填
   *
   * @memberof AppPanelField
   */
  get required() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.required;
    }
  }

  /**
   * 错误信息
   *
   * @memberof AppPanelField
   */
  get error() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.error || `${this.caption} 值不能为空！`;
    }
  }

  /**
   * 值校验
   *
   * @type {boolean}
   * @memberof AppPanelField
   */
  public valueCheck: boolean = true;

  /**
   * 编辑器值监控
   *
   * @param {*} newVal
   * @param {*} oldVal
   * @memberof AppPanelField
   */
  @Watch("value")
  itemValueRules(newVal: any, oldVal: any) {
    if (this.required && !newVal) {
      this.valueCheck = false;
    } else {
      this.valueCheck = true;
    }
  }
}
</script>
<style lang='less'>
@import "./app-panel-field.less";
</style>