面板标签

src/app-register.ts

@@ -86,6 +86,7 @@ import AppLockScren from './components/app-lock-scren/app-lock-scren.vue'
 import ActionTimeline from './components/action-timeline/action-timeline.vue'
 import CronEditor from './components/cron-editor/cron-editor.vue'
 import AppMessagePopover from './components/app-message-popover/app-message-popover.vue'
+import AppPanelItem from './components/app-panel-item/app-panel-item.vue'
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -111,6 +112,7 @@ export const AppComponents = {
         v.prototype.$verify = Verify;
         v.prototype.$viewTool = ViewTool;
         v.prototype.$uiActionTool = UIActionTool;
+        v.component('app-panel-item',AppPanelItem);
         v.component('app-full-scren',AppFullScren);
         v.component('app-lock-scren',AppLockScren);
         v.component('input-box', InputBox);

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

+.app-panel-item {
+  height: 100%;
+  padding: 0 6px;
+  .editor {
+      height: 100%;
+      .ivu-form-item-content {
+          height: 100%;
+          min-height: 36px;
+      }
+  }
+  .app-panel-item-label {
+      padding: 6px 10px 6px 0px;
+
+  }
+}
+
+.app-panel-item.label-top, .app-panel-item.label-bottom {
+  .app-panel-item-label {
+      display: block;
+  }
+}
+
+.app-panel-item.label-left, .app-panel-item.label-right {
+  .app-panel-item-label, .editor {
+      height: 100%;
+      
+  }
+}
+
+.app-panel-item.label-left {
+  .app-panel-item-label {
+      float: left;
+      text-align: right;
+      position: absolute;
+      top: 2px;
+  }
+}
+
+.app-panel-item.label-right {
+  .app-panel-item-label {
+      float: right;
+      padding: 6px 0px 6px 10px;
+      position: absolute;
+      top: 2px;
+      right: 16px;
+  }
+}
+
+.app-panel-item.label-none {
+  .app-panel-item-label {
+      display: none !important;
+  }
+}
+.editorStyle{
+  .ivu-input.ivu-input-default{
+    border-color: red;
+  }
+}
\ No newline at end of file

src/components/app-panel-item/app-panel-item.vue

+<template>
+    <div :class="classes">
+        <div
+            v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'NONE') || !this.labelPos"
+            class="editor"
+            :style="slotstyle"
+        >
+            <div :class="valueCheck == true ?'':'editorStyle'">
+            <slot ></slot>
+            </div>
+        </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"
+        >
+          <div :class="valueCheck == true ?'':'editorStyle'">
+            <slot ></slot>
+          </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
+
+@Component({})
+export default class AppPanelItem extends Vue {
+  /**
+   * 名称
+   *
+   * @type {string}
+   * @memberof AppPanelItem
+   */
+  @Prop() public caption!: string;
+
+  /**
+   * 错误信息
+   *
+   * @type {string}
+   * @memberof AppPanelItem
+   */
+  @Prop() public error?: string;
+
+  /**
+   * label样式
+   *
+   * @type {string}
+   * @memberof AppPanelItem
+   */
+  @Prop() public labelStyle?: string;
+
+  /**
+   * 标签位置
+   *
+   * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
+   * @memberof AppPanelItem
+   */
+  @Prop() public labelPos?:
+    | string
+    | "BOTTOM"
+    | "LEFT"
+    | "NONE"
+    | "RIGHT"
+    | "TOP";
+
+  /**
+   * 标签宽度
+   *
+   * @type {number}
+   * @memberof AppPanelItem
+   */
+  @Prop({}) public labelWidth!: number;
+
+  /**
+   * 是否显示标题
+   *
+   * @type {boolean}
+   * @memberof AppPanelItem
+   */
+  @Prop() public isShowCaption?: boolean;
+
+  /**
+   * 标签是否空白
+   *
+   * @type {boolean}
+   * @memberof AppPanelItem
+   */
+  @Prop() public isEmptyCaption?: boolean;
+
+  /**
+   * 列表项名称
+   *
+   * @type {string}
+   * @memberof AppPanelItem
+   */
+  @Prop() public name!: string;
+
+  /**
+   * 面板数据
+   *
+   * @type {any}
+   * @memberof AppPanelItem
+   */
+  @Prop() public data!: any;
+
+  /**
+   * 编辑器值
+   *
+   * @type {any}
+   * @memberof AppPanelItem
+   */
+  @Prop() public value !: any;
+
+  /**
+   * 值规则
+   *
+   * @type {string}
+   * @memberof AppPanelItem
+   */
+  @Prop() public itemRules!: any;
+  
+  /**
+   * 是否必填
+   *
+   * @type {boolean}
+   * @memberof AppPanelItem
+   */
+  public required: boolean = false;
+
+  /**
+   * 值规则数组
+   *
+   * @type {any[]}
+   * @memberof AppPanelItem
+   */
+  public rules: any[] = [];
+
+  /**
+   * 值规则监控
+   *
+   * @param {*} newVal
+   * @param {*} oldVal
+   * @memberof AppPanelItem
+   */
+  @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) {}
+    }
+  }
+
+  public valueCheck: boolean = true;
+
+  @Watch("value")
+  ItemValueRules(newVal: any, oldVal: any) {
+    if(this.required && !newVal) {
+        this.valueCheck = false;
+    }else{
+        this.valueCheck = true;
+    }
+      
+  }
+
+  /**
+   * 计算样式
+   *
+   * @readonly
+   * @type {string []}
+   * @memberof AppPanelItem
+   */
+  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-panel-item", posClass ];
+  }
+
+  /**
+   * label样式
+   *
+   * @readonly
+   * @type {string}
+   * @memberof AppPanelItem
+   */
+  get labelclasses(): string {
+    return this.labelStyle
+      ? this.labelStyle + " app-panel-item-label"
+      : "app-panel-item-label";
+  }
+
+  /**
+   * label行内样式
+   *
+   * @readonly
+   * @type {string}
+   * @memberof AppPanelItem
+   */
+  get labelstyle(): any {
+    if (Object.is(this.labelPos, 'LEFT') || Object.is(this.labelPos, 'RIGHT')) {
+      return { width: this.labelWidth + "px" };
+    }
+  }
+
+  /**
+   * slot行内样式
+   *
+   * @readonly
+   * @type {string}
+   * @memberof AppPanelItem
+   */
+  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 AppPanelItem
+   */
+  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-panel-item.less";
+</style>
\ No newline at end of file