Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 32a9de83 编写于 作者: tony001's avatar tony001
浏览文件
操作

update：更新

上级 b5e06fb8
显示空白字符变更
内嵌 并排
正在显示 包含 1655 行增加 和 1055 行删除
src/app-register.ts
浏览文件 @ 32a9de83
...@@ -109,12 +109,12 @@ import AppInputIp from './components/app-input-ip/app-input-ip.vue'; ...@@ -109,12 +109,12 @@ import AppInputIp from './components/app-input-ip/app-input-ip.vue';
import Loadding from './directive/loadding/loadding'; import Loadding from './directive/loadding/loadding';
import AppColorSpan from './components/app-color-span/app-color-span.vue'; import AppColorSpan from './components/app-color-span/app-color-span.vue';
import AppColorPicker from './components/app-color-picker/app-color-picker.vue'; import AppColorPicker from './components/app-color-picker/app-color-picker.vue';
import AppScrollContainer from './components/layout-element/container/app-scroll-container/app-scroll-container.vue'; import AppScrollContainer from './components/layout-element/structure/app-scroll-container/app-scroll-container.vue';
import AppSimpleFlexContainer from './components/layout-element/container/app-simpleflex-container/app-simpleflex-container.vue'; import AppSimpleFlexContainer from './components/layout-element/structure/app-simpleflex-container/app-simpleflex-container.vue';
import AppStandardContainer from './components/layout-element/container/app-standard-container/app-standard-container.vue'; import AppStandardContainer from './components/layout-element/structure/app-standard-container/app-standard-container.vue';
import AppTabPanel from './components/layout-element/container/app-tab-panel/app-tab-panel.vue'; import AppTabPanel from './components/layout-element/structure/app-tab-panel/app-tab-panel.vue';
import AppTabPage from './components/layout-element/container/app-tab-page/app-tab-page.vue'; import AppTabPage from './components/layout-element/structure/app-tab-page/app-tab-page.vue';
import AppNavPos from './components/layout-element/container/app-nav-pos/app-nav-pos.vue'; import AppNavPos from './components/layout-element/structure/app-nav-pos/app-nav-pos.vue';
import AppPresetText from './components/layout-element/text/app-preset-text/app-preset-text.vue'; import AppPresetText from './components/layout-element/text/app-preset-text/app-preset-text.vue';
import AppPresetCaption from './components/layout-element/text/app-preset-caption/app-preset-caption.vue'; import AppPresetCaption from './components/layout-element/text/app-preset-caption/app-preset-caption.vue';
import AppPresetTitle from './components/layout-element/text/app-preset-title/app-preset-title.vue'; import AppPresetTitle from './components/layout-element/text/app-preset-title/app-preset-title.vue';
...@@ -135,7 +135,7 @@ import AppIndexNavTabs from './components/layout-element/index/app-index-nav-tab ...@@ -135,7 +135,7 @@ import AppIndexNavTabs from './components/layout-element/index/app-index-nav-tab
import AppIndexNavBreadcrumb from './components/layout-element/index/app-index-nav-breadcrumb/app-index-nav-breadcrumb.vue'; import AppIndexNavBreadcrumb from './components/layout-element/index/app-index-nav-breadcrumb/app-index-nav-breadcrumb.vue';
import AppIndexOrgSelect from './components/layout-element/index/app-index-org-select/app-index-org-select.vue'; import AppIndexOrgSelect from './components/layout-element/index/app-index-org-select/app-index-org-select.vue';
import AppIndexUserInfo from './components/layout-element/index/app-index-user-info/app-index-user-info.vue'; import AppIndexUserInfo from './components/layout-element/index/app-index-user-info/app-index-user-info.vue';
import AppCtrlPos from './components/layout-element/control/app-ctrl-pos/app-ctrl-pos.vue'; import AppCtrlPos from './components/layout-element/structure/app-ctrl-pos/app-ctrl-pos.vue';
import AppPresetButton from './components/layout-element/interactive/app-preset-button/app-preset-button.vue'; import AppPresetButton from './components/layout-element/interactive/app-preset-button/app-preset-button.vue';
import AppFieldImageDynamic from './components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue'; import AppFieldImageDynamic from './components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue';
// 全局挂载UI实体服务注册中心 // 全局挂载UI实体服务注册中心
......
src/components/layout-element/index/app-index-nav-breadcrumb/app-index-nav-breadcrumb.vue
浏览文件 @ 32a9de83
...@@ -39,49 +39,49 @@ export default class AppIndexNavBreadcrumb extends Vue { ...@@ -39,49 +39,49 @@ export default class AppIndexNavBreadcrumb extends Vue {
* @type {string} * @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base * @memberof ${srfclassname('${ctrl.codeName}')}Base
*/ */
@Inject({ from:'navModel', default: 'tab' }) @Inject({ from: 'navModel', default: 'tab' })
public navModel!: string; public navModel!: string;
/** /**
* 当前布局模型 * 下标
* *
* @type {*} * @type {number}
* @memberof AppIndexNavBreadcrumb * @memberof AppIndexNavBreadcrumb
*/ */
public currentLayoutModel: any; @Prop({ default: 0 }) public index?: number;
/** /**
* 当前容器类名 * 项名称
* *
* @type {*}
* @memberof AppIndexNavBreadcrumb * @memberof AppIndexNavBreadcrumb
*/ */
get curClassName() { get itemName() {
return { return this.index ? `${this.name}_${this.index}` : this.name;
'app-index-nav-breadcrumb': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
} }
/** /**
* 当前容器样式 * 当前容器类名
* *
* @memberof AppIndexNavBreadcrumb * @memberof AppIndexNavBreadcrumb
*/ */
get curStyle() { get curClassName() {
if (this.currentLayoutModel) { const layoutModel = this.layoutModelDetails[this.itemName];
return this.currentLayoutModel.getElementStyle(); if (layoutModel) {
return `app-index-nav-breadcrumb ${this.itemName} ${layoutModel.sysCss}`;
} }
return '';
} }
/** /**
* Vue生命周期 --- created * 当前容器样式
* *
* @memberof AppIndexNavBreadcrumb * @memberof AppIndexNavBreadcrumb
*/ */
created() { get curStyle() {
this.currentLayoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle();
}
} }
} }
......
src/components/layout-element/index/app-index-nav-tabs/app-index-nav-tabs.vue
浏览文件 @ 32a9de83
...@@ -26,45 +26,45 @@ export default class AppIndexNavTabs extends Vue { ...@@ -26,45 +26,45 @@ export default class AppIndexNavTabs extends Vue {
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/** /**
* 当前布局模型 * 下标
* *
* @type {*} * @type {number}
* @memberof AppIndexNavTabs * @memberof AppIndexNavTabs
*/ */
public currentLayoutModel: any; @Prop({ default: 0 }) public index?: number;
/** /**
* 当前容器类名 * 项名称
* *
* @type {*}
* @memberof AppIndexNavTabs * @memberof AppIndexNavTabs
*/ */
get curClassName() { get itemName() {
return { return this.index ? `${this.name}_${this.index}` : this.name;
'app-index-nav-tabs': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
} }
/** /**
* 当前容器样式 * 当前容器类名
* *
* @memberof AppIndexNavTabs * @memberof AppIndexNavTabs
*/ */
get curStyle() { get curClassName() {
if (this.currentLayoutModel) { const layoutModel = this.layoutModelDetails[this.itemName];
return this.currentLayoutModel.getElementStyle(); if (layoutModel) {
return `app-index-nav-tabs ${this.itemName} ${layoutModel.sysCss}`;
} }
return '';
} }
/** /**
* Vue生命周期 --- created * 当前容器样式
* *
* @memberof AppIndexNavTabs * @memberof AppIndexNavTabs
*/ */
created() { get curStyle() {
this.currentLayoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle();
}
} }
} }
......
src/components/layout-element/index/app-index-org-select/app-index-org-select.vue
浏览文件 @ 32a9de83
...@@ -26,45 +26,45 @@ export default class AppIndexOrgSelect extends Vue { ...@@ -26,45 +26,45 @@ export default class AppIndexOrgSelect extends Vue {
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/** /**
* 当前布局模型 * 下标
* *
* @type {*} * @type {number}
* @memberof AppIndexOrgSelect * @memberof AppIndexOrgSelect
*/ */
public currentLayoutModel: any; @Prop({ default: 0 }) public index?: number;
/** /**
* 当前容器类名 * 项名称
* *
* @type {*}
* @memberof AppIndexOrgSelect * @memberof AppIndexOrgSelect
*/ */
get curClassName() { get itemName() {
return { return this.index ? `${this.name}_${this.index}` : this.name;
'app-index-org-select': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
} }
/** /**
* 当前容器样式 * 当前容器类名
* *
* @memberof AppIndexOrgSelect * @memberof AppIndexOrgSelect
*/ */
get curStyle() { get curClassName() {
if (this.currentLayoutModel) { const layoutModel = this.layoutModelDetails[this.itemName];
return this.currentLayoutModel.getElementStyle(); if (layoutModel) {
return `app-index-org-select ${this.itemName} ${layoutModel.sysCss}`;
} }
return '';
} }
/** /**
* Vue生命周期 --- created * 当前容器样式
* *
* @memberof AppIndexOrgSelect * @memberof AppIndexOrgSelect
*/ */
created() { get curStyle() {
this.currentLayoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle();
}
} }
} }
......
src/components/layout-element/index/app-index-user-info/app-index-user-info.vue
浏览文件 @ 32a9de83
...@@ -26,45 +26,45 @@ export default class AppIndexUserInfo extends Vue { ...@@ -26,45 +26,45 @@ export default class AppIndexUserInfo extends Vue {
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/** /**
* 当前布局模型 * 下标
* *
* @type {*} * @type {number}
* @memberof AppIndexUserInfo * @memberof AppIndexUserInfo
*/ */
public currentLayoutModel: any; @Prop({ default: 0 }) public index?: number;
/** /**
* 当前容器类名 * 项名称
* *
* @type {*}
* @memberof AppIndexUserInfo * @memberof AppIndexUserInfo
*/ */
get curClassName() { get itemName() {
return { return this.index ? `${this.name}_${this.index}` : this.name;
'app-index-user-info': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
} }
/** /**
* 当前容器样式 * 当前容器类名
* *
* @memberof AppIndexUserInfo * @memberof AppIndexUserInfo
*/ */
get curStyle() { get curClassName() {
if (this.currentLayoutModel) { const layoutModel = this.layoutModelDetails[this.itemName];
return this.currentLayoutModel.getElementStyle(); if (layoutModel) {
return `app-index-user-info ${this.itemName} ${layoutModel.sysCss}`;
} }
return '';
} }
/** /**
* Vue生命周期 --- created * 当前容器样式
* *
* @memberof AppIndexUserInfo * @memberof AppIndexUserInfo
*/ */
created() { get curStyle() {
this.currentLayoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle();
}
} }
} }
......
src/components/layout-element/interactive/app-preset-button/app-preset-button.vue
浏览文件 @ 32a9de83
<template> <template>
<div :class="curClassName" :style="curStyle"> <div :class="curClassName" :style="curStyle">
<i-button <i-button :type="buttonType" :disabled="disabled" :title="tooltip" :loading="loading" :ghost="buttonGhost"
:type="buttonType"
:disabled="disabled"
:title="tooltip"
:loading="loading"
:ghost="buttonGhost"
@click="handleClick"> @click="handleClick">
<div :class="['button-content', iconAlign.toLowerCase()]"> <div :class="['button-content', iconAlign.toLowerCase()]">
<span v-if="cssClass || imagePath" class="icon"> <span v-if="cssClass || imagePath" class="icon">
...@@ -60,24 +55,46 @@ export default class AppPresetButton extends Vue { ...@@ -60,24 +55,46 @@ export default class AppPresetButton extends Vue {
*/ */
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/**
* 下标
*
* @type {number}
* @memberof AppPresetButton
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppPresetButton
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 显示标题 * 显示标题
* *
* @memberof AppPresetButton * @memberof AppPresetButton
*/ */
get showCaption() { get showCaption() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.isShowCaption; return layoutModel.isShowCaption;
} }
}
/** /**
* 类名 * 类名
* *
* @memberof AppPresetButton * @memberof AppPresetButton
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-preset-button ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-preset-button ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
...@@ -86,7 +103,8 @@ export default class AppPresetButton extends Vue { ...@@ -86,7 +103,8 @@ export default class AppPresetButton extends Vue {
* @memberof AppPresetButton * @memberof AppPresetButton
*/ */
get imagePath() { get imagePath() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
let imagePath = ''; let imagePath = '';
if (layoutModel.sysImage) { if (layoutModel.sysImage) {
imagePath = layoutModel.sysImage.imagePath; imagePath = layoutModel.sysImage.imagePath;
...@@ -95,6 +113,7 @@ export default class AppPresetButton extends Vue { ...@@ -95,6 +113,7 @@ export default class AppPresetButton extends Vue {
} }
return imagePath; return imagePath;
} }
}
/** /**
* 图标 * 图标
...@@ -102,7 +121,8 @@ export default class AppPresetButton extends Vue { ...@@ -102,7 +121,8 @@ export default class AppPresetButton extends Vue {
* @memberof AppPresetButton * @memberof AppPresetButton
*/ */
get cssClass() { get cssClass() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
let cssClass = ''; let cssClass = '';
if (layoutModel.sysImage) { if (layoutModel.sysImage) {
cssClass = layoutModel.sysImage.iconcls; cssClass = layoutModel.sysImage.iconcls;
...@@ -111,26 +131,31 @@ export default class AppPresetButton extends Vue { ...@@ -111,26 +131,31 @@ export default class AppPresetButton extends Vue {
} }
return cssClass; return cssClass;
} }
}
/** /**
* 当前容器样式 * 当前容器样式
* *
* @memberof AppPresetButton * @memberof AppPresetButton
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 禁用 * 禁用
* *
* @memberof AppPresetButton * @memberof AppPresetButton
*/ */
get disabled(){ get disabled() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.disabled; return layoutModel.disabled;
} }
}
/** /**
* 按钮类型 * 按钮类型
...@@ -138,7 +163,8 @@ export default class AppPresetButton extends Vue { ...@@ -138,7 +163,8 @@ export default class AppPresetButton extends Vue {
* @memberof AppPresetButton * @memberof AppPresetButton
*/ */
get buttonType() { get buttonType() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
if (Object.is(layoutModel.renderMode, 'LINK')) { if (Object.is(layoutModel.renderMode, 'LINK')) {
return 'text'; return 'text';
} else { } else {
...@@ -158,6 +184,7 @@ export default class AppPresetButton extends Vue { ...@@ -158,6 +184,7 @@ export default class AppPresetButton extends Vue {
} }
} }
} }
}
/** /**
* 图标方向 * 图标方向
...@@ -165,9 +192,11 @@ export default class AppPresetButton extends Vue { ...@@ -165,9 +192,11 @@ export default class AppPresetButton extends Vue {
* @memberof AppPresetButton * @memberof AppPresetButton
*/ */
get iconAlign() { get iconAlign() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if(layoutModel){
return layoutModel.iconAlign || 'LEFT'; return layoutModel.iconAlign || 'LEFT';
} }
}
/** /**
* 按钮幽灵属性，使按钮背景透明 * 按钮幽灵属性，使按钮背景透明
...@@ -175,9 +204,11 @@ export default class AppPresetButton extends Vue { ...@@ -175,9 +204,11 @@ export default class AppPresetButton extends Vue {
* @memberof AppPresetButton * @memberof AppPresetButton
*/ */
get buttonGhost() { get buttonGhost() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if(layoutModel){
return Object.is(layoutModel.buttonStyle, 'INVERSE'); return Object.is(layoutModel.buttonStyle, 'INVERSE');
} }
}
/** /**
* 点击按钮 * 点击按钮
...@@ -186,7 +217,7 @@ export default class AppPresetButton extends Vue { ...@@ -186,7 +217,7 @@ export default class AppPresetButton extends Vue {
* @memberof AppPresetButton * @memberof AppPresetButton
*/ */
public handleClick(event: any) { public handleClick(event: any) {
this.$emit('itemClick', this.name); this.$emit('itemClick', this.itemName);
} }
} }
</script> </script>
......
src/components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.vue
浏览文件 @ 32a9de83
<template> <template>
<div :class="curClassName" :style="curStyle"> <div :class="curClassName" :style="curStyle">
<template v-if="QRCodeConfig.url"> <template v-if="QRCodeConfig.url">
<ibiz-qr-code <ibiz-qr-code :size="QRCodeConfig.size" :url="QRCodeConfig.url" :bgSrc="QRCodeConfig.bgSrc"
:size="QRCodeConfig.size" :margin="QRCodeConfig.margin" :backgroundColor="QRCodeConfig.backgroundColor"
:url="QRCodeConfig.url" :logoSrc="QRCodeConfig.logoSrc" :logoMargin="QRCodeConfig.logoMargin"
:bgSrc="QRCodeConfig.bgSrc" :logoBgColor="QRCodeConfig.logoBgColor" :logoRadius="QRCodeConfig.logoRadius"
:margin="QRCodeConfig.margin" :whiteMargin="QRCodeConfig.whiteMargin" class="ibiz-qr-code" :callback="callback">
: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> </ibiz-qr-code>
</template> </template>
</div> </div>
...@@ -48,14 +40,34 @@ export default class AppPresetQrCode extends Vue { ...@@ -48,14 +40,34 @@ export default class AppPresetQrCode extends Vue {
*/ */
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/**
* 下标
*
* @type {number}
* @memberof AppPresetQrCode
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppPresetQrCode
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 类名 * 类名
* *
* @memberof AppPresetQrCode * @memberof AppPresetQrCode
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-preset-qrcode ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-preset-qrcode ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
...@@ -63,10 +75,12 @@ export default class AppPresetQrCode extends Vue { ...@@ -63,10 +75,12 @@ export default class AppPresetQrCode extends Vue {
* *
* @memberof AppPresetQrCode * @memberof AppPresetQrCode
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* ibiz-qr-code组件可传参数 * ibiz-qr-code组件可传参数
...@@ -121,7 +135,7 @@ export default class AppPresetQrCode extends Vue { ...@@ -121,7 +135,7 @@ export default class AppPresetQrCode extends Vue {
* @memberof AppPresetQrCode * @memberof AppPresetQrCode
*/ */
public getQRCodeData() { public getQRCodeData() {
if(this.value && typeof(this.value) == 'string') { if (this.value && typeof (this.value) == 'string') {
const value = JSON.parse(this.value); const value = JSON.parse(this.value);
const { const {
size, size,
......
src/components/layout-element/interactive/app-preset-switch/app-preset-switch.vue
浏览文件 @ 32a9de83
...@@ -31,14 +31,34 @@ export default class AppPresetSwitch extends Vue { ...@@ -31,14 +31,34 @@ export default class AppPresetSwitch extends Vue {
*/ */
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/**
* 下标
*
* @type {number}
* @memberof AppPresetSwitch
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppPresetSwitch
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 类名 * 类名
* *
* @memberof AppPresetSwitch * @memberof AppPresetSwitch
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-preset-switch ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-preset-switch ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
...@@ -46,20 +66,24 @@ export default class AppPresetSwitch extends Vue { ...@@ -46,20 +66,24 @@ export default class AppPresetSwitch extends Vue {
* *
* @memberof AppPresetSwitch * @memberof AppPresetSwitch
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if(layoutModel){
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 禁用 * 禁用
* *
* @memberof AppPresetSwitch * @memberof AppPresetSwitch
*/ */
get disabled(){ get disabled() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if(layoutModel){
return layoutModel.disabled; return layoutModel.disabled;
} }
}
/** /**
* 获取开关状态 * 获取开关状态
...@@ -78,7 +102,7 @@ export default class AppPresetSwitch extends Vue { ...@@ -78,7 +102,7 @@ export default class AppPresetSwitch extends Vue {
* @memberof AppPresetSwitch * @memberof AppPresetSwitch
*/ */
set curValue(value: boolean) { set curValue(value: boolean) {
this.$emit('valueChange', {name: this.name, value}); this.$emit('valueChange', { name: this.itemName, value });
} }
} }
</script> </script>
......
src/components/layout-element/interactive/app-preset-text-input/app-preset-text-input.vue
浏览文件 @ 32a9de83
...@@ -29,18 +29,38 @@ export default class AppPresetTextInput extends Vue { ...@@ -29,18 +29,38 @@ export default class AppPresetTextInput extends Vue {
* 布局模型详情 * 布局模型详情
* *
* @type {*} * @type {*}
* @memberof AppPresetSwitch * @memberof AppPresetTextInput
*/ */
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/**
* 下标
*
* @type {number}
* @memberof AppPresetTextInput
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppPresetTextInput
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 类名 * 类名
* *
* @memberof AppPresetSwitch * @memberof AppPresetSwitch
*/ */
get curClassName() { get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-preset-text-input ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-preset-text-input ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
...@@ -49,9 +69,11 @@ export default class AppPresetTextInput extends Vue { ...@@ -49,9 +69,11 @@ export default class AppPresetTextInput extends Vue {
* @memberof AppPresetSwitch * @memberof AppPresetSwitch
*/ */
get disabled() { get disabled() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.disabled; return layoutModel.disabled;
} }
}
/** /**
* 当前容器样式 * 当前容器样式
...@@ -59,9 +81,11 @@ export default class AppPresetTextInput extends Vue { ...@@ -59,9 +81,11 @@ export default class AppPresetTextInput extends Vue {
* @memberof AppPresetSwitch * @memberof AppPresetSwitch
*/ */
get curStyle() { get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 占位提示 * 占位提示
...@@ -69,19 +93,13 @@ export default class AppPresetTextInput extends Vue { ...@@ -69,19 +93,13 @@ export default class AppPresetTextInput extends Vue {
* @memberof AppPresetSwitch * @memberof AppPresetSwitch
*/ */
get placeholder() { get placeholder() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.placeholder || ''; return layoutModel.placeholder || '';
} }
/**
* 类名
*
* @memberof AppPresetSwitch
*/
get className(): string {
return `app-preset-text-input ${this.name}`;
} }
/** /**
* 当前值 * 当前值
* *
...@@ -97,7 +115,7 @@ export default class AppPresetTextInput extends Vue { ...@@ -97,7 +115,7 @@ export default class AppPresetTextInput extends Vue {
* @memberof AppPresetTextInput * @memberof AppPresetTextInput
*/ */
set curValue(val: any) { set curValue(val: any) {
this.$emit('valueChange', { name: this.name, value: val }); this.$emit('valueChange', { name: this.itemName, value: val });
} }
} }
</script> </script>
......
src/components/layout-element/login/app-login-button/app-login-button.vue
浏览文件 @ 32a9de83
<template> <template>
<div :class="curClassName" :style="curStyle"> <div :class="curClassName" :style="curStyle">
<i-button <i-button @click="handleClick" :disabled="disabled" :title="curTooltip" :type="buttonType">
@click="handleClick"
:disabled="disabled"
:title="curTooltip"
:type="buttonType">
<div :class="['button-content', iconAlign.toLowerCase()]"> <div :class="['button-content', iconAlign.toLowerCase()]">
<span v-if="cssClass || imagePath" class="icon"> <span v-if="cssClass || imagePath" class="icon">
<i v-if="cssClass" :class="cssClass" /> <i v-if="cssClass" :class="cssClass" />
...@@ -53,15 +49,35 @@ export default class AppLoginButton extends Vue { ...@@ -53,15 +49,35 @@ export default class AppLoginButton extends Vue {
*/ */
@Prop({ default: false }) public loading?: boolean; @Prop({ default: false }) public loading?: boolean;
/**
* 下标
*
* @type {number}
* @memberof AppLoginButton
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppLoginButton
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 标题 * 标题
* *
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
get curCaption() { get curCaption() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.caption; return layoutModel.caption;
} }
}
/** /**
* 提示信息 * 提示信息
...@@ -69,9 +85,11 @@ export default class AppLoginButton extends Vue { ...@@ -69,9 +85,11 @@ export default class AppLoginButton extends Vue {
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
get curTooltip() { get curTooltip() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.tooltip; return layoutModel.tooltip;
} }
}
/** /**
* 显示标题 * 显示标题
...@@ -79,18 +97,20 @@ export default class AppLoginButton extends Vue { ...@@ -79,18 +97,20 @@ export default class AppLoginButton extends Vue {
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
get showCaption() { get showCaption() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.isShowCaption; return layoutModel.isShowCaption;
} }
}
/** /**
* 当前按钮类型 * 当前按钮类型
* *
* @type {string}
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
get buttonType(): string { get buttonType() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
if (layoutModel.renderMode == 'LINK') { if (layoutModel.renderMode == 'LINK') {
return 'text'; return 'text';
} else if (layoutModel.buttonStyle != "DEFAULT" && this.defaultStyle) { } else if (layoutModel.buttonStyle != "DEFAULT" && this.defaultStyle) {
...@@ -112,35 +132,42 @@ export default class AppLoginButton extends Vue { ...@@ -112,35 +132,42 @@ export default class AppLoginButton extends Vue {
} }
} }
} }
}
/** /**
* 当前容器样式 * 当前容器样式
* *
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 禁用 * 禁用
* *
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
get disabled(){ get disabled() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.disabled; return layoutModel.disabled;
} }
}
/** /**
* 类名 * 类名
* *
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-login-button ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-login-button ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
...@@ -149,7 +176,8 @@ export default class AppLoginButton extends Vue { ...@@ -149,7 +176,8 @@ export default class AppLoginButton extends Vue {
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
get imagePath() { get imagePath() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
let imagePath = ''; let imagePath = '';
if (layoutModel.sysImage) { if (layoutModel.sysImage) {
imagePath = layoutModel.sysImage.imagePath; imagePath = layoutModel.sysImage.imagePath;
...@@ -158,6 +186,7 @@ export default class AppLoginButton extends Vue { ...@@ -158,6 +186,7 @@ export default class AppLoginButton extends Vue {
} }
return imagePath; return imagePath;
} }
}
/** /**
* 图标 * 图标
...@@ -165,7 +194,8 @@ export default class AppLoginButton extends Vue { ...@@ -165,7 +194,8 @@ export default class AppLoginButton extends Vue {
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
get cssClass() { get cssClass() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
let cssClass = ''; let cssClass = '';
if (layoutModel.sysImage) { if (layoutModel.sysImage) {
cssClass = layoutModel.sysImage.iconcls; cssClass = layoutModel.sysImage.iconcls;
...@@ -174,6 +204,7 @@ export default class AppLoginButton extends Vue { ...@@ -174,6 +204,7 @@ export default class AppLoginButton extends Vue {
} }
return cssClass; return cssClass;
} }
}
/** /**
* 图标方向 * 图标方向
...@@ -181,9 +212,11 @@ export default class AppLoginButton extends Vue { ...@@ -181,9 +212,11 @@ export default class AppLoginButton extends Vue {
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
get iconAlign() { get iconAlign() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.iconAlign || 'LEFT'; return layoutModel.iconAlign || 'LEFT';
} }
}
/** /**
* 按钮幽灵属性，使按钮背景透明 * 按钮幽灵属性，使按钮背景透明
...@@ -191,9 +224,11 @@ export default class AppLoginButton extends Vue { ...@@ -191,9 +224,11 @@ export default class AppLoginButton extends Vue {
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
get buttonGhost() { get buttonGhost() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return Object.is(layoutModel.buttonStyle, 'INVERSE'); return Object.is(layoutModel.buttonStyle, 'INVERSE');
} }
}
/** /**
* 处理点击 * 处理点击
...@@ -202,7 +237,7 @@ export default class AppLoginButton extends Vue { ...@@ -202,7 +237,7 @@ export default class AppLoginButton extends Vue {
* @memberof AppLoginButton * @memberof AppLoginButton
*/ */
public handleClick() { public handleClick() {
this.$emit("itemClick", this.name); this.$emit("itemClick", this.itemName);
} }
} }
......
src/components/layout-element/login/app-login-captcha/app-login-captcha.vue
浏览文件 @ 32a9de83
...@@ -39,35 +39,61 @@ export default class AppLoginCaptcha extends Vue { ...@@ -39,35 +39,61 @@ export default class AppLoginCaptcha extends Vue {
@Prop() public name!: string; @Prop() public name!: string;
/** /**
* 当前容器样式 * 下标
* *
* @type {number}
* @memberof AppLoginCaptcha * @memberof AppLoginCaptcha
*/ */
get curStyle(){ @Prop({ default: 0 }) public index?: number;
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/** /**
* 类名 * 是否显示
*/
public show: boolean = false;
/**
* 按钮类型
*/
public type: string = 'default';
/**
* 项名称
* *
* @type {*}
* @memberof AppLoginCaptcha * @memberof AppLoginCaptcha
*/ */
get curClassName(){ get itemName() {
const layoutModel = this.layoutModelDetails[this.name]; return this.index ? `${this.name}_${this.index}` : this.name;
return `app-login-captcha ${this.name} ${layoutModel.sysCss}`;
} }
/** /**
* 是否显示 * 当前容器样式
*
* @memberof AppLoginCaptcha
*/ */
public show: boolean = false; get curStyle() {
const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle();
}
}
/** /**
* 按钮类型 * 类名
*
* @memberof AppLoginCaptcha
*/ */
public type: string = 'default'; get curClassName() {
const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return `app-login-captcha ${this.itemName} ${layoutModel.sysCss}`;
}
}
/**
* 初始化
*/
public created() { public created() {
if (this.value) { if (this.value) {
this.type = 'success'; this.type = 'success';
...@@ -87,14 +113,14 @@ export default class AppLoginCaptcha extends Vue { ...@@ -87,14 +113,14 @@ export default class AppLoginCaptcha extends Vue {
public onSuccess() { public onSuccess() {
this.show = false; this.show = false;
this.type = 'success'; this.type = 'success';
this.$emit("valueChange", { name: this.name, value: true}); this.$emit("valueChange", { name: this.itemName, value: true });
} }
/** /**
* 失败 * 失败
*/ */
public onFail() { public onFail() {
this.$emit("valueChange", { name: this.name, value: false}); this.$emit("valueChange", { name: this.itemName, value: false });
} }
} }
</script> </script>
...@@ -103,9 +129,11 @@ export default class AppLoginCaptcha extends Vue { ...@@ -103,9 +129,11 @@ export default class AppLoginCaptcha extends Vue {
.app-login-captcha { .app-login-captcha {
height: 40px; height: 40px;
width: 100%; width: 100%;
.ivu-btn { .ivu-btn {
width: 100%; width: 100%;
height: 100%; height: 100%;
&:hover { &:hover {
border: 1px solid #dcdee2; border: 1px solid #dcdee2;
color: #515a6e; color: #515a6e;
......
src/components/layout-element/login/app-login-input/app-login-input.vue
浏览文件 @ 32a9de83
<template> <template>
<div :class="curClassName" :style="curStyle"> <div :class="curClassName" :style="curStyle">
<i-input <i-input size='large' :prefix='defaultIcon' v-model="curValue" :type="defaultType" :disabled="disabled"
size='large' :readonly="readonly" :placeholder="curCaption">
:prefix='defaultIcon'
v-model="curValue"
:type="defaultType"
:disabled="disabled"
:readonly="readonly"
:placeholder="curCaption">
</i-input> </i-input>
</div> </div>
</template> </template>
...@@ -59,73 +53,101 @@ export default class AppLoginInput extends Vue { ...@@ -59,73 +53,101 @@ export default class AppLoginInput extends Vue {
*/ */
@Prop() public defaultType?: string; @Prop() public defaultType?: string;
/**
* 下标
*
* @type {number}
* @memberof AppLoginInput
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppLoginInput
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 标题 * 标题
* *
* @memberof AppLoginInput * @memberof AppLoginInput
*/ */
get curCaption() { get curCaption() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.caption; return layoutModel.caption;
} }
}
/** /**
* 当前容器样式 * 当前容器样式
* *
* @memberof AppLoginInput * @memberof AppLoginInput
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 类名 * 类名
* *
* @memberof AppLoginInput * @memberof AppLoginInput
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-login-input ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-login-input ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
* 当前值 * 禁用
* *
* @type {any}
* @memberof AppLoginInput * @memberof AppLoginInput
*/ */
get curValue() { get disabled() {
return this.value; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.disabled;
}
} }
/** /**
* 值变化 * 只读
* *
* @memberof AppPresetTextInput * @memberof AppLoginInput
*/ */
set curValue(val: any) { get readonly() {
this.$emit('valueChange', { name: this.name, value: val }); const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.readonly;
}
} }
/** /**
* 禁用 * 当前值
* *
* @memberof AppPresetSwitch * @type {any}
* @memberof AppLoginInput
*/ */
get disabled() { get curValue() {
const layoutModel = this.layoutModelDetails[this.name]; return this.value;
return layoutModel.disabled;
} }
/** /**
* 只读 * 值变化
* *
* @memberof AppPresetSwitch * @memberof AppLoginInput
*/ */
get readonly() { set curValue(val: any) {
const layoutModel = this.layoutModelDetails[this.name]; this.$emit('valueChange', { name: this.itemName, value: val });
return layoutModel.readonly;
} }
} }
......
src/components/layout-element/login/app-login-message/app-login-message.vue
浏览文件 @ 32a9de83
...@@ -34,24 +34,46 @@ export default class AppLoginMessage extends Vue { ...@@ -34,24 +34,46 @@ export default class AppLoginMessage extends Vue {
*/ */
@Prop() public name!: string; @Prop() public name!: string;
/**
* 下标
*
* @type {number}
* @memberof AppLoginMessage
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppLoginMessage
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 当前容器样式 * 当前容器样式
* *
* @memberof AppLoginMessage * @memberof AppLoginMessage
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 类名 * 类名
* *
* @memberof AppLoginMessage * @memberof AppLoginMessage
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-login-message ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-login-message ${this.itemName} ${layoutModel.sysCss}`;
}
} }
} }
......
src/components/layout-element/login/app-login-note-verify/app-login-note-verify.vue
浏览文件 @ 32a9de83
<template> <template>
<div :class="curClassName" :style="curStyle"> <div :class="curClassName" :style="curStyle">
<div class="content"> <div class="content">
<i-input <i-input size="default" type="text" v-model="phoneNumber"
size="default" :placeholder="$t('components.login.phoneplaceholder')" @on-blur="veriPhoneNumber"></i-input>
type="text"
v-model="phoneNumber"
:placeholder="$t('components.login.phoneplaceholder')"
@on-blur="veriPhoneNumber"
></i-input>
<el-button :disabled="disabled" size="mini" @click="getVeriCode()">{{ <el-button :disabled="disabled" size="mini" @click="getVeriCode()">{{
disabled ? `${delay}s ${$t("components.login.getcodeafter")}` : `${$t("components.login.getcode")}` disabled ? `${delay}s ${$t("components.login.getcodeafter")}` : `${$t("components.login.getcode")}`
}}</el-button> }}</el-button>
</div> </div>
<alert v-show="phoneError" type="error">电话号码格式错误</alert> <alert v-show="phoneError" type="error">电话号码格式错误</alert>
<div class="code" v-show="this.show"> <div class="code" v-show="show">
<i-input <i-input size="default" type="text" :value="currentValue" @input="codeChange"
size="default" :placeholder="$t('components.login.codeplaceholder')"></i-input>
type="text"
:value="currentValue"
@input="codeChange"
:placeholder="$t('components.login.codeplaceholder')"
></i-input>
</div> </div>
</div> </div>
</template> </template>
...@@ -54,6 +44,24 @@ export default class AppLoginNoteVerify extends Vue { ...@@ -54,6 +44,24 @@ export default class AppLoginNoteVerify extends Vue {
*/ */
@Prop() public name!: string; @Prop() public name!: string;
/**
* 下标
*
* @type {number}
* @memberof AppLoginNoteVerify
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppLoginNoteVerify
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
*验证码当前值 *验证码当前值
* *
...@@ -116,19 +124,23 @@ export default class AppLoginNoteVerify extends Vue { ...@@ -116,19 +124,23 @@ export default class AppLoginNoteVerify extends Vue {
* *
* @memberof AppLoginNoteVerify * @memberof AppLoginNoteVerify
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 类名 * 类名
* *
* @memberof AppLoginNoteVerify * @memberof AppLoginNoteVerify
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-login-note-verify ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-login-note-verify ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
...@@ -136,7 +148,7 @@ export default class AppLoginNoteVerify extends Vue { ...@@ -136,7 +148,7 @@ export default class AppLoginNoteVerify extends Vue {
* @memberof AppLoginNoteVerify * @memberof AppLoginNoteVerify
*/ */
public codeChange(value: string) { public codeChange(value: string) {
this.$emit("valueChange", { name: this.name, value: value }); this.$emit("valueChange", { name: this.itemName, value: value });
} }
/** /**
......
src/components/layout-element/login/app-login-org/app-login-org.vue
浏览文件 @ 32a9de83
<template> <template>
<div :class="curClassName" :style="curStyle"> <div :class="curClassName" :style="curStyle">
<Select v-model="curKey"> <Select v-model="curValue">
<Option v-for="(item, index) in items" :value="item.value" :key="item.value">{{ item.label }}</Option> <Option v-for="(item, index) in items" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select> </Select>
</div> </div>
...@@ -36,12 +36,30 @@ export default class AppLoginOrg extends Vue { ...@@ -36,12 +36,30 @@ export default class AppLoginOrg extends Vue {
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/** /**
* 当前值 * 下标
*
* @type {number}
* @memberof AppLoginOrg
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppLoginOrg
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/**
* 获取当前值
* *
* @type {string} * @type {string}
* @memberof AppLoginOrg * @memberof AppLoginOrg
*/ */
get curKey() { get curValue() {
if (this.value) { if (this.value) {
return this.value; return this.value;
} else { } else {
...@@ -49,8 +67,14 @@ export default class AppLoginOrg extends Vue { ...@@ -49,8 +67,14 @@ export default class AppLoginOrg extends Vue {
} }
} }
set curKey(value: string) { /**
this.$emit('valueChange', { name: this.name, value: value }); * 设置当前值
*
* @type {string}
* @memberof AppLoginOrg
*/
set curValue(value: string) {
this.$emit('valueChange', { name: this.itemName, value: value });
} }
/** /**
...@@ -66,19 +90,23 @@ export default class AppLoginOrg extends Vue { ...@@ -66,19 +90,23 @@ export default class AppLoginOrg extends Vue {
* *
* @memberof AppLoginOrg * @memberof AppLoginOrg
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 类名 * 类名
* *
* @memberof AppLoginOrg * @memberof AppLoginOrg
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-login-org ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-login-org ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
......
src/components/layout-element/login/app-login-third/app-login-third.vue
浏览文件 @ 32a9de83
...@@ -41,24 +41,46 @@ export default class AppThirdLogin extends Vue { ...@@ -41,24 +41,46 @@ export default class AppThirdLogin extends Vue {
*/ */
@Prop() public name!: string; @Prop() public name!: string;
/**
* 下标
*
* @type {number}
* @memberof AppThirdLogin
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppThirdLogin
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 当前容器样式 * 当前容器样式
* *
* @memberof AppThirdLogin * @memberof AppThirdLogin
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 类名 * 类名
* *
* @memberof AppThirdLogin * @memberof AppThirdLogin
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-login-input ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-login-input ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
......
src/components/layout-element/login/index.md 已删除 100644 → 0
浏览文件 @ b5e06fb8
// 身份校验
\ No newline at end of file
src/components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue
浏览文件 @ 32a9de83
<template> <template>
<div :class="['app-field-image-dynamic', model.sysCss]" :style="containerStyle"> <div :class="curClassName" :style="curStyle">
<img :style="model.sysCss" :src="imgUrl" /> <img :src="imgUrl" />
</div> </div>
</template> </template>
<script lang = 'ts'> <script lang = 'ts'>
import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator'; import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { ImgurlBase64 } from '@/utils'; import { ImgurlBase64 } from '@/utils';
import { Environment } from "@/environments/environment"; import { Environment } from "@/environments/environment";
@Component({}) @Component({})
...@@ -34,12 +34,32 @@ export default class AppFieldImageDynamic extends Vue { ...@@ -34,12 +34,32 @@ export default class AppFieldImageDynamic extends Vue {
@Prop() public value: any; @Prop() public value: any;
/** /**
* 模型 * 下标
*
* @type {number}
* @memberof AppFieldImageDynamic
*/
@Prop({ default: 0 }) public index?: number;
/**
* 值变更
*
* @memberof AppFieldImageDynamic
*/
@Watch('value')
onValueChange(newVal: any, oldVal: any) {
this.handleDynaImg();
}
/**
* 项名称
* *
* @type {*} * @type {*}
* @memberof AppFieldImageDynamic * @memberof AppFieldImageDynamic
*/ */
public model:any = null; get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 动态图片路径 * 动态图片路径
...@@ -56,28 +76,36 @@ export default class AppFieldImageDynamic extends Vue { ...@@ -56,28 +76,36 @@ export default class AppFieldImageDynamic extends Vue {
public downloadUrl = Environment.ExportFile; public downloadUrl = Environment.ExportFile;
/** /**
* 容器样式 * 图片路径
* *
* @type {any}
* @memberof AppFieldImageDynamic * @memberof AppFieldImageDynamic
*/ */
public containerStyle: any = null; get imgUrl(): string {
return this.dynaImgUrl;
}
/** /**
* 图片路径 * 类名
* *
* @memberof AppFieldImageDynamic * @memberof AppFieldImageDynamic
*/ */
get imgUrl(): string { get curClassName() {
return this.dynaImgUrl; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return `app-field-image-dynamic ${this.itemName} ${layoutModel.sysCss}`;
}
} }
created() { /**
if (this.layoutModelDetails && this.name) { * 当前容器样式
this.model = this.layoutModelDetails[this.name]; *
this.containerStyle = this.model.getElementStyle(); * @memberof AppFieldImageDynamic
*/
get curStyle() {
const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle();
} }
this.handleDynaImg();
} }
/** /**
......
src/components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.vue
浏览文件 @ 32a9de83
<template> <template>
<div :class="['app-rawitem-carousel',model.sysCss]" :style="containerStyle" > <div :class="curClassName" :style="curStyle">
<el-carousel class="carsouel-container" <el-carousel class="carsouel-container" height="150px" indicator-position="outside" :autoplay="false"
height="150px" :interval="swipeConfig.interval">
indicator-position="outside"
:autoplay="false"
:interval="swipeConfig.interval"
>
<el-carousel-item v-for="item in swipeData" :key="item.key"> <el-carousel-item v-for="item in swipeData" :key="item.key">
<div class="carousel-img-item"> <div class="carousel-img-item">
<img class="app-carouse-img" v-if="item.type === 'img'" :src="item.imgPath" @error="imgError" /> <img class="app-carouse-img" v-if="item.type === 'img'" :src="item.imgPath" @error="imgError" />
<i v-else-if="item.type === 'icon'" :class="item.iconClass" ></i> <i v-else-if="item.type === 'icon'" :class="item.iconClass"></i>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
...@@ -42,14 +38,6 @@ export default class AppCarousel extends Vue { ...@@ -42,14 +38,6 @@ export default class AppCarousel extends Vue {
*/ */
@Prop() public value?: any; @Prop() public value?: any;
/**
* 模型
*
* @type {*}
* @memberof AppCarousel
*/
public model: any;
/** /**
* 名称 * 名称
* *
...@@ -67,57 +55,78 @@ export default class AppCarousel extends Vue { ...@@ -67,57 +55,78 @@ export default class AppCarousel extends Vue {
@Prop() public type?: string; @Prop() public type?: string;
/** /**
* @description 轮播图图片所有项数据 * 下标
*
* @type {number}
* @memberof AppCarousel * @memberof AppCarousel
*/ */
@Prop({ default: 0 }) public index?: number;
public swipeData: any[] = [];
/** /**
* @description 轮播图配置 * 项名称
*
* @type {*}
* @memberof AppCarousel * @memberof AppCarousel
*/ */
public swipeConfig: any = {}; get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 容器样式 * 类名
* *
* @type {any}
* @memberof AppCarousel * @memberof AppCarousel
*/ */
public containerStyle: any = null; get curClassName() {
const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return `app-rawitem-carousel ${this.itemName} ${layoutModel.sysCss}`;
}
}
/** /**
* data值变化 * 当前容器样式
* *
* @param {*} newVal
* @param {*} oldVal
* @memberof AppCarousel * @memberof AppCarousel
*/ */
@Watch('value', { immediate: true, deep: true }) get curStyle() {
public onDataChange(newVal: any, oldVal: any) { const layoutModel = this.layoutModelDetails[this.itemName];
if (newVal) { if (layoutModel) {
this.handleSwipData(newVal); return layoutModel.getElementStyle();
} }
} }
/** /**
* @description 构建之前 * @description 轮播图图片所有项数据
* @memberof AppCarousel * @memberof AppCarousel
*/ */
created() {
if (this.layoutModelDetails && this.name) { public swipeData: any[] = [];
this.model = this.layoutModelDetails[this.name];
this.containerStyle = this.model.getElementStyle(); /**
} * @description 轮播图配置
* @memberof AppCarousel
*/
public swipeConfig: any = {};
/**
* data值变化
*
* @param {*} newVal
* @param {*} oldVal
* @memberof AppCarousel
*/
@Watch('value', { immediate: true, deep: true })
public onValueChange(newVal: any, oldVal: any) {
//处理轮播图-动态数据 //处理轮播图-动态数据
if (this.type === "FIELD_CAROUSEL") { if (this.type === "FIELD_CAROUSEL") {
if (this.value && typeof this.value === 'string') { if (this.value && typeof this.value === 'string') {
const swipeData = JSON.parse(this.value); const swipeData = JSON.parse(this.value);
this.handleSwipData(swipeData); this.handleSwipData(swipeData);
} }
} else if (this.type === "STATIC_CAROUSEL") {
//处理轮播图-静态数据 //处理轮播图-静态数据
} else if (this.type === "STATIC_CAROUSEL") {
this.handleSwipData(this.value); this.handleSwipData(this.value);
} }
} }
......
src/components/layout-element/media/app-rawitem-image/app-rawitem-image.vue
浏览文件 @ 32a9de83
<template> <template>
<div :class="['app-rawitem-image', model.sysCss]" :style="containerStyle"> <div :class="curClassName" :style="curStyle">
<img v-if="imgUrl" :src="imgUrl" /> <img v-if="imgUrl" :src="imgUrl" />
<i v-else :class="imageClass ? imageClass : ''"></i> <i v-else :class="imageClass ? imageClass : ''"></i>
</div> </div>
</template> </template>
<script lang = 'ts'> <script lang = 'ts'>
import { PanelFieldModel } from '@/model/panel-detail'; import { Vue, Component, Prop } from 'vue-property-decorator';
import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
@Component({}) @Component({})
export default class AppRawItemImage extends Vue { export default class AppRawItemImage extends Vue {
/** /**
...@@ -42,27 +41,44 @@ export default class AppRawItemImage extends Vue { ...@@ -42,27 +41,44 @@ export default class AppRawItemImage extends Vue {
@Prop() public imageClass?: string; @Prop() public imageClass?: string;
/** /**
* 容器样式 * 下标
* *
* @type {any} * @type {number}
* @memberof AppRawItemImage * @memberof AppRawItemImage
*/ */
public containerStyle: any = null; @Prop({ default: 0 }) public index?: number;
/** /**
* 容器样式 * 项名称
* *
* @type {any} * @type {*}
* @memberof AppRawItemImage * @memberof AppRawItemImage
*/ */
public model: any = null; get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/**
* 类名
*
* @memberof AppRawItemImage
*/
get curClassName() {
const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return `app-rawitem-image ${this.itemName} ${layoutModel.sysCss}`;
}
}
created() { /**
if (this.layoutModelDetails && this.name) { * 当前容器样式
this.model = this.layoutModelDetails[this.name]; *
this.containerStyle = this.model.getElementStyle(); * @memberof AppRawItemImage
*/
get curStyle() {
const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle();
} }
} }
......
src/components/layout-element/media/app-rawitem-video/app-rawitem-video.vue
浏览文件 @ 32a9de83
<template> <template>
<div :class="['app-rawitem-video',model.sysCss]" :style="containerStyle"> <div :class="curClassName" :style="curStyle">
<video :src="playerParams.path" :autoplay="playerParams.autoplay" :controls="playerParams.showcontrols" <video :src="playerParams.path" :autoplay="playerParams.autoplay" :controls="playerParams.showcontrols"
:loop="playerParams.replay" :muted="playerParams.mute"> :loop="playerParams.replay" :muted="playerParams.mute">
<source :src="playerParams.path" type="video/mp4"> <source :src="playerParams.path" type="video/mp4">
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<script lang="ts"> <script lang="ts">
import { Util } from '@/utils'; import { Util } from '@/utils';
import { Component, Vue, Prop } from 'vue-property-decorator'; import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
@Component({}) @Component({})
export default class AppRawItemVideo extends Vue { export default class AppRawItemVideo extends Vue {
/** /**
...@@ -30,7 +30,6 @@ export default class AppRawItemVideo extends Vue { ...@@ -30,7 +30,6 @@ export default class AppRawItemVideo extends Vue {
*/ */
@Prop() public layoutModelDetails!: any; @Prop() public layoutModelDetails!: any;
/** /**
* 视频播放数据 * 视频播放数据
* @memberof AppRawItemVideo * @memberof AppRawItemVideo
...@@ -38,28 +37,62 @@ export default class AppRawItemVideo extends Vue { ...@@ -38,28 +37,62 @@ export default class AppRawItemVideo extends Vue {
@Prop() public videoParmas?: any; @Prop() public videoParmas?: any;
/** /**
* 模型 * 下标
* *
* @type {*} * @type {number}
* @memberof @memberof AppRawItemVideo * @memberof AppRawItemVideo
*/ */
public model: any; @Prop({ default: 0 }) public index?: number;
/** /**
* 播放器唯一标识 * 值变更
*
* @memberof AppRawItemVideo * @memberof AppRawItemVideo
*/ */
public uuid: string = Util.createUUID(); @Watch('videoParmas')
onVideoParmasChange(newVal: any, oldVal: any) {
this.handleStaticVideo();
}
/** /**
* 容器样式 * 项名称
* *
* @type {any} * @type {*}
* @memberof AppRawItemVideo * @memberof AppRawItemVideo
*/ */
public containerStyle: any = null; get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/**
* 类名
*
* @memberof AppRawItemVideo
*/
get curClassName() {
const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return `app-rawitem-video ${this.itemName} ${layoutModel.sysCss}`;
}
}
/**
* 当前容器样式
*
* @memberof AppRawItemVideo
*/
get curStyle() {
const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle();
}
}
/**
* 播放器唯一标识
* @memberof AppRawItemVideo
*/
public uuid: string = Util.createUUID();
/** /**
* 视频播放参数 * 视频播放参数
...@@ -78,21 +111,6 @@ export default class AppRawItemVideo extends Vue { ...@@ -78,21 +111,6 @@ export default class AppRawItemVideo extends Vue {
showcontrols: false showcontrols: false
}; };
created() {
if (this.layoutModelDetails && this.name) {
this.model = this.layoutModelDetails[this.name];
this.containerStyle = this.model.getElementStyle();
}
}
/**
* 生命周期
* @memberof AppRawItemVideo
*/
public mounted() {
this.handleStaticVideo();
}
/** /**
* 处理静态视频播放 * 处理静态视频播放
* *
......
src/components/layout-element/media/index.md 已删除 100644 → 0
浏览文件 @ b5e06fb8
// 多媒体
\ No newline at end of file
src/components/layout-element/control/app-ctrl-pos/app-ctrl-pos.vue → src/components/layout-element/structure/app-ctrl-pos/app-ctrl-pos.vue
浏览文件 @ 32a9de83
...@@ -26,45 +26,45 @@ export default class AppCtrlPos extends Vue { ...@@ -26,45 +26,45 @@ export default class AppCtrlPos extends Vue {
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/** /**
* 当前布局模型 * 下标
* *
* @type {*} * @type {number}
* @memberof AppCtrlPos * @memberof AppCtrlPos
*/ */
public currentLayoutModel: any; @Prop({ default: 0 }) public index?: number;
/** /**
* 当前容器类名 * 项名称
* *
* @type {*}
* @memberof AppCtrlPos * @memberof AppCtrlPos
*/ */
get curClassName() { get itemName() {
return { return this.index ? `${this.name}_${this.index}` : this.name;
'app-ctrl-pos': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
} }
/** /**
* 当前容器样式 * 当前容器类名
* *
* @memberof AppCtrlPos * @memberof AppCtrlPos
*/ */
get curStyle() { get curClassName() {
if (this.currentLayoutModel) { const layoutModel = this.layoutModelDetails[this.itemName];
return this.currentLayoutModel.getElementStyle(); if (layoutModel) {
return `app-ctrl-pos ${this.itemName} ${layoutModel.sysCss}`;
} }
return '';
} }
/** /**
* Vue生命周期 --- created * 当前容器样式
* *
* @memberof AppCtrlPos * @memberof AppCtrlPos
*/ */
created() { get curStyle() {
this.currentLayoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle();
}
} }
} }
......
src/components/layout-element/container/app-nav-pos/app-nav-pos.vue → src/components/layout-element/structure/app-nav-pos/app-nav-pos.vue
浏览文件 @ 32a9de83
...@@ -8,16 +8,10 @@ ...@@ -8,16 +8,10 @@
</template> </template>
<router-view v-else :key="routerViewKey"></router-view> <router-view v-else :key="routerViewKey"></router-view>
</template> </template>
<component <component class="view-container2" v-if="navData && navData.navView" :is="navData.navView"
class="view-container2" :viewDefaultUsage="false" :viewdata="JSON.stringify(navData.srfnavdata.context)"
v-if="navData && navData.navView" :viewparam="JSON.stringify(navData.srfnavdata.viewparmas)" @viewdataschange="handleViewEvent"
:is="navData.navView" @viewLoaded="handleViewEvent" @viewstatechange="handleViewEvent">
:viewDefaultUsage="false"
:viewdata="JSON.stringify(navData.srfnavdata.context)"
:viewparam="JSON.stringify(navData.srfnavdata.viewparmas)"
@viewdataschange="handleViewEvent"
@viewLoaded="handleViewEvent"
@viewstatechange="handleViewEvent">
</component> </component>
</div> </div>
</template> </template>
...@@ -43,6 +37,14 @@ export default class AppNavPos extends Vue { ...@@ -43,6 +37,14 @@ export default class AppNavPos extends Vue {
*/ */
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/**
* 下标
*
* @type {number}
* @memberof AppNavPos
*/
@Prop({ default: 0 }) public index?: number;
/** /**
* 导航数据 * 导航数据
* *
...@@ -52,12 +54,14 @@ export default class AppNavPos extends Vue { ...@@ -52,12 +54,14 @@ export default class AppNavPos extends Vue {
@Prop() public navData: any; @Prop() public navData: any;
/** /**
* 当前布局模型 * 项名称
* *
* @type {*} * @type {*}
* @memberof AppNavPos * @memberof AppNavPos
*/ */
public currentLayoutModel: any; get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 获取动态导航模式（DYNAMICCOMP：动态组件 ROUTEVIEW：路由出口） * 获取动态导航模式（DYNAMICCOMP：动态组件 ROUTEVIEW：路由出口）
...@@ -66,7 +70,7 @@ export default class AppNavPos extends Vue { ...@@ -66,7 +70,7 @@ export default class AppNavPos extends Vue {
* @memberof AppNavPos * @memberof AppNavPos
*/ */
get dynaNavMode(): "DYNAMICCOMP" | "ROUTEVIEW" { get dynaNavMode(): "DYNAMICCOMP" | "ROUTEVIEW" {
const currentModel = this.layoutModelDetails[this.name]; const currentModel = this.layoutModelDetails[this.itemName];
if (currentModel && currentModel.dynaNavMode) { if (currentModel && currentModel.dynaNavMode) {
return currentModel.dynaNavMode; return currentModel.dynaNavMode;
} }
...@@ -80,7 +84,7 @@ export default class AppNavPos extends Vue { ...@@ -80,7 +84,7 @@ export default class AppNavPos extends Vue {
* @memberof AppNavPos * @memberof AppNavPos
*/ */
get enableCache(): boolean { get enableCache(): boolean {
const currentModel = this.layoutModelDetails[this.name]; const currentModel = this.layoutModelDetails[this.itemName];
if (currentModel) { if (currentModel) {
return currentModel.enableCache; return currentModel.enableCache;
} }
...@@ -112,11 +116,11 @@ export default class AppNavPos extends Vue { ...@@ -112,11 +116,11 @@ export default class AppNavPos extends Vue {
* @memberof AppNavPos * @memberof AppNavPos
*/ */
get curClassName() { get curClassName() {
return { const currentModel = this.layoutModelDetails[this.itemName];
'app-nav-pos': true, if (currentModel) {
[this.name]: true, return `app-nav-pos ${this.itemName} ${currentModel.sysCss}`;
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
} }
} }
/** /**
...@@ -125,19 +129,10 @@ export default class AppNavPos extends Vue { ...@@ -125,19 +129,10 @@ export default class AppNavPos extends Vue {
* @memberof AppNavPos * @memberof AppNavPos
*/ */
get curStyle() { get curStyle() {
if (this.currentLayoutModel) { const currentModel = this.layoutModelDetails[this.itemName];
return this.currentLayoutModel.getElementStyle(); if (currentModel) {
} return currentModel.getElementStyle();
return '';
} }
/**
* Vue生命周期 --- created
*
* @memberof AppNavPos
*/
created() {
this.currentLayoutModel = this.layoutModelDetails[this.name];
} }
/** /**
......
src/components/layout-element/container/app-scroll-container/app-scroll-container.vue → src/components/layout-element/structure/app-scroll-container/app-scroll-container.vue
浏览文件 @ 32a9de83
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<script lang="ts"> <script lang="ts">
import { Util } from '@/utils'; import { Util } from '@/utils';
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component({}) @Component({})
export default class AppScrollContainer extends Vue { export default class AppScrollContainer extends Vue {
...@@ -49,6 +49,14 @@ export default class AppScrollContainer extends Vue { ...@@ -49,6 +49,14 @@ export default class AppScrollContainer extends Vue {
*/ */
@Prop() public name!: string; @Prop() public name!: string;
/**
* 下标
*
* @type {number}
* @memberof AppScrollContainer
*/
@Prop({ default: 0 }) public index?: number;
/** /**
* 布局模型详情 * 布局模型详情
* *
...@@ -57,6 +65,16 @@ export default class AppScrollContainer extends Vue { ...@@ -57,6 +65,16 @@ export default class AppScrollContainer extends Vue {
*/ */
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/**
* 布局模型详情变更
* @param newVal
* @param oldVal
*/
@Watch('layoutModelDetails')
onLayoutModelDetailsChange(newVal: any, oldVal: any) {
this.initScrollContainer();
}
/** /**
* 插槽对象 * 插槽对象
* *
...@@ -71,37 +89,44 @@ export default class AppScrollContainer extends Vue { ...@@ -71,37 +89,44 @@ export default class AppScrollContainer extends Vue {
*/ */
public middleContainerStyle: any = {}; public middleContainerStyle: any = {};
/**
* 项名称
*
* @type {*}
* @memberof AppScrollContainer
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 当前容器样式类 * 当前容器样式类
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-scroll-container ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-scroll-container ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
* 当前容器样式 * 当前容器样式
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if(layoutModel){
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 获取项布局样式 * 获取项布局样式
*/ */
public getItemPosStyle(name:string){ public getItemPosStyle(name: string) {
const layoutModel = this.layoutModelDetails[name]; const layoutModel = this.layoutModelDetails[this.itemName];
if(layoutModel){
return layoutModel.getBorderLayoutStyle(); return layoutModel.getBorderLayoutStyle();
} }
/**
* 组件初始化
*
* @memberof AppScrollContainer
*/
public created() {
this.initScrollContainer();
} }
/** /**
...@@ -111,8 +136,8 @@ export default class AppScrollContainer extends Vue { ...@@ -111,8 +136,8 @@ export default class AppScrollContainer extends Vue {
*/ */
public initScrollContainer() { public initScrollContainer() {
let minusHeight = ''; let minusHeight = '';
let minusWidth:string = ''; let minusWidth: string = '';
const curLayoutModel = this.layoutModelDetails[this.name]; const curLayoutModel = this.layoutModelDetails[this.itemName];
if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) { if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
curLayoutModel.details.forEach((key: string) => { curLayoutModel.details.forEach((key: string) => {
const { name, layoutWidth, widthMode, layoutHeight, heightMode, layoutPos } = this.layoutModelDetails[key]; const { name, layoutWidth, widthMode, layoutHeight, heightMode, layoutPos } = this.layoutModelDetails[key];
......
src/components/layout-element/container/app-simpleflex-container/app-simpleflex-container.vue → src/components/layout-element/structure/app-simpleflex-container/app-simpleflex-container.vue
浏览文件 @ 32a9de83
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component({}) @Component({})
export default class AppSimpleFlexContainer extends Vue { export default class AppSimpleFlexContainer extends Vue {
...@@ -21,6 +21,14 @@ export default class AppSimpleFlexContainer extends Vue { ...@@ -21,6 +21,14 @@ export default class AppSimpleFlexContainer extends Vue {
*/ */
@Prop() public name!: string; @Prop() public name!: string;
/**
* 下标
*
* @type {number}
* @memberof AppSimpleFlexContainer
*/
@Prop({ default: 0 }) public index?: number;
/** /**
* 布局模型详情 * 布局模型详情
* *
...@@ -29,6 +37,16 @@ export default class AppSimpleFlexContainer extends Vue { ...@@ -29,6 +37,16 @@ export default class AppSimpleFlexContainer extends Vue {
*/ */
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/**
* 布局模型详情变更
* @param newVal
* @param oldVal
*/
@Watch('layoutModelDetails')
onLayoutModelDetailsChange(newVal: any, oldVal: any) {
this.initSimpleFlexContainer();
}
/** /**
* 插槽对象 * 插槽对象
* *
...@@ -37,12 +55,13 @@ export default class AppSimpleFlexContainer extends Vue { ...@@ -37,12 +55,13 @@ export default class AppSimpleFlexContainer extends Vue {
public containerModel: any[] = []; public containerModel: any[] = [];
/** /**
* 组件初始化 * 项名称
* *
* @memberof SimpleFlexContainer * @type {*}
* @memberof AppSimpleFlexContainer
*/ */
public created() { get itemName() {
this.initSimpleFlexContainer(); return this.index ? `${this.name}_${this.index}` : this.name;
} }
/** /**
...@@ -51,7 +70,7 @@ export default class AppSimpleFlexContainer extends Vue { ...@@ -51,7 +70,7 @@ export default class AppSimpleFlexContainer extends Vue {
* @memberof SimpleFlexContainer * @memberof SimpleFlexContainer
*/ */
public initSimpleFlexContainer() { public initSimpleFlexContainer() {
const curLayoutModel = this.layoutModelDetails[this.name]; const curLayoutModel = this.layoutModelDetails[this.itemName];
if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) { if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
curLayoutModel.details.forEach((key: string) => { curLayoutModel.details.forEach((key: string) => {
this.containerModel.push(key); this.containerModel.push(key);
...@@ -63,25 +82,36 @@ export default class AppSimpleFlexContainer extends Vue { ...@@ -63,25 +82,36 @@ export default class AppSimpleFlexContainer extends Vue {
* 当前容器样式类 * 当前容器样式类
*/ */
get curClassName() { get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-simpleflex-container ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-simpleflex-container ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
* 当前容器样式 * 当前容器样式
*/ */
get curStyle() { get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 获取项布局样式 * 获取项布局样式
*/ */
public getItemPosStyle(name: string) { public getItemPosStyle(name: string) {
const layoutModel = this.layoutModelDetails[name]; let layoutModel: any;
if (this.index) {
layoutModel = this.layoutModelDetails[`${name}_${this.index}`];
} else {
layoutModel = this.layoutModelDetails[name];
}
if (layoutModel) {
return layoutModel.getCommonLayoutStyle(); return layoutModel.getCommonLayoutStyle();
} }
}
} }
......
src/components/layout-element/container/app-standard-container/app-standard-container.vue → src/components/layout-element/structure/app-standard-container/app-standard-container.vue
浏览文件 @ 32a9de83
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component({}) @Component({})
export default class AppStandardContainer extends Vue { export default class AppStandardContainer extends Vue {
...@@ -21,6 +21,14 @@ export default class AppStandardContainer extends Vue { ...@@ -21,6 +21,14 @@ export default class AppStandardContainer extends Vue {
*/ */
@Prop() public name!: string; @Prop() public name!: string;
/**
* 下标
*
* @type {number}
* @memberof AppStandardContainer
*/
@Prop({ default: 0 }) public index?: number;
/** /**
* 布局模型详情 * 布局模型详情
* *
...@@ -30,28 +38,39 @@ export default class AppStandardContainer extends Vue { ...@@ -30,28 +38,39 @@ export default class AppStandardContainer extends Vue {
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/** /**
* 插槽对象 * 项名称
* *
* @type {*}
* @memberof AppStandardContainer * @memberof AppStandardContainer
*/ */
public containerModel: any[] = []; get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 组件初始化 * 布局模型详情变更
* * @param newVal
* @memberof SimpleFlexContainer * @param oldVal
*/ */
public created() { @Watch('layoutModelDetails')
this.initSimpleFlexContainer(); onLayoutModelDetailsChange(newVal: any, oldVal: any) {
this.initStandardContainer();
} }
/** /**
* 初始化SIMPLEFLEX容器 * 插槽对象
* *
* @memberof SimpleFlexContainer * @memberof AppStandardContainer
*/ */
public initSimpleFlexContainer() { public containerModel: any[] = [];
const curLayoutModel = this.layoutModelDetails[this.name];
/**
* 初始化常规容器
*
* @memberof AppStandardContainer
*/
public initStandardContainer() {
const curLayoutModel = this.layoutModelDetails[this.itemName];
if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) { if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
curLayoutModel.details.forEach((key: string) => { curLayoutModel.details.forEach((key: string) => {
this.containerModel.push(key); this.containerModel.push(key);
...@@ -63,25 +82,36 @@ export default class AppStandardContainer extends Vue { ...@@ -63,25 +82,36 @@ export default class AppStandardContainer extends Vue {
* 当前容器样式类 * 当前容器样式类
*/ */
get curClassName() { get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-standard-container ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-standard-container ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
* 当前容器样式 * 当前容器样式
*/ */
get curStyle() { get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 获取项布局样式 * 获取项布局样式
*/ */
public getItemPosStyle(name: string) { public getItemPosStyle(name: string) {
const layoutModel = this.layoutModelDetails[name]; let layoutModel: any;
if (this.index) {
layoutModel = this.layoutModelDetails[`${name}_${this.index}`];
} else {
layoutModel = this.layoutModelDetails[name];
}
if (layoutModel) {
return layoutModel.getCommonLayoutStyle(); return layoutModel.getCommonLayoutStyle();
} }
}
} }
</script> </script>
<style lang='less'> <style lang='less'>
......
src/components/layout-element/container/app-tab-page/app-tab-page.vue → src/components/layout-element/structure/app-tab-page/app-tab-page.vue
浏览文件 @ 32a9de83
<template> <template>
<TabPane :label="currentLayoutModel.caption" :name="currentLayoutModel.name" :tab="currentLayoutModel.parentName" :class="curClassName" :style="curStyle"> <TabPane :label="currentLayoutModel.caption" :name="currentLayoutModel.name" :tab="currentLayoutModel.parentName"
:class="curClassName" :style="curStyle">
<template v-if="containerModel.length > 0"> <template v-if="containerModel.length > 0">
<template v-for="name of containerModel"> <template v-for="name of containerModel">
<slot :name="name"></slot> <slot :name="name"></slot>
...@@ -9,7 +10,7 @@ ...@@ -9,7 +10,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component({}) @Component({})
export default class AppTabPage extends Vue { export default class AppTabPage extends Vue {
...@@ -30,12 +31,22 @@ export default class AppTabPage extends Vue { ...@@ -30,12 +31,22 @@ export default class AppTabPage extends Vue {
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/** /**
* 当前布局模型 * 下标
* *
* @type {*} * @type {number}
* @memberof AppTabPage * @memberof AppTabPage
*/ */
public currentLayoutModel: any; @Prop({ default: 0 }) public index?: number;
/**
* 布局模型详情变更
* @param newVal
* @param oldVal
*/
@Watch('layoutModelDetails')
onLayoutModelDetailsChange(newVal: any, oldVal: any) {
this.initTabPage();
}
/** /**
* 插槽对象 * 插槽对象
...@@ -45,12 +56,20 @@ export default class AppTabPage extends Vue { ...@@ -45,12 +56,20 @@ export default class AppTabPage extends Vue {
public containerModel: any[] = []; public containerModel: any[] = [];
/** /**
* 组件初始化 * 当前布局模型
* *
* @memberof AppTabPage * @memberof AppTabPage
*/ */
public created() { public currentLayoutModel: any = {};
this.init();
/**
* 项名称
*
* @type {*}
* @memberof AppTabPage
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
} }
/** /**
...@@ -58,10 +77,11 @@ export default class AppTabPage extends Vue { ...@@ -58,10 +77,11 @@ export default class AppTabPage extends Vue {
* *
* @memberof AppTabPage * @memberof AppTabPage
*/ */
public init() { public initTabPage() {
this.currentLayoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (this.currentLayoutModel && this.currentLayoutModel.details && this.currentLayoutModel.details.length > 0) { if (layoutModel && layoutModel.details && layoutModel.details.length > 0) {
this.currentLayoutModel.details.forEach((key: string) => { this.currentLayoutModel = layoutModel;
layoutModel.details.forEach((key: string) => {
this.containerModel.push(key); this.containerModel.push(key);
}) })
} }
...@@ -73,10 +93,9 @@ export default class AppTabPage extends Vue { ...@@ -73,10 +93,9 @@ export default class AppTabPage extends Vue {
* @memberof AppTabPage * @memberof AppTabPage
*/ */
get curClassName() { get curClassName() {
return { const layoutModel = this.layoutModelDetails[this.itemName];
'app-tab-page': true, if (layoutModel) {
[this.name]: true, return `app-tab-page ${this.itemName} ${layoutModel.sysCss}`;
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
} }
} }
...@@ -86,10 +105,10 @@ export default class AppTabPage extends Vue { ...@@ -86,10 +105,10 @@ export default class AppTabPage extends Vue {
* @memberof AppTabPage * @memberof AppTabPage
*/ */
get curStyle() { get curStyle() {
if (this.currentLayoutModel) { const layoutModel = this.layoutModelDetails[this.itemName];
return this.currentLayoutModel.getElementStyle(); if (layoutModel) {
return layoutModel.getElementStyle();
} }
return '';
} }
} }
......
src/components/layout-element/container/app-tab-panel/app-tab-panel.vue → src/components/layout-element/structure/app-tab-panel/app-tab-panel.vue
浏览文件 @ 32a9de83
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component({}) @Component({})
export default class AppTabPanel extends Vue { export default class AppTabPanel extends Vue {
...@@ -30,12 +30,22 @@ export default class AppTabPanel extends Vue { ...@@ -30,12 +30,22 @@ export default class AppTabPanel extends Vue {
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/** /**
* 当前布局模型 * 下标
*
* @type {number}
* @memberof AppTabPanel
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
* *
* @type {*} * @type {*}
* @memberof AppTabPanel * @memberof AppTabPanel
*/ */
public currentLayoutModel: any; get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 插槽对象 * 插槽对象
...@@ -52,12 +62,13 @@ export default class AppTabPanel extends Vue { ...@@ -52,12 +62,13 @@ export default class AppTabPanel extends Vue {
public activeName: string = ''; public activeName: string = '';
/** /**
* 组件初始化 * 布局模型详情变更
* * @param newVal
* @memberof AppTabPanel * @param oldVal
*/ */
public created() { @Watch('layoutModelDetails')
this.initTabPage(); onLayoutModelDetailsChange(newVal: any, oldVal: any) {
this.initTabPanel();
} }
/** /**
...@@ -65,15 +76,15 @@ export default class AppTabPanel extends Vue { ...@@ -65,15 +76,15 @@ export default class AppTabPanel extends Vue {
* *
* @memberof AppTabPanel * @memberof AppTabPanel
*/ */
public initTabPage() { public initTabPanel() {
this.currentLayoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (this.currentLayoutModel && this.currentLayoutModel.details && this.currentLayoutModel.details.length > 0) { if (layoutModel && layoutModel.details && layoutModel.details.length > 0) {
this.currentLayoutModel.details.forEach((key: string) => { layoutModel.details.forEach((key: string) => {
this.containerModel.push(key); this.containerModel.push(key);
}) })
} }
this.activeName = this.containerModel && this.containerModel.length > 0 ? this.containerModel[0] : ''; this.activeName = this.containerModel && this.containerModel.length > 0 ? this.containerModel[0] : '';
this.layoutModelDetails[this.name].clickPage(this.activeName); this.layoutModelDetails[this.itemName].clickPage(this.activeName);
} }
/** /**
...@@ -82,7 +93,9 @@ export default class AppTabPanel extends Vue { ...@@ -82,7 +93,9 @@ export default class AppTabPanel extends Vue {
* @memberof AppTabPanel * @memberof AppTabPanel
*/ */
public handleClick(tab: any) { public handleClick(tab: any) {
this.layoutModelDetails[this.name].clickPage(tab); if (this.layoutModelDetails[this.itemName]) {
this.layoutModelDetails[this.itemName].clickPage(tab);
}
} }
/** /**
...@@ -91,10 +104,9 @@ export default class AppTabPanel extends Vue { ...@@ -91,10 +104,9 @@ export default class AppTabPanel extends Vue {
* @memberof AppTabPanel * @memberof AppTabPanel
*/ */
get curClassName() { get curClassName() {
return { const layoutModel = this.layoutModelDetails[this.itemName];
'app-tab-panel': true, if (layoutModel) {
[this.name]: true, return `app-tab-panel ${this.itemName} ${layoutModel.sysCss}`;
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
} }
} }
...@@ -104,10 +116,10 @@ export default class AppTabPanel extends Vue { ...@@ -104,10 +116,10 @@ export default class AppTabPanel extends Vue {
* @memberof AppTabPanel * @memberof AppTabPanel
*/ */
get curStyle() { get curStyle() {
if (this.currentLayoutModel) { const layoutModel = this.layoutModelDetails[this.itemName];
return this.currentLayoutModel.getElementStyle(); if (layoutModel) {
return layoutModel.getElementStyle();
} }
return '';
} }
} }
</script> </script>
......
src/components/layout-element/text/app-preset-caption/app-preset-caption.vue
浏览文件 @ 32a9de83
...@@ -26,14 +26,34 @@ export default class AppPresetCaption extends Vue { ...@@ -26,14 +26,34 @@ export default class AppPresetCaption extends Vue {
*/ */
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/**
* 下标
*
* @type {number}
* @memberof AppPresetCaption
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppPresetCaption
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 类名 * 类名
* *
* @memberof AppPresetCaption * @memberof AppPresetCaption
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-preset-caption ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-preset-caption ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
...@@ -41,10 +61,12 @@ export default class AppPresetCaption extends Vue { ...@@ -41,10 +61,12 @@ export default class AppPresetCaption extends Vue {
* *
* @memberof AppPresetCaption * @memberof AppPresetCaption
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
} }
</script> </script>
......
src/components/layout-element/text/app-preset-text/app-preset-text.vue
浏览文件 @ 32a9de83
...@@ -81,13 +81,32 @@ export default class AppPresetText extends Vue { ...@@ -81,13 +81,32 @@ export default class AppPresetText extends Vue {
*/ */
@Prop() public imageClass?: string; @Prop() public imageClass?: string;
/**
* 下标
*
* @type {number}
* @memberof AppPresetText
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppPresetText
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 图片路径 * 图片路径
* *
* @memberof AppPresetText * @memberof AppPresetText
*/ */
get imagePath() { get imagePath() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
let imagePath = ''; let imagePath = '';
if (layoutModel.sysImage) { if (layoutModel.sysImage) {
imagePath = layoutModel.sysImage.imagePath; imagePath = layoutModel.sysImage.imagePath;
...@@ -95,19 +114,23 @@ export default class AppPresetText extends Vue { ...@@ -95,19 +114,23 @@ export default class AppPresetText extends Vue {
return imagePath; return imagePath;
} }
}
/** /**
* 图标 * 图标
* *
* @memberof AppPresetTitle * @memberof AppPresetTitle
*/ */
get cssClass() { get cssClass() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
let cssClass = ''; let cssClass = '';
if (layoutModel.sysImage) { if (layoutModel.sysImage) {
cssClass = layoutModel.sysImage.iconcls; cssClass = layoutModel.sysImage.iconcls;
} }
return cssClass; return cssClass;
} }
}
/** /**
* 内容类型 * 内容类型
...@@ -115,9 +138,11 @@ export default class AppPresetText extends Vue { ...@@ -115,9 +138,11 @@ export default class AppPresetText extends Vue {
* @memberof AppPresetTitle * @memberof AppPresetTitle
*/ */
get contentType() { get contentType() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.contentType || 'RAW'; return layoutModel.contentType || 'RAW';
} }
}
/** /**
* 类名 * 类名
...@@ -125,8 +150,10 @@ export default class AppPresetText extends Vue { ...@@ -125,8 +150,10 @@ export default class AppPresetText extends Vue {
* @memberof AppPresetTitle * @memberof AppPresetTitle
*/ */
get curClassName() { get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
...@@ -135,9 +162,11 @@ export default class AppPresetText extends Vue { ...@@ -135,9 +162,11 @@ export default class AppPresetText extends Vue {
* @memberof AppPresetTitle * @memberof AppPresetTitle
*/ */
get curStyle() { get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 绘制模式 * 绘制模式
...@@ -145,19 +174,21 @@ export default class AppPresetText extends Vue { ...@@ -145,19 +174,21 @@ export default class AppPresetText extends Vue {
* @memberof AppPresetTitle * @memberof AppPresetTitle
*/ */
get renderMode() { get renderMode() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.renderMode || 'TEXT'; return layoutModel.renderMode || 'TEXT';
} }
}
/** /**
* 内容 * 内容
* *
* @memberof AppPresetText * @memberof AppPresetText
*/ */
get content(): string { get content() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
let content = this.value; let content = this.value;
if (layoutModel.predefinedType && layoutModel.predefinedType !== 'FIELD_TEXT_DYNAMIC') { if (layoutModel && layoutModel.predefinedType && layoutModel.predefinedType !== 'FIELD_TEXT_DYNAMIC') {
if (this.contentType == 'RAW') { if (this.contentType == 'RAW') {
content = layoutModel.rawContent; content = layoutModel.rawContent;
} else if (this.contentType == 'HTML') { } else if (this.contentType == 'HTML') {
...@@ -182,14 +213,16 @@ export default class AppPresetText extends Vue { ...@@ -182,14 +213,16 @@ export default class AppPresetText extends Vue {
* *
* @memberof AppPresetText * @memberof AppPresetText
*/ */
get contentStyle(): string { get contentStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
let contentStyle = layoutModel.contentStyle; let contentStyle = layoutModel.contentStyle;
if (layoutModel.predefinedType === 'STATIC_LABEL') { if (layoutModel.predefinedType === 'STATIC_LABEL') {
contentStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"; contentStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
} }
return contentStyle; return contentStyle;
} }
}
} }
</script> </script>
<style lang="less"> <style lang="less">
......
src/components/layout-element/text/app-preset-title/app-preset-title.vue
浏览文件 @ 32a9de83
...@@ -24,14 +24,34 @@ export default class AppPresetTitle extends Vue { ...@@ -24,14 +24,34 @@ export default class AppPresetTitle extends Vue {
*/ */
@Prop() public layoutModelDetails: any; @Prop() public layoutModelDetails: any;
/**
* 下标
*
* @type {number}
* @memberof AppPresetTitle
*/
@Prop({ default: 0 }) public index?: number;
/**
* 项名称
*
* @type {*}
* @memberof AppPresetTitle
*/
get itemName() {
return this.index ? `${this.name}_${this.index}` : this.name;
}
/** /**
* 类名 * 类名
* *
* @memberof AppPresetTitle * @memberof AppPresetTitle
*/ */
get curClassName(){ get curClassName() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
return `app-preset-title ${this.name} ${layoutModel.sysCss}`; if (layoutModel) {
return `app-preset-title ${this.itemName} ${layoutModel.sysCss}`;
}
} }
/** /**
...@@ -39,10 +59,12 @@ export default class AppPresetTitle extends Vue { ...@@ -39,10 +59,12 @@ export default class AppPresetTitle extends Vue {
* *
* @memberof AppPresetTitle * @memberof AppPresetTitle
*/ */
get curStyle(){ get curStyle() {
const layoutModel = this.layoutModelDetails[this.name]; const layoutModel = this.layoutModelDetails[this.itemName];
if (layoutModel) {
return layoutModel.getElementStyle(); return layoutModel.getElementStyle();
} }
}
/** /**
* 当前值 * 当前值
......
src/components/layout-element/text/index.md 已删除 100644 → 0
浏览文件 @ b5e06fb8
// 文本项
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或