Skip to content

功
功能演示系统
提交 71799569 编写于 作者: ibizdev's avatar ibizdev
浏览文件
操作

ShineKOT 发布系统代码 [后台服务，演示应用]

上级 7f6ccbb0
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 290 行增加 和 133 行删除
app_Web/src/components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.vue
浏览文件 @ 71799569
<template>
<div :class="className">
<div :class="curClassName" :style="curStyle">
<template v-if="QRCodeConfig.url">
<ibiz-qr-code
:size="QRCodeConfig.size"
......@@ -40,13 +40,32 @@ export default class AppPresetQrCode extends Vue {
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppPresetQrCode
*/
@Prop() public layoutModelDetails: any;
/**
* 类名
*
* @memberof AppPresetQrCode
*/
get className(): string {
return `app-preset-qrcode ${this.name}`;
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-qrcode ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*
* @memberof AppPresetQrCode
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
......
app_Web/src/components/layout-element/interactive/app-preset-switch/app-preset-switch.vue
浏览文件 @ 71799569
<template>
<el-switch :class="className" v-model="curValue" :disabled="disabled"></el-switch>
<el-switch :class="curClassName" :style="curStyle" v-model="curValue" :disabled="disabled"></el-switch>
</template>
<script lang="ts">
......@@ -24,20 +24,41 @@ export default class AppPresetSwitch extends Vue {
@Prop() public name!: string
/**
* 名称
* 布局模型详情
*
* @type {*}
* @memberof AppPresetSwitch
*/
@Prop({default: false}) public disabled?: boolean
@Prop() public layoutModelDetails: any;
/**
* 类名
*
* @memberof AppPresetSwitch
*/
get className(): string {
return `app-preset-switch ${this.name}`;
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-switch ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*
* @memberof AppPresetSwitch
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 禁用
*
* @memberof AppPresetSwitch
*/
get disabled(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.disabled;
}
/**
......
app_Web/src/components/layout-element/interactive/app-preset-text-input/app-preset-text-input.vue
浏览文件 @ 71799569
<template>
<div :class="className">
<div :class="curClassName" :style="curStyle">
<el-input v-model="curValue" :placeholder="placeholder"></el-input>
</div>
</template>
......@@ -26,20 +26,52 @@ export default class AppPresetTextInput extends Vue {
@Prop() public name!: string;
/**
* 禁用
* 布局模型详情
*
* @type {boolean}
* @memberof AppPresetTextInput
* @type {*}
* @memberof AppPresetSwitch
*/
@Prop() public disabled?: boolean;
@Prop() public layoutModelDetails: any;
/**
* 占位文本
* 类名
*
* @type {string}
* @memberof AppPresetTextInput
* @memberof AppPresetSwitch
*/
@Prop({default: ''}) public placeholder?: string;
get curClassName() {
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-text-input ${this.name} ${layoutModel.sysCss}`;
}
/**
* 禁用
*
* @memberof AppPresetSwitch
*/
get disabled() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.disabled;
}
/**
* 当前容器样式
*
* @memberof AppPresetSwitch
*/
get curStyle() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 占位提示
*
* @memberof AppPresetSwitch
*/
get placeholder() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.placeholder || '';
}
/**
* 类名
......
app_Web/src/components/layout-element/text/app-preset-caption/app-preset-caption.vue
浏览文件 @ 71799569
<template>
<div :class="className">
<div :class="curClassName" :style="curStyle">
<slot></slot>
</div>
</template>
......@@ -18,13 +18,32 @@ export default class AppPresetCaption extends Vue {
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppPresetCaption
*/
@Prop() public layoutModelDetails: any;
/**
* 类名
*
* @memberof AppPresetText
* @memberof AppPresetCaption
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-caption ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*
* @memberof AppPresetCaption
*/
get className(): string {
return `app-preset-caption ${this.name}`;
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
}
</script>
......
app_Web/src/components/layout-element/text/app-preset-text/app-preset-text.vue
浏览文件 @ 71799569
<template>
<div :class="className">
<div :class="curClassName" :style="curStyle">
<!-- 直接内容类型 -->
<template v-if="Object.is(contentType, 'RAW')">
<template v-if="Object.is(renderMode, 'TEXT')">
<span :style="cssStyle">{{ content }}</span>
<span :style="contentStyle">{{ content }}</span>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING1')">
<h1 :style="cssStyle">{{ content }}</h1>
<h1 :style="contentStyle">{{ content }}</h1>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING2')">
<h2 :style="cssStyle">{{ content }}</h2>
<h2 :style="contentStyle">{{ content }}</h2>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING3')">
<h3 :style="cssStyle">{{ content }}</h3>
<h3 :style="contentStyle">{{ content }}</h3>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING4')">
<h4 :style="cssStyle">{{ content }}</h4>
<h4 :style="contentStyle">{{ content }}</h4>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING5')">
<h5 :style="cssStyle">{{ content }}</h5>
<h5 :style="contentStyle">{{ content }}</h5>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING6')">
<h6 :style="cssStyle">{{ content }}</h6>
<h6 :style="contentStyle">{{ content }}</h6>
</template>
<template v-else-if="Object.is(renderMode, 'PARAGRAPH')">
<p :style="cssStyle">{{ content }}</p>
<p :style="contentStyle">{{ content }}</p>
</template>
</template>
<!-- 图片类型 -->
<template v-else-if="Object.is(contentType, 'IMAGE')">
<img :style="cssStyle" v-if="imgUrl" :src="imgUrl" />
<i :style="cssStyle" v-else :class="imageClass ? imageClass : ''"></i>
<img :style="contentStyle" v-if="imagePath" :src="imagePath" />
<i :style="contentStyle" v-else :class="cssClass"></i>
</template>
<!-- HTML类型 -->
<template v-else-if="Object.is(contentType, 'HTML')">
<div :style="cssStyle" v-html="content" />
<div :style="contentStyle" v-html="content" />
</template>
<!-- MARKDOWN类型 -->
<template v-else-if="Object.is(contentType, 'MARKDOWN')">
MARKDOWN暂未支持
<!-- <app-markdown-editor :style="cssStyle" mode="PREVIEWONLY" :itemValue="value"></app-markdown-editor> -->
<!-- <app-markdown-editor :style="contentStyle" mode="PREVIEWONLY" :itemValue="value"></app-markdown-editor> -->
</template>
</div>
</template>
......@@ -67,109 +67,111 @@ export default class AppPresetText extends Vue {
@Prop() public name!: string;
/**
* 内容类型
* 布局模型详情
*
* @type {string}
* @memberof AppPresetText
* @type {*}
* @memberof AppPresetTitle
*/
@Prop({ default: 'RAW' }) public contentType!: 'RAW' | 'HTML' | 'IMAGE' | 'MARKDOWN';
@Prop() public layoutModelDetails: any;
/**
* 绘制模式
* 图标
*
* @type {string}
* @memberof AppPresetText
*/
@Prop({ default: 'TEXT' }) public renderMode!: 'TEXT' | 'HEADING1' | 'HEADING2' | 'HEADING3' | 'HEADING4' | 'HEADING5' | 'HEADING6' | 'PARAGRAPH';
@Prop() public imageClass?: string;
/**
* 内容样式
* 图片路径
*
* @type {string}
* @memberof AppPresetText
*/
@Prop() public contentStyle?: string;
get imagePath() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.imagePath;
}
/**
* 预置类型
* 图标
*
* @type {string}
* @memberof AppPresetText
* @memberof AppPresetTitle
*/
@Prop({ default: 'STATIC_TEXT' }) public predefinedType!: 'FIELD_TEXT_DYNAMIC' | 'STATIC_LABEL' | 'STATIC_TEXT';
get cssClass() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.iconcls;
}
/**
* 图标
* 类名
*
* @memberof AppPresetText
* @memberof AppPresetTitle
*/
@Prop() public imageClass?: string;
get curClassName() {
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-text app-preset-text--${layoutModel.contentType.toLowerCase()} ${this.name} ${layoutModel.sysCss}`;
}
/**
* 图片路径
*
* @memberof AppPresetText
* 当前容器样式
*
* @memberof AppPresetTitle
*/
@Prop() public imgUrl?: string;
get curStyle() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 样式
*
* @memberof AppPresetText
* 绘制模式
*
* @memberof AppPresetTitle
*/
protected cssStyle: string = '';
get renderMode() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.renderMode;
}
/**
* 内容
*
* @memberof AppPresetText
*/
get content(): string {
const layoutModel = this.layoutModelDetails[this.name];
let content = this.value;
if (this.contentType == 'HTML') {
const items = content.match(/\{{(.+?)\}}/g);
if (items) {
items.forEach((item: string) => {
content = content.replace(/\{{(.+?)\}}/, eval(item.substring(2, item.length - 2)));
});
if (layoutModel.predefinedType !== 'FIELD_TEXT_DYNAMIC') {
if (layoutModel.contentType == 'ROW') {
content = layoutModel.rawContent;
} else if (layoutModel.contentType == 'HTML') {
content = layoutModel.htmlContent;
const items = content.match(/\{{(.+?)\}}/g);
if (items) {
items.forEach((item: string) => {
content = content.replace(/\{{(.+?)\}}/, eval(item.substring(2, item.length - 2)));
});
}
content = content.replaceAll('&lt;', '<');
content = content.replaceAll('&gt;', '>');
content = content.replaceAll('&amp;nbsp;', ' ');
content = content.replaceAll('&nbsp;', ' ');
}
content = content.replaceAll('&lt;', '<');
content = content.replaceAll('&gt;', '>');
content = content.replaceAll('&amp;nbsp;', ' ');
content = content.replaceAll('&nbsp;', ' ');
}
return content;
}
/**
* 类名
*
* @memberof AppPresetText
*/
get className(): string {
return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.name}`;
}
/**
* Vue生命周期 --- Created
*
* @memberof AppPresetText
*/
created() {
this.handleText();
}
/**
* 处理文本
* 内容样式
*
* @memberof AppPresetText
*/
protected handleText() {
if (this.predefinedType === 'STATIC_LABEL') {
this.cssStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
get contentStyle(): string {
const layoutModel = this.layoutModelDetails[this.name];
let contentStyle = layoutModel.contentStyle;
if (layoutModel.predefinedType === 'STATIC_LABEL') {
contentStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
}
return contentStyle;
}
}
</script>
<style lang="less">
......
app_Web/src/components/layout-element/text/app-preset-title/app-preset-title.vue
浏览文件 @ 71799569
<template>
<h1 :class="className">{{ curValue }}</h1>
<h1 :class="curClassName" :style="curStyle">{{ curValue }}</h1>
</template>
<script lang="ts">
......@@ -16,13 +16,32 @@ export default class AppPresetTitle extends Vue {
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppPresetTitle
*/
@Prop() public layoutModelDetails: any;
/**
* 类名
*
* @memberof AppPresetTitle
*/
get className(): string {
return `app-preset-title ${this.name}`;
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-title ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*
* @memberof AppPresetTitle
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
......
app_Web/src/model/panel-detail/panel-raw-item.ts
浏览文件 @ 71799569
......@@ -27,6 +27,48 @@ export class PanelRawitemModel extends PanelDetailModel {
*/
private readonly viewType: string;
/**
* 绘制模式
*
* @private
* @type {('TEXT' | 'HEADING1' | 'HEADING2' | 'HEADING3' | 'HEADING4' | 'HEADING5' | 'HEADING6' | 'PARAGRAPH')}
* @memberof PanelRawitemModel
*/
public renderMode: 'TEXT' | 'HEADING1' | 'HEADING2' | 'HEADING3' | 'HEADING4' | 'HEADING5' | 'HEADING6' | 'PARAGRAPH' = 'TEXT';
/**
* 内容类型
*
* @private
* @type {('RAW' | 'HTML' | 'IMAGE' | 'MARKDOWN')}
* @memberof PanelRawitemModel
*/
public contentType: 'RAW' | 'HTML' | 'IMAGE' | 'MARKDOWN' = 'RAW';
/**
* 内容样式
*
* @type {string}
* @memberof PanelRawitemModel
*/
public contentStyle!: string;
/**
* 直接内容
*
* @type {string}
* @memberof PanelRawitemModel
*/
public rawContent!: string;
/**
* html内容
*
* @type {string}
* @memberof PanelRawitemModel
*/
public htmlContent!: string;
/**
* Creates an instance of PanelRawitemModel.
* @param {*} [opts={}]
......@@ -35,6 +77,11 @@ export class PanelRawitemModel extends PanelDetailModel {
constructor(opts: any = {}) {
super(opts);
this.viewType = opts.viewType;
this.renderMode = opts.renderMode ? opts.renderMode : 'TEXT';
this.contentType = opts.contentType ? opts.contentType : 'RAW';
this.contentStyle = opts.contentStyle;
this.rawContent = opts.rawContent;
this.htmlContent = opts.htmlContent;
}
/**
......@@ -83,6 +130,4 @@ export class PanelRawitemModel extends PanelDetailModel {
}
return false;
}
}
\ No newline at end of file
app_Web/src/pages/ungroup/app-index-view/app-index-view-base.vue
浏览文件 @ 71799569
......@@ -252,11 +252,11 @@ export default class AppIndexViewBase extends Vue {
* @memberof AppIndexViewBase
*/
public layoutModelDetails:any = {
static_label1:new PanelRawitemModel({ name: 'static_label1', caption: '标签', isShowCaption: true, sysCss: '', itemType: 'RAWITEM', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, predefinedType: 'STATIC_LABEL', contentType: 'RAW', contentStyle: '', rawContent: '标签', htmlContent: '', panel: this , viewType: 'APPINDEXVIEW' }),
static_label1:new PanelRawitemModel({ name: 'static_label1', caption: '标签', isShowCaption: true, sysCss: '', itemType: 'RAWITEM', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:-1, flexParams:{align:'',dir:'',vAlign:''}, predefinedType: 'STATIC_LABEL', contentType: 'RAW', contentStyle: '', rawContent: '标签', htmlContent: '', renderMode: 'PARAGRAPH', panel: this , viewType: 'APPINDEXVIEW' }),
app_apptitle:new PanelFieldModel({ name: 'app_apptitle', caption: '应用标题', isShowCaption: false, sysCss: '', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'CENTER', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:0, flexParams:{align:'',dir:'',vAlign:''}, panel: this }),
view_pagecaption:new PanelFieldModel({ name: 'view_pagecaption', caption: '页面标题', isShowCaption: false, sysCss: '', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'CENTER', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:0, flexParams:{align:'',dir:'',vAlign:''}, panel: this }),
static_label2:new PanelRawitemModel({ name: 'static_label2', caption: '标签', isShowCaption: true, sysCss: '', itemType: 'RAWITEM', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'CENTER', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:0, flexParams:{align:'',dir:'',vAlign:''}, predefinedType: 'STATIC_LABEL', contentType: 'RAW', contentStyle: '', rawContent: '标签爱仕达多', htmlContent: '', panel: this , viewType: 'APPINDEXVIEW' }),
static_text1:new PanelRawitemModel({ name: 'static_text1', caption: '文本', isShowCaption: true, sysCss: '', itemType: 'RAWITEM', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'CENTER', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:0, flexParams:{align:'',dir:'',vAlign:''}, predefinedType: 'STATIC_TEXT', contentType: 'RAW', contentStyle: '', rawContent: '文本内容', htmlContent: '', panel: this , viewType: 'APPINDEXVIEW' }),
static_label2:new PanelRawitemModel({ name: 'static_label2', caption: '标签', isShowCaption: true, sysCss: '', itemType: 'RAWITEM', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'CENTER', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:0, flexParams:{align:'',dir:'',vAlign:''}, predefinedType: 'STATIC_LABEL', contentType: 'RAW', contentStyle: '', rawContent: '标签爱仕达多', htmlContent: '', renderMode: 'PARAGRAPH', panel: this , viewType: 'APPINDEXVIEW' }),
static_text1:new PanelRawitemModel({ name: 'static_text1', caption: '文本', isShowCaption: true, sysCss: '', itemType: 'RAWITEM', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'CENTER', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:0, flexParams:{align:'',dir:'',vAlign:''}, predefinedType: 'STATIC_TEXT', contentType: 'RAW', contentStyle: '', rawContent: '文本内容', htmlContent: '', renderMode: 'TEXT', panel: this , viewType: 'APPINDEXVIEW' }),
field_text_dynamic:new PanelFieldModel({ name: 'field_text_dynamic', caption: '文本(动态)', isShowCaption: false, sysCss: '', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'CENTER', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:0, flexParams:{align:'',dir:'',vAlign:''}, panel: this }),
field_switch:new PanelFieldModel({ name: 'field_switch', caption: '开关', isShowCaption: false, sysCss: '', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'CENTER', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:0, flexParams:{align:'',dir:'',vAlign:''}, panel: this }),
field_textbox:new PanelFieldModel({ name: 'field_textbox', caption: '文本框', isShowCaption: false, sysCss: '', itemType: 'FIELD', itemStyle: 'DEFAULT', visible: true, disabled: false, layout:'', layoutPos:'CENTER', layoutHeight:0, heightMode:'', layoutWidth:0, widthMode:'', spacingBottom:'', spacingLeft:'', spacingRight:'', spacingTop:'', hAlignSelf:'', vAlignSelf:'', flexGrow:0, flexParams:{align:'',dir:'',vAlign:''}, panel: this }),
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或