提交 4aa24310 编写于 作者: ibizdev's avatar ibizdev

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

上级 ac87fe6d
......@@ -128,7 +128,9 @@ import AppLoginNoteVerify from './components/layout-element/login/app-login-note
import AppRawItemImage from './components/layout-element/media/app-rawitem-image/app-rawitem-image.vue';
import AppRawItemCarousel from './components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.vue';
import AppRawItemVideo from './components/layout-element/media/app-rawitem-video/app-rawitem-video.vue';
import AppPresetQrCode from './components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.vue';
import AppPresetSwitch from './components/layout-element/interactive/app-preset-switch/app-preset-switch.vue';
import AppPresetTextInput from './components/layout-element/interactive/app-preset-text-input/app-preset-text-input.vue';
// 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister;
// 全局挂载实体权限服务注册中心
......@@ -271,5 +273,8 @@ export const AppComponents = {
v.component('app-rawitem-image', AppRawItemImage);
v.component('app-rawitem-carousel', AppRawItemCarousel);
v.component('app-rawitem-video', AppRawItemVideo);
v.component('app-preset-qr-code',AppPresetQrCode);
v.component('app-preset-switch',AppPresetSwitch);
v.component('app-preset-text-input',AppPresetTextInput);
},
};
\ No newline at end of file
<template>
<div :class="curClassName">
<div :class="curClassName" :style="curStyle">
<div v-if="containerModel.NORTH" :style="containerModel.NORTH.style"
class="no-style overflow-auto app-scroll-container__header">
<template v-for="name of containerModel.NORTH.name">
<div v-for="name of containerModel.NORTH.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</template>
</div>
</div>
<div class="app-scroll-container__middle" :style="middleContainerStyle">
<div v-if="containerModel.WEST" :style="containerModel.WEST.style"
class="no-style overflow-auto app-scroll-container__left">
<template v-for="name of containerModel.WEST.name">
<div v-for="name of containerModel.WEST.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</template>
</div>
</div>
<div v-if="containerModel.CENTER" :style="containerModel.CENTER.style"
class="no-style overflow-auto app-scroll-container__center">
<template v-for="name of containerModel.CENTER.name">
<div v-for="name of containerModel.CENTER.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</template>
</div>
</div>
<div v-if="containerModel.EAST" :style="containerModel.EAST.style"
class="no-style overflow-auto app-scroll-container__right">
<template v-for="name of containerModel.EAST.name">
<div v-for="name of containerModel.EAST.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</template>
</div>
</div>
</div>
<div v-if="containerModel.SOUTH" :style="containerModel.SOUTH.style"
class="no-style overflow-auto app-scroll-container__bottom">
<template v-for="name of containerModel.SOUTH.name">
<div v-for="name of containerModel.SOUTH.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</template>
</div>
</div>
</div>
</template>
......@@ -75,7 +75,24 @@ export default class AppScrollContainer extends Vue {
* 当前容器样式类
*/
get curClassName(){
return `app-scroll-container ${this.name}`;
const layoutModel = this.layoutModelDetails[this.name];
return `app-scroll-container ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getBoxSpacingStyle();
}
/**
* 获取项布局样式
*/
public getItemPosStyle(name:string){
const layoutModel = this.layoutModelDetails[name];
return layoutModel.getBorderLayoutStyle();
}
/**
......
......@@ -3,4 +3,8 @@
height: 100%;
display: flex;
border: 1px solid blue;
.simpleflex-item__pos{
height: 100%;
width: 100%;
}
}
\ No newline at end of file
<template>
<div :class="curClassName" :style="curStyleContent">
<div :class="curClassName" :style="curStyle">
<template v-if="containerModel.length > 0">
<template v-for="name of containerModel">
<div v-for="name of containerModel" class="simpleflex-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</template>
</div>
</template>
</div>
</template>
......@@ -63,38 +63,27 @@ export default class AppSimpleFlexContainer extends Vue {
* 当前容器样式类
*/
get curClassName() {
return `app-simpleflex-container ${this.name}`;
const layoutModel = this.layoutModelDetails[this.name];
return `app-simpleflex-container ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*/
get curStyleContent() {
let boxLayoutPosStyle = "";
const curLayoutModel = this.layoutModelDetails[this.name];
if (curLayoutModel) {
const { layout, flexGrow } = curLayoutModel;
// 识别FLEX占位属性
if (layout && layout == 'FLEX') {
boxLayoutPosStyle += `'flex-grow': ${flexGrow ? flexGrow : 0};`;
}
// 识别SIMPLEFLEX占位属性
if (layout == 'SIMPLEFLEX') {
if (flexGrow) {
boxLayoutPosStyle += `width: ${(100 / 12) * flexGrow}%;height: 100%;`;
} else {
// 简单FLEX布局自适应
boxLayoutPosStyle += `flex-grow:1;min-width:${(100 / 12)}%;height:100%;`;
}
}
// 识别边缘布局占位属性
if (layout == 'BORDER') {
boxLayoutPosStyle += `display:flex;`;
}
* 当前容器样式
*/
get curStyle() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getBoxSpacingStyle();
}
}
return boxLayoutPosStyle;
/**
* 获取项布局样式
*/
public getItemPosStyle(name: string) {
const layoutModel = this.layoutModelDetails[name];
return layoutModel.getCommonLayoutStyle();
}
}
</script>
<style lang='less'>
......
.app-preset-qr-code {
width: 100%;
height: 100%;
.ibiz-qr-code {
width: 100%;
height: 100%;
}
}
\ No newline at end of file
<template>
<div :class="className">
<template v-if="QRCodeConfig.url">
<ibiz-qr-code
:size="QRCodeConfig.size"
:url="QRCodeConfig.url"
:bgSrc="QRCodeConfig.bgSrc"
:margin="QRCodeConfig.margin"
:backgroundColor="QRCodeConfig.backgroundColor"
:logoSrc="QRCodeConfig.logoSrc"
:logoMargin="QRCodeConfig.logoMargin"
:logoBgColor="QRCodeConfig.logoBgColor"
:logoRadius="QRCodeConfig.logoRadius"
:whiteMargin="QRCodeConfig.whiteMargin"
class="ibiz-qr-code"
:callback="callback">
</ibiz-qr-code>
</template>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPresetQrCode extends Vue {
/**
* 内容 value数据格式:对象类型的JSON字符串,参数类型与QRCodeConfig一致:"{ "url": "http://www.baidu.com" }"
*
* @type {string}
* @memberof AppPresetQrCode
*/
@Prop() public value?: any;
/**
* 名称
*
* @type {string}
* @memberof AppPresetQrCode
*/
@Prop() public name!: string;
/**
* 类名
*
* @memberof AppPresetQrCode
*/
get className(): string {
return `app-preset-qr-code ${this.name}`;
}
/**
* ibiz-qr-code组件可传参数
* @param {number} size 二维码大小,包含边框
* @param {string} url 二维码内容
* @param {string} bgSrc 背景图片
* @param {number} margin 二维码外边距
* @param {string} backgroundColor 背景颜色
* @param {string} logoSrc 中央图标logo地址
* @param {number} logoMargin logo周围的空白边框
* @param {string} logoBgColor logo边框的背景色
* @param {number} logoRadius logo边框圆角半径
* @param {boolean} whiteMargin 背景图外是否设置白色边框
* @type {*}
* @memberof AppPresetQrCode
*/
public QRCodeConfig: {
size?: number,
url?: string,
bgSrc?: string,
margin?: number,
backgroundColor?: string,
logoSrc?: string,
logoMargin?: number,
logoBgColor?: string,
logoRadius?: number,
whiteMargin?: boolean,
} = {}
/**
* 二维码生成的回调函数
* @type {*}
* @memberof AppPresetQrCode
*/
public callback(event: any) {
// TODO
}
/**
* 获取二维码数据
*
* @memberof AppPresetQrCode
*/
public created() {
this.getQRCodeData();
}
/**
* 获取二维码绘制数据
*
* @type {*}
* @memberof AppPresetQrCode
*/
public getQRCodeData() {
if(this.value && typeof(this.value) == 'string') {
const value = JSON.parse(this.value);
const {
size,
url,
bgSrc,
margin,
backgroundColor,
logoSrc,
logoMargin,
logoBgColor,
logoRadius,
whiteMargin,
} = value;
this.QRCodeConfig = {
size,
url,
bgSrc,
margin,
backgroundColor,
logoSrc,
logoMargin,
logoBgColor,
logoRadius,
whiteMargin,
};
// TODO
}
}
}
</script>
<style lang='less'>
@import './app-preset-qrcode.less';
</style>
\ No newline at end of file
.app-preset-switch {
min-width: 40px;
height: 100%;
}
\ No newline at end of file
<template>
<el-switch :class="className" v-model="curValue" :disabled="disabled"></el-switch>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPresetSwitch extends Vue {
/**
* 开关值
*
* @type {*}
* @memberof AppPresetSwitch
*/
@Prop() public value!: any
/**
* 名称
*
* @type {*}
* @memberof AppPresetSwitch
*/
@Prop() public name!: string
/**
* 名称
*
* @type {*}
* @memberof AppPresetSwitch
*/
@Prop({default: false}) public disabled?: boolean
/**
* 类名
*
* @memberof AppPresetSwitch
*/
get className(): string {
return `app-preset-switch ${this.name}`;
}
/**
* 获取开关状态
*
* @type {*}
* @memberof AppPresetSwitch
*/
get curValue(): boolean {
return !!this.value;
}
/**
* 开关状态发生变化
*
* @type {*}
* @memberof AppPresetSwitch
*/
set curValue(value: boolean) {
this.$emit('valueChange', {name: this.name, value});
}
}
</script>
<style lang='less'>
@import './app-preset-switch.less';
</style>
\ No newline at end of file
.app-preset-text-input {
width: 100%;
height: 32px;
.el-input,
.el-input__inner {
width: 100%;
height: 32px;
}
}
\ No newline at end of file
<template>
<div :class="className">
<el-input v-model="curValue" :placeholder="placeholder"></el-input>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPresetTextInput extends Vue {
/**
* 输入值
*
* @type {*}
* @memberof AppPresetTextInput
*/
@Prop() public value!: any;
/**
* 名称
*
* @type {string}
* @memberof AppPresetTextInput
*/
@Prop() public name!: string;
/**
* 禁用
*
* @type {boolean}
* @memberof AppPresetTextInput
*/
@Prop() public disabled?: boolean;
/**
* 占位文本
*
* @type {string}
* @memberof AppPresetTextInput
*/
@Prop({default: ''}) public placeholder?: string;
/**
* 类名
*
* @memberof AppPresetSwitch
*/
get className(): string {
return `app-preset-text-input ${this.name}`;
}
/**
* 当前值
*
* @memberof AppPresetTextInput
*/
get curValue() {
return this.value;
}
/**
* 值变化
*
* @memberof AppPresetTextInput
*/
set curValue(val: any) {
this.$emit('valueChange', { name: this.name, value: val });
}
}
</script>
<style lang='less'>
@import './app-preset-text-input.less';
</style>
\ No newline at end of file
<template>
<div class="app-preset-caption">
<div :class="className">
<slot></slot>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class AppPresetCaption extends Vue {}
export default class AppPresetCaption extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppPresetCaption
*/
@Prop() public name!: string;
/**
* 类名
*
* @memberof AppPresetText
*/
get className(): string {
return `app-preset-caption ${this.name}`;
}
}
</script>
<style lang='less'>
......
.app-preset-text {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
\ No newline at end of file
<template>
<div :class="['app-preset-text', `app-preset-text--${contentType.toLowerCase()}`]">
<div :class="className">
<!-- 直接内容类型 -->
<template v-if="Object.is(contentType, 'RAW')">
<template v-if="Object.is(renderMode, 'TEXT')">
......@@ -58,6 +58,14 @@ export default class AppPresetText extends Vue {
*/
@Prop() public value!: any;
/**
* 名称
*
* @type {string}
* @memberof AppPresetText
*/
@Prop() public name!: string;
/**
* 内容类型
*
......@@ -98,11 +106,11 @@ export default class AppPresetText extends Vue {
@Prop() public imageClass?: string;
/**
* 动态图片路径
* 图片路径
*
* @memberof AppPresetText
*/
protected dynaImgUrl: string = '';
@Prop() public imgUrl?: string;
/**
* 样式
......@@ -110,16 +118,7 @@ export default class AppPresetText extends Vue {
* @memberof AppPresetText
*/
protected cssStyle: string = '';
/**
* 图片路径
*
* @memberof AppPresetText
*/
get imgUrl(): string {
return this.dynaImgUrl;
}
/**
* 内容
*
......@@ -142,6 +141,15 @@ export default class AppPresetText extends Vue {
return content;
}
/**
* 类名
*
* @memberof AppPresetText
*/
get className(): string {
return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.name}`;
}
/**
* Vue生命周期 --- Created
*
......@@ -149,7 +157,6 @@ export default class AppPresetText extends Vue {
*/
created() {
this.handleText();
this.handleDynaImg();
}
/**
......@@ -163,30 +170,6 @@ export default class AppPresetText extends Vue {
}
}
/**
* 处理动态图片
*
* @memberof AppPresetText
*/
protected handleDynaImg() {
// TODO 动态图片
// if (this.value && typeof this.value == 'string') {
// // 默认识别文件对象形式,识别失败则为全路径模式
// try {
// const _files = JSON.parse(this.value);
// const file = _files instanceof Array ? _files[0] : null;
// const url = file && file.id ? `${this.downloadUrl}/${file.id}` : '';
// ImgurlBase64.getInstance()
// .getImgURLOfBase64(url)
// .then((res: any) => {
// this.dynaImgUrl = res;
// });
// } catch (error) {
// this.dynaImgUrl = this.value;
// }
// }
}
}
</script>
<style lang="less">
......
<template>
<h1 class="app-preset-title">{{ curValue }}</h1>
<h1 :class="className">{{ curValue }}</h1>
</template>
<script lang="ts">
import { Environment } from "@/environments/environment";
import { Vue, Component } from 'vue-property-decorator';
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPresetTitle extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppPresetTitle
*/
@Prop() public name!: string;
/**
* 类名
*
* @memberof AppPresetTitle
*/
get className(): string {
return `app-preset-title ${this.name}`;
}
/**
* 当前值
......
......@@ -292,18 +292,33 @@ export class PanelDetailModel {
}
/**
* 获取布局样式(布局,包含约束内容布局的样式,包含内容的对齐方式)
* 获取通用布局样式(SAMPLEFLEX/FLEX)(布局,包含约束内容区布局的样式,包含内容区的对齐方式)
*
* @return {*}
* @memberof PanelDetailModel
*/
public getLayoutStyle() {
public getCommonLayoutStyle() {
const layoutStyle = {};
Object.assign(layoutStyle, this.getBoxSelfAlignStyle());
Object.assign(layoutStyle, this.getBoxLayOutStyle());
Object.assign(layoutStyle, this.getBoxSelfAlignStyle());
return layoutStyle;
}
/**
* 获取边缘布局样式
*
* @memberof PanelDetailModel
*/
public getBorderLayoutStyle() {
const borderLayoutStyle: any = { width: '100%', height: '100%' };
if (this.layoutHeight) {
Object.assign(borderLayoutStyle, Util.getBoxSize("HEIGHT", this.heightMode, this.layoutHeight));
}
// TODO 合入样式代码
return borderLayoutStyle;
}
/**
* 获取自身对齐模式(布局)
*
......
......@@ -57,6 +57,7 @@
<app-simpleflex-container name="container4" :layoutModelDetails="layoutModelDetails">
<template #static_label1>
<app-preset-text
name="static_label1"
predefinedType="STATIC_LABEL"
renderMode="PARAGRAPH"
contentType="RAW"
......@@ -78,6 +79,7 @@
<app-simpleflex-container name="container5" :layoutModelDetails="layoutModelDetails">
<template #static_label2>
<app-preset-text
name="static_label2"
predefinedType="STATIC_LABEL"
renderMode="PARAGRAPH"
contentType="RAW"
......@@ -97,6 +99,7 @@
<app-simpleflex-container name="container6" :layoutModelDetails="layoutModelDetails">
<template #static_label3>
<app-preset-text
name="static_label3"
predefinedType="STATIC_LABEL"
renderMode="PARAGRAPH"
contentType="RAW"
......@@ -113,6 +116,7 @@
<app-simpleflex-container name="container7" :layoutModelDetails="layoutModelDetails">
<template #static_label4>
<app-preset-text
name="static_label4"
predefinedType="STATIC_LABEL"
renderMode="PARAGRAPH"
contentType="RAW"
......@@ -130,6 +134,7 @@
<app-standard-container name="container8" :layoutModelDetails="layoutModelDetails">
<template #static_label5>
<app-preset-text
name="static_label5"
predefinedType="STATIC_LABEL"
renderMode="PARAGRAPH"
contentType="RAW"
......
......@@ -3,6 +3,7 @@
<template>
<div class="app-view-layout" style="height: '100%'; width: '100%';'display': 'flex'; 'flex-direction': 'column';">
<app-preset-text
name="static_label1"
predefinedType="STATIC_LABEL"
renderMode="PARAGRAPH"
contentType="RAW"
......@@ -19,6 +20,7 @@
</template>
<template #static_label2>
<app-preset-text
name="static_label2"
predefinedType="STATIC_LABEL"
renderMode="PARAGRAPH"
contentType="RAW"
......@@ -27,6 +29,7 @@
</template>
<template #static_text1>
<app-preset-text
name="static_text1"
predefinedType="STATIC_TEXT"
renderMode="TEXT"
contentType="RAW"
......@@ -34,6 +37,7 @@
contentStyle=""/>
</template>
<template #field_text_dynamic>
<app-preset-text name="field_text_dynamic" predefinedType="FIELD_TEXT_DYNAMIC"/>
</template>
<template #field_switch>
<span>属性项</span>
......
......@@ -16,16 +16,16 @@
<app-login-org />
</template>
<template #auth_loginbutton1>
<app-login-button class="app-login-login" type='primary' :caption="$t('components.login.name')" @itemClick="handleItemClick" />
<app-login-button class="app-login" :model="layoutModelDetails.auth_loginbutton1" type='primary' :model="layoutModelDetails." :caption="$t('components.login.name')" @itemClick="handleItemClick" />
</template>
<template #auth_registbutton1>
<span>按钮</span>
</template>
<template #auth_resetinput1>
<app-login-button class="app-login-reset" type='success' :caption="$t('components.login.reset')" @itemClick="handleItemClick" />
<app-login-button class="app-reset" :model="layoutModelDetails.auth_resetinput1" type='success' :model="layoutModelDetails." :caption="$t('components.login.reset')" @itemClick="handleItemClick" />
</template>
<template #auth_logout1>
<app-login-button class="app-login-logout" :caption="$t('components.login.logout')" @itemClick="handleItemClick" />
<app-login-button class="app-logout" :model="layoutModelDetails.auth_logout1" :caption="$t('components.login.logout')" @itemClick="handleItemClick" />
</template>
<template #auth_captcha1>
<app-login-captcha />
......
......@@ -663,7 +663,7 @@ export default class DefaultBase extends Vue implements ControlInterface {
*/
public load(opt: any = {}): void {
if(!this.loadAction){
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKUsr9GridView' + (this.$t('app.searchForm.notConfig.loadAction') as string) });
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKGroupByCodelistListView' + (this.$t('app.searchForm.notConfig.loadAction') as string) });
return;
}
const arg: any = { ...opt };
......@@ -699,7 +699,7 @@ export default class DefaultBase extends Vue implements ControlInterface {
*/
public loadDraft(opt: any = {},mode?:string): void {
if(!this.loaddraftAction){
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKUsr9GridView' + (this.$t('app.searchForm.notConfig.loaddraftAction') as string) });
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKGroupByCodelistListView' + (this.$t('app.searchForm.notConfig.loaddraftAction') as string) });
return;
}
const arg: any = { ...opt } ;
......
......@@ -621,7 +621,7 @@ export default class QUICKSEARCHFORMBase extends Vue implements ControlInterface
*/
public load(opt: any = {}): void {
if(!this.loadAction){
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKCalendarView' + (this.$t('app.searchForm.notConfig.loadAction') as string) });
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKListView' + (this.$t('app.searchForm.notConfig.loadAction') as string) });
return;
}
const arg: any = { ...opt };
......@@ -657,7 +657,7 @@ export default class QUICKSEARCHFORMBase extends Vue implements ControlInterface
*/
public loadDraft(opt: any = {},mode?:string): void {
if(!this.loaddraftAction){
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKCalendarView' + (this.$t('app.searchForm.notConfig.loaddraftAction') as string) });
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: 'IBIZBOOKListView' + (this.$t('app.searchForm.notConfig.loaddraftAction') as string) });
return;
}
const arg: any = { ...opt } ;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册