app-panel-field.vue 4.1 KB
Newer Older
1
<template>
2 3
  <div :class="curClassName" :style="curStyle">
    <div v-if="Object.is(labelPos, 'NONE') || !labelPos" class="editor">
4
      <div :class="{ 'check-error': !valueCheck }">
5
        <slot></slot>
6
        <span v-if="!valueCheck" class="error-info">{{ error }}</span>
7
      </div>
8
    </div>
9 10
    <div v-if="!Object.is(labelPos, 'NONE')" class="app-panel-field-label">
      <span v-if="required" style="color: red">* </span>
11
      <span v-if="showCaption">{{ caption }}</span>
12 13 14 15 16 17 18 19 20 21
    </div>
    <div
      v-if="
        Object.is(labelPos, 'BOTTOM') ||
        Object.is(labelPos, 'TOP') ||
        Object.is(labelPos, 'LEFT') ||
        Object.is(labelPos, 'RIGHT')
      "
      class="editor"
    >
22
      <div :class="{ 'check-error': !valueCheck }">
23
        <slot></slot>
24
        <span v-if="!valueCheck" class="error-info">{{ error }}</span>
25 26 27
      </div>
    </div>
  </div>
28 29 30 31 32 33 34 35 36 37 38 39
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

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

  /**
43
   * 下标
44
   *
45
   * @type {string}
46 47
   * @memberof AppPanelField
   */
48
  @Prop({ default: 0 }) public index?: number;
49 50

  /**
51
   * 编辑器值
52
   *
53
   * @type {any}
54 55
   * @memberof AppPanelField
   */
56
  @Prop() public value!: any;
57 58

  /**
59
   * 布局模型详情
60
   *
61
   * @type {*}
62 63
   * @memberof AppPanelField
   */
64
  @Prop() public layoutModelDetails!: any;
65 66

  /**
67
   * 项名称
68 69 70
   *
   * @memberof AppPanelField
   */
71 72 73
  get itemName() {
    return this.index ? `${this.name}_${this.index}` : this.name;
  }
74

75 76 77 78 79 80 81 82 83 84 85 86
  /**
   * 标题
   *
   * @memberof AppLoginButton
   */
  get caption() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.caption;
    }
  }

87
  /**
88
   * 显示标题
89 90 91
   *
   * @memberof AppPanelField
   */
92 93 94 95 96 97
  get showCaption() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.isShowCaption;
    }
  }
98 99

  /**
100
   * 类名
101 102 103
   *
   * @memberof AppPanelField
   */
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
  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}`;
    }
  }

129
  /**
130
   * 样式
131 132 133
   *
   * @memberof AppPanelField
   */
134 135 136 137 138 139
  get curStyle() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.getElementStyle();
    }
  }
140 141

  /**
142
   * 标签位置
143 144 145
   *
   * @memberof AppPanelField
   */
146 147 148 149 150 151 152
  get labelPos() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.labelPos || "LEFT";
    }
    return "LEFT";
  }
153 154

  /**
155
   * 必填
156 157 158
   *
   * @memberof AppPanelField
   */
159 160 161 162
  get required() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.required;
163 164 165
    }
  }

166 167 168 169 170 171 172 173 174 175 176 177
  /**
   * 错误信息
   *
   * @memberof AppPanelField
   */
  get error() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.error || `${this.caption} 值不能为空!`;
    }
  }

178
  /**
179
   * 值校验
180 181 182
   *
   * @memberof AppPanelField
   */
183 184 185 186 187 188 189
  get valueCheck() {
    let valueCheck = true;
    if (this.required && !this.value && this.valueChange) {
      valueCheck = false;
    }
    return valueCheck;
  }
190 191

  /**
192
   * 值改变
193 194 195
   *
   * @memberof AppPanelField
   */
196 197
  public valueChange: boolean = false;

198
  @Watch("value")
199
  itemValueRules(newVal: any, oldVal: any) {
200
    this.valueChange = true;
201 202 203 204 205 206
  }
}
</script>
<style lang='less'>
@import "./app-panel-field.less";
</style>