提交 3cbed1b2 编写于 作者: Shine-zwj's avatar Shine-zwj

面板标签

上级 eb21252e
...@@ -86,6 +86,7 @@ import AppLockScren from './components/app-lock-scren/app-lock-scren.vue' ...@@ -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 ActionTimeline from './components/action-timeline/action-timeline.vue'
import CronEditor from './components/cron-editor/cron-editor.vue' import CronEditor from './components/cron-editor/cron-editor.vue'
import AppMessagePopover from './components/app-message-popover/app-message-popover.vue' import AppMessagePopover from './components/app-message-popover/app-message-popover.vue'
import AppPanelItem from './components/app-panel-item/app-panel-item.vue'
// 全局挂载UI实体服务注册中心 // 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister; window['uiServiceRegister'] = uiServiceRegister;
...@@ -111,6 +112,7 @@ export const AppComponents = { ...@@ -111,6 +112,7 @@ export const AppComponents = {
v.prototype.$verify = Verify; v.prototype.$verify = Verify;
v.prototype.$viewTool = ViewTool; v.prototype.$viewTool = ViewTool;
v.prototype.$uiActionTool = UIActionTool; v.prototype.$uiActionTool = UIActionTool;
v.component('app-panel-item',AppPanelItem);
v.component('app-full-scren',AppFullScren); v.component('app-full-scren',AppFullScren);
v.component('app-lock-scren',AppLockScren); v.component('app-lock-scren',AppLockScren);
v.component('input-box', InputBox); v.component('input-box', InputBox);
......
.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
<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
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册