<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({ 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 AppLoginButton */ get caption() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return layoutModel.caption; } } /** * 显示标题 * * @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} 值不能为空!`; } } /** * 值校验 * * @memberof AppPanelField */ get valueCheck() { let valueCheck = true; if (this.required && !this.value && this.valueChange) { valueCheck = false; } return valueCheck; } /** * 值改变 * * @memberof AppPanelField */ public valueChange: boolean = false; @Watch("value") itemValueRules(newVal: any, oldVal: any) { this.valueChange = true; } } </script> <style lang='less'> @import "./app-panel-field.less"; </style>