面板属性，面板成员（按钮，直接内容）

src/app-register.ts

@@ -86,8 +86,8 @@ 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 AppPanelField from './components/app-panel-field/app-panel-field.vue'
 import AppPanelItem from './components/app-panel-item/app-panel-item.vue'
-import AppPanelButton from './components/app-panel-button/app-panel-button.vue'
 
 
 // 全局挂载UI实体服务注册中心
@@ -114,8 +114,8 @@ export const AppComponents = {
         v.prototype.$verify = Verify;
         v.prototype.$viewTool = ViewTool;
         v.prototype.$uiActionTool = UIActionTool;
-        v.component('app-panel-button',AppPanelButton);
         v.component('app-panel-item',AppPanelItem);
+        v.component('app-panel-field',AppPanelField);
         v.component('app-full-scren',AppFullScren);
         v.component('app-lock-scren',AppLockScren);
         v.component('input-box', InputBox);

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

-<template>
-    <div>
-        <Button type="primary" long @click="onClick">
-            <i v-if="icon" :class="icon"></i>
-            <span v-if="showCaption">{{caption ? caption : ''}}</span>
-        </Button>
-    </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop, Watch } from "vue-property-decorator";
-
-@Component({})
-export default class AppPanelButton extends Vue {
-
-    /**
-     * 图标
-     *  
-     * @type {string}
-     * @memberof AppPanelButton
-     */
-    @Prop() public icon?: string;
-
-    /**
-     * 标题
-     *  
-     * @type {string}
-     * @memberof AppPanelButton
-     */
-    @Prop() public caption?: string;
-
-    /**
-     * 显示标题
-     *  
-     * @type {boolean}
-     * @memberof AppPanelButton
-     */
-    @Prop() public showCaption!: boolean;
-
-    /**
-     * 点击按钮
-     *
-     * @param {*} $event
-     * @memberof AppPanelButton
-     */
-    public onClick($event: any){
-        this.$emit('onClick',$event);
-    }
-
-}
-</script>
-<style lang='less'>
-
-</style>
\ No newline at end of file

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

+<template>
+    <div :class="classes">
+        <div v-if="Object.is(labelPos,'NONE') || !labelPos" class="editor">
+            <div :class="valueCheck == true ?'':'editorStyle'">
+              <slot ></slot>
+            </div>
+        </div>
+        <div v-if="!Object.is(labelPos,'NONE')" class="app-panel-item-label">
+            <span v-if="required" style="color:red;">* </span>
+            {{isEmptyCaption ? '' : caption}}
+        </div>
+        <div v-if="Object.is(labelPos,'BOTTOM') || Object.is(labelPos,'TOP') || Object.is(labelPos,'LEFT') || Object.is(labelPos,'RIGHT')" class="editor">
+          <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;
+
+  /**
+   * 标签位置
+   *
+   * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
+   * @memberof AppPanelItem
+   */
+  @Prop() public labelPos?:
+    | string
+    | "BOTTOM"
+    | "LEFT"
+    | "NONE"
+    | "RIGHT"
+    | "TOP";
+
+  /**
+   * 标签是否空白
+   *
+   * @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) {}
+    }
+  }
+
+  /**
+   * 编辑器样式
+   *
+   * @type {boolean}
+   * @memberof AppPanelItem
+   */
+  public valueCheck: boolean = true;
+
+  /**
+   * 编辑器值监控
+   *
+   * @param {*} newVal
+   * @param {*} oldVal
+   * @memberof AppPanelItem
+   */
+  @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 ];
+  }
+
+  /**
+   * 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-field.less";
+</style>
\ No newline at end of file

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

 <template>
-    <div :class="classes">
-        <div v-if="Object.is(labelPos,'NONE') || !labelPos" class="editor">
-            <div :class="valueCheck == true ?'':'editorStyle'">
-              <slot ></slot>
-            </div>
+    <div>
+        <div v-if="Object.is(itemType,'BUTTON')" >
+        <Button type="primary" long @click="onClick">
+            <i v-if="icon" :class="icon"></i>
+            <span v-if="showCaption">{{caption ? caption : ''}}</span>
+        </Button>
         </div>
-        <div v-if="!Object.is(labelPos,'NONE')" class="app-panel-item-label">
-            <span v-if="required" style="color:red;">* </span>
-            {{isEmptyCaption ? '' : caption}}
-        </div>
-        <div v-if="Object.is(labelPos,'BOTTOM') || Object.is(labelPos,'TOP') || Object.is(labelPos,'LEFT') || Object.is(labelPos,'RIGHT')" class="editor">
-          <div :class="valueCheck == true ?'':'editorStyle'">
-            <slot ></slot>
-          </div>
+        <div v-if="Object.is(itemType,'RAWITEM')">
+            <i v-if="icon" :class="icon"></i>
+            <span v-if="showCaption" style="padding-right: 10px;">{{caption ? caption : ''}}</span>
+            <slot></slot>
         </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;
-
-  /**
-   * 标签位置
-   *
-   * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
-   * @memberof AppPanelItem
-   */
-  @Prop() public labelPos?:
-    | string
-    | "BOTTOM"
-    | "LEFT"
-    | "NONE"
-    | "RIGHT"
-    | "TOP";
+export default class AppPanelButton extends Vue {
 
-  /**
-   * 标签是否空白
-   *
-   * @type {boolean}
-   * @memberof AppPanelItem
-   */
-  @Prop() public isEmptyCaption?: boolean;
+    /**
+     * 面板成员类型
+     *  
+     * @type {string}
+     * @memberof AppPanelButton
+     */
+    @Prop() public itemType!: string;
 
-  /**
-   * 列表项名称
-   *
-   * @type {string}
-   * @memberof AppPanelItem
-   */
-  @Prop() public name!: string;
+    /**
+     * 图标
+     *  
+     * @type {string}
+     * @memberof AppPanelButton
+     */
+    @Prop() public icon?: string;
 
-  /**
-   * 面板数据
-   *
-   * @type {any}
-   * @memberof AppPanelItem
-   */
-  @Prop() public data!: any;
+    /**
+     * 标题
+     *  
+     * @type {string}
+     * @memberof AppPanelButton
+     */
+    @Prop() public caption?: string;
 
-  /**
-   * 编辑器值
-   *
-   * @type {any}
-   * @memberof AppPanelItem
-   */
-  @Prop() public value !: any;
+    /**
+     * 显示标题
+     *  
+     * @type {boolean}
+     * @memberof AppPanelButton
+     */
+    @Prop() public showCaption?: boolean;
 
-  /**
-   * 值规则
-   *
-   * @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) {}
+    /**
+     * 点击按钮
+     *
+     * @param {*} $event
+     * @memberof AppPanelButton
+     */
+    public onClick($event: any){
+        this.$emit('onClick',$event);
     }
-  }
-
-  /**
-   * 编辑器样式
-   *
-   * @type {boolean}
-   * @memberof AppPanelItem
-   */
-  public valueCheck: boolean = true;
 
-  /**
-   * 编辑器值监控
-   *
-   * @param {*} newVal
-   * @param {*} oldVal
-   * @memberof AppPanelItem
-   */
-  @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 ];
-  }
-
-  /**
-   * 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