Skip to content

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

delete

上级 9fdcc6c2
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 0 行增加 和 4485 行删除
app_Web/src/components/layout-element/container/app-nav-pos/app-nav-pos.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-nav-pos {
width: 100%;
height: 100%;
}
\ No newline at end of file
app_Web/src/components/layout-element/container/app-nav-pos/app-nav-pos.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<template v-if="dynaNavMode === 'ROUTEVIEW'">
<template v-if="enableCache">
<app-keep-alive :routerList="routerList">
<router-view :key="routerViewKey"></router-view>
</app-keep-alive>
</template>
<router-view v-else :key="routerViewKey"></router-view>
</template>
<component
class="view-container2"
v-if="navData && navData.navView"
:is="navData.navView"
:viewDefaultUsage="false"
:viewdata="JSON.stringify(navData.srfnavdata.context)"
:viewparam="JSON.stringify(navData.srfnavdata.viewparmas)"
@viewdataschange="handleViewEvent"
@viewLoaded="handleViewEvent"
@viewstatechange="handleViewEvent">
</component>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({})
export default class AppNavPos extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppNavPos
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppNavPos
*/
@Prop() public layoutModelDetails: any;
/**
* 导航数据
*
* @type {*}
* @memberof AppNavPos
*/
@Prop() public navData: any;
/**
* 当前布局模型
*
* @type {*}
* @memberof AppNavPos
*/
public currentLayoutModel: any;
/**
* 获取动态导航模式（DYNAMICCOMP：动态组件 ROUTEVIEW：路由出口）
*
* @type {"DYNAMICCOMP" | "ROUTEVIEW"}
* @memberof AppNavPos
*/
get dynaNavMode(): "DYNAMICCOMP" | "ROUTEVIEW" {
const currentModel = this.layoutModelDetails[this.name];
if (currentModel && currentModel.dynaNavMode) {
return currentModel.dynaNavMode;
}
return 'DYNAMICCOMP';
}
/**
* 是否启用动态缓存
*
* @type {boolean}
* @memberof AppNavPos
*/
get enableCache(): boolean {
const currentModel = this.layoutModelDetails[this.name];
if (currentModel) {
return currentModel.enableCache;
}
return false;
}
/**
* 路由列表
*
* @memberof AppNavPos
*/
get routerList() {
return this.$store.state.historyPathList;
}
/**
* 路由键值
*
* @memberof AppNavPos
*/
get routerViewKey() {
let _this: any = this;
return _this.$route.fullPath;
}
/**
* 当前容器类名
*
* @memberof AppNavPos
*/
get curClassName() {
return {
'app-nav-pos': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
}
/**
* 当前容器样式
*
* @memberof AppNavPos
*/
get curStyle() {
if (this.currentLayoutModel) {
return this.currentLayoutModel.getElementStyle();
}
return '';
}
/**
* Vue生命周期 --- created
*
* @memberof AppNavPos
*/
created() {
this.currentLayoutModel = this.layoutModelDetails[this.name];
}
/**
* 执行视图事件
*
* @param {*} args
* @memberof AppNavPos
*/
public handleViewEvent(args: any) {
console.log(args);
}
}
</script>
<style lang='less'>
@import './app-nav-pos.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/container/app-scroll-container/app-scroll-container.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-scroll-container {
height: 100%;
width: 100%;
border: 1px solid red;
.app-scroll-container__header,
.app-scroll-container__bottom {
width: 100%;
}
.app-scroll-container__middle {
display: flex;
width: 100%;
.app-scroll-container__left,
.app-scroll-container__center,
.app-scroll-container__right {
height: 100%;
}
}
.no-style {
padding: 0;
margin: 0;
}
.overflow-auto {
overflow: auto;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/container/app-scroll-container/app-scroll-container.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<div v-if="containerModel.NORTH" :style="containerModel.NORTH.style"
class="no-style overflow-auto app-scroll-container__header">
<div v-for="name of containerModel.NORTH.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</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">
<div v-for="name of containerModel.WEST.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</div>
</div>
<div v-if="containerModel.CENTER" :style="containerModel.CENTER.style"
class="no-style overflow-auto app-scroll-container__center">
<div v-for="name of containerModel.CENTER.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</div>
</div>
<div v-if="containerModel.EAST" :style="containerModel.EAST.style"
class="no-style overflow-auto app-scroll-container__right">
<div v-for="name of containerModel.EAST.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</div>
</div>
</div>
<div v-if="containerModel.SOUTH" :style="containerModel.SOUTH.style"
class="no-style overflow-auto app-scroll-container__bottom">
<div v-for="name of containerModel.SOUTH.name" class="scroll-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Util } from '@/utils';
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class AppScrollContainer extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppScrollContainer
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {string}
* @memberof AppScrollContainer
*/
@Prop() public layoutModelDetails: any;
/**
* 插槽对象
*
* @memberof AppScrollContainer
*/
public containerModel: any = {};
/**
* 中间区域样式
*
* @memberof AppScrollContainer
*/
public middleContainerStyle: any = {};
/**
* 当前容器样式类
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-scroll-container ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 获取项布局样式
*/
public getItemPosStyle(name:string){
const layoutModel = this.layoutModelDetails[name];
return layoutModel.getBorderLayoutStyle();
}
/**
* 组件初始化
*
* @memberof AppScrollContainer
*/
public created() {
this.initScrollContainer();
}
/**
* 初始化滚动容器
*
* @memberof AppScrollContainer
*/
public initScrollContainer() {
let minusHeight = '';
let minusWidth:string = '';
const curLayoutModel = this.layoutModelDetails[this.name];
if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
curLayoutModel.details.forEach((key: string) => {
const { name, layoutWidth, widthMode, layoutHeight, heightMode, layoutPos } = this.layoutModelDetails[key];
const style = {};
if (layoutWidth) {
Object.assign(style, { width: Util.getBoxSize('WIDTH', widthMode, layoutWidth).width });
if (layoutPos && (Object.is(layoutPos, 'WEST') || Object.is(layoutPos, 'EAST'))) {
minusWidth += ` - ${Util.getBoxSize('WIDTH', widthMode, layoutWidth).width}`;
}
}
if (layoutHeight) {
Object.assign(style, { height: Util.getBoxSize('HEIGHT', heightMode, layoutHeight).height });
if (layoutPos && (Object.is(layoutPos, 'NORTH') || Object.is(layoutPos, 'SOUTH'))) {
minusHeight += ` - ${Util.getBoxSize('HEIGHT', heightMode, layoutHeight).height}`;
}
}
if (this.containerModel.hasOwnProperty(layoutPos)) {
Object.assign(this.containerModel[layoutPos], { style });
this.containerModel[layoutPos].name.push(name);
} else {
this.containerModel[layoutPos] = { style, name: [name] };
}
});
}
this.middleContainerStyle.height = minusHeight ? `calc(100%${minusHeight})` : '100%';
if (this.containerModel.CENTER) {
this.containerModel.CENTER.style.width = minusWidth ? `calc(100%${minusWidth})` : '100%';
}
}
}
</script>
<style lang='less'>
@import 'app-scroll-container.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/container/app-simpleflex-container/app-simpleflex-container.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-simpleflex-container{
width: 100%;
height: 100%;
display: flex;
border: 1px solid blue;
.simpleflex-item__pos{
height: 100%;
width: 100%;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/container/app-simpleflex-container/app-simpleflex-container.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<template v-if="containerModel.length > 0">
<div v-for="name of containerModel" class="simpleflex-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</div>
</template>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class AppSimpleFlexContainer extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppSimpleFlexContainer
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {string}
* @memberof AppSimpleFlexContainer
*/
@Prop() public layoutModelDetails: any;
/**
* 插槽对象
*
* @memberof AppSimpleFlexContainer
*/
public containerModel: any[] = [];
/**
* 组件初始化
*
* @memberof SimpleFlexContainer
*/
public created() {
this.initSimpleFlexContainer();
}
/**
* 初始化SIMPLEFLEX容器
*
* @memberof SimpleFlexContainer
*/
public initSimpleFlexContainer() {
const curLayoutModel = this.layoutModelDetails[this.name];
if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
curLayoutModel.details.forEach((key: string) => {
this.containerModel.push(key);
})
}
}
/**
* 当前容器样式类
*/
get curClassName() {
const layoutModel = this.layoutModelDetails[this.name];
return `app-simpleflex-container ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*/
get curStyle() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 获取项布局样式
*/
public getItemPosStyle(name: string) {
const layoutModel = this.layoutModelDetails[name];
return layoutModel.getCommonLayoutStyle();
}
}
</script>
<style lang='less'>
@import 'app-simpleflex-container.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/container/app-standard-container/app-standard-container.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
// 标准容器大小靠内容撑
.app-standard-container{
display: block;
.container-item__pos{
width: 100%;
height: 100%;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/container/app-standard-container/app-standard-container.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<template v-if="containerModel.length > 0">
<div v-for="name of containerModel" class="container-item__pos" :style="getItemPosStyle(name)">
<slot :name="name"></slot>
</div>
</template>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class AppStandardContainer extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppStandardContainer
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {string}
* @memberof AppStandardContainer
*/
@Prop() public layoutModelDetails: any;
/**
* 插槽对象
*
* @memberof AppStandardContainer
*/
public containerModel: any[] = [];
/**
* 组件初始化
*
* @memberof SimpleFlexContainer
*/
public created() {
this.initSimpleFlexContainer();
}
/**
* 初始化SIMPLEFLEX容器
*
* @memberof SimpleFlexContainer
*/
public initSimpleFlexContainer() {
const curLayoutModel = this.layoutModelDetails[this.name];
if (curLayoutModel && curLayoutModel.details && curLayoutModel.details.length > 0) {
curLayoutModel.details.forEach((key: string) => {
this.containerModel.push(key);
})
}
}
/**
* 当前容器样式类
*/
get curClassName() {
const layoutModel = this.layoutModelDetails[this.name];
return `app-standard-container ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*/
get curStyle() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 获取项布局样式
*/
public getItemPosStyle(name: string) {
const layoutModel = this.layoutModelDetails[name];
return layoutModel.getCommonLayoutStyle();
}
}
</script>
<style lang='less'>
@import 'app-standard-container.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/container/app-tab-page/app-tab-page.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<TabPane :label="currentLayoutModel.caption" :name="currentLayoutModel.name" :tab="currentLayoutModel.parentName" :class="curClassName" :style="curStyle">
<template v-if="containerModel.length > 0">
<template v-for="name of containerModel">
<slot :name="name"></slot>
</template>
</template>
</TabPane>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class AppTabPage extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppTabPage
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {string}
* @memberof AppTabPage
*/
@Prop() public layoutModelDetails: any;
/**
* 当前布局模型
*
* @type {*}
* @memberof AppTabPage
*/
public currentLayoutModel: any;
/**
* 插槽对象
*
* @memberof AppTabPage
*/
public containerModel: any[] = [];
/**
* 组件初始化
*
* @memberof AppTabPage
*/
public created() {
this.init();
}
/**
* 初始化子项
*
* @memberof AppTabPage
*/
public init() {
this.currentLayoutModel = this.layoutModelDetails[this.name];
if (this.currentLayoutModel && this.currentLayoutModel.details && this.currentLayoutModel.details.length > 0) {
this.currentLayoutModel.details.forEach((key: string) => {
this.containerModel.push(key);
})
}
}
/**
* 当前容器样式类
*
* @memberof AppTabPage
*/
get curClassName() {
return {
'app-tab-page': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
}
/**
* 当前容器样式
*
* @memberof AppTabPage
*/
get curStyle() {
if (this.currentLayoutModel) {
return this.currentLayoutModel.getElementStyle();
}
return '';
}
}
</script>
<style lang='less'>
@import './app-tab-page.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/container/app-tab-panel/app-tab-panel.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<Tabs v-model="activeName" @on-click="handleClick" :name="name" :class="curClassName">
<template v-if="containerModel.length > 0">
<template v-for="name of containerModel">
<slot :name="name"></slot>
</template>
</template>
</Tabs>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class AppTabPanel extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppTabPanel
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppTabPanel
*/
@Prop() public layoutModelDetails: any;
/**
* 当前布局模型
*
* @type {*}
* @memberof AppTabPanel
*/
public currentLayoutModel: any;
/**
* 插槽对象
*
* @memberof AppTabPanel
*/
public containerModel: any[] = [];
/**
* 当前激活项
*
* @memberof AppTabPanel
*/
public activeName: string = '';
/**
* 组件初始化
*
* @memberof AppTabPanel
*/
public created() {
this.initTabPage();
}
/**
* 初始化分页
*
* @memberof AppTabPanel
*/
public initTabPage() {
this.currentLayoutModel = this.layoutModelDetails[this.name];
if (this.currentLayoutModel && this.currentLayoutModel.details && this.currentLayoutModel.details.length > 0) {
this.currentLayoutModel.details.forEach((key: string) => {
this.containerModel.push(key);
})
}
this.activeName = this.containerModel && this.containerModel.length > 0 ? this.containerModel[0] : '';
this.layoutModelDetails[this.name].clickPage(this.activeName);
}
/**
* 处理分页点击
*
* @memberof AppTabPanel
*/
public handleClick(tab: any) {
this.layoutModelDetails[this.name].clickPage(tab);
}
/**
* 当前容器类名
*
* @memberof AppTabPanel
*/
get curClassName() {
return {
'app-tab-panel': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
}
/**
* 当前容器样式
*
* @memberof AppTabPanel
*/
get curStyle() {
if (this.currentLayoutModel) {
return this.currentLayoutModel.getElementStyle();
}
return '';
}
}
</script>
<style lang='less'>
@import './app-tab-panel.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/control/app-ctrl-pos/app-ctrl-pos.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<slot></slot>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({})
export default class AppCtrlPos extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppCtrlPos
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppCtrlPos
*/
@Prop() public layoutModelDetails: any;
/**
* 当前布局模型
*
* @type {*}
* @memberof AppCtrlPos
*/
public currentLayoutModel: any;
/**
* 当前容器类名
*
* @memberof AppCtrlPos
*/
get curClassName() {
return {
'app-ctrl-pos': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
}
/**
* 当前容器样式
*
* @memberof AppCtrlPos
*/
get curStyle() {
if (this.currentLayoutModel) {
return this.currentLayoutModel.getElementStyle();
}
return '';
}
/**
* Vue生命周期 --- created
*
* @memberof AppCtrlPos
*/
created() {
this.currentLayoutModel = this.layoutModelDetails[this.name];
}
}
</script>
<style lang='less'>
@import './app-ctrl-pos.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/index/app-index-nav-breadcrumb/app-index-nav-breadcrumb.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<app-breadcrumb :navModel="navModel" :indexViewTag="indexViewTag"></app-breadcrumb>
</div>
</template>
<script lang="ts">
import { Component, Inject, Prop, Vue } from "vue-property-decorator";
@Component({})
export default class AppIndexNavBreadcrumb extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppIndexNavBreadcrumb
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppIndexNavBreadcrumb
*/
@Prop() public layoutModelDetails: any;
/**
* 首页视图标识
*
* @type {*}
* @memberof AppIndexNavBreadcrumb
*/
@Prop() public indexViewTag?: string;
/**
* 视图默认使用
*
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
@Inject({ from:'navModel', default: 'tab' })
public navModel!: string;
/**
* 当前布局模型
*
* @type {*}
* @memberof AppIndexNavBreadcrumb
*/
public currentLayoutModel: any;
/**
* 当前容器类名
*
* @memberof AppIndexNavBreadcrumb
*/
get curClassName() {
return {
'app-index-nav-breadcrumb': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
}
/**
* 当前容器样式
*
* @memberof AppIndexNavBreadcrumb
*/
get curStyle() {
if (this.currentLayoutModel) {
return this.currentLayoutModel.getElementStyle();
}
return '';
}
/**
* Vue生命周期 --- created
*
* @memberof AppIndexNavBreadcrumb
*/
created() {
this.currentLayoutModel = this.layoutModelDetails[this.name];
}
}
</script>
<style lang='less'>
@import './app-index-nav-breadcrumb.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/index/app-index-nav-tabs/app-index-nav-tabs.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<tab-page-exp></tab-page-exp>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({})
export default class AppIndexNavTabs extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppIndexNavTabs
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppIndexNavTabs
*/
@Prop() public layoutModelDetails: any;
/**
* 当前布局模型
*
* @type {*}
* @memberof AppIndexNavTabs
*/
public currentLayoutModel: any;
/**
* 当前容器类名
*
* @memberof AppIndexNavTabs
*/
get curClassName() {
return {
'app-index-nav-tabs': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
}
/**
* 当前容器样式
*
* @memberof AppIndexNavTabs
*/
get curStyle() {
if (this.currentLayoutModel) {
return this.currentLayoutModel.getElementStyle();
}
return '';
}
/**
* Vue生命周期 --- created
*
* @memberof AppIndexNavTabs
*/
created() {
this.currentLayoutModel = this.layoutModelDetails[this.name];
}
}
</script>
<style lang='less'>
@import './app-index-nav-tabs.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/index/app-index-org-select/app-index-org-select.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<app-orgsector></app-orgsector>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({})
export default class AppIndexOrgSelect extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppIndexOrgSelect
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppIndexOrgSelect
*/
@Prop() public layoutModelDetails: any;
/**
* 当前布局模型
*
* @type {*}
* @memberof AppIndexOrgSelect
*/
public currentLayoutModel: any;
/**
* 当前容器类名
*
* @memberof AppIndexOrgSelect
*/
get curClassName() {
return {
'app-index-org-select': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
}
/**
* 当前容器样式
*
* @memberof AppIndexOrgSelect
*/
get curStyle() {
if (this.currentLayoutModel) {
return this.currentLayoutModel.getElementStyle();
}
return '';
}
/**
* Vue生命周期 --- created
*
* @memberof AppIndexOrgSelect
*/
created() {
this.currentLayoutModel = this.layoutModelDetails[this.name];
}
}
</script>
<style lang='less'>
@import './app-index-org-select.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/index/app-index-user-info/app-index-user-info.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<app-user></app-user>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({})
export default class AppIndexUserInfo extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppIndexUserInfo
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppIndexUserInfo
*/
@Prop() public layoutModelDetails: any;
/**
* 当前布局模型
*
* @type {*}
* @memberof AppIndexUserInfo
*/
public currentLayoutModel: any;
/**
* 当前容器类名
*
* @memberof AppIndexUserInfo
*/
get curClassName() {
return {
'app-index-user-info': true,
[this.name]: true,
[this.currentLayoutModel.sysCss]: this.currentLayoutModel.sysCss ? true : false
}
}
/**
* 当前容器样式
*
* @memberof AppIndexUserInfo
*/
get curStyle() {
if (this.currentLayoutModel) {
return this.currentLayoutModel.getElementStyle();
}
return '';
}
/**
* Vue生命周期 --- created
*
* @memberof AppIndexUserInfo
*/
created() {
this.currentLayoutModel = this.layoutModelDetails[this.name];
}
}
</script>
<style lang='less'>
@import './app-index-user-info.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/interactive/app-preset-button/app-preset-button.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-preset-button {
height: 40px;
width: 100%;
.ivu-btn {
width: 100%;
height: 100%;
}
.ivu-button {
font-size: 12px;
>span {
display: flex;
align-items: center;
justify-content: center;
}
.button-content {
display: flex;
&.left {
justify-content: flex-start;
align-items: center;
.icon+.caption {
padding-left: 6px;
}
}
&.right {
flex-direction: row-reverse;
justify-content: flex-start;
align-items: center;
.icon+.caption {
padding-right: 6px;
}
}
&.top {
flex-direction: column;
justify-content: flex-start;
}
&.bottom {
flex-direction: column-reverse;
justify-content: flex-start;
}
}
}
.ivu-btn-loading {
display: flex;
line-height: 2;
.ivu-icon-ios-loading {
line-height: 2;
}
}
}
\ No newline at end of file
app_Web/src/components/layout-element/interactive/app-preset-button/app-preset-button.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<i-button
:type="buttonType"
:disabled="disabled"
:title="tooltip"
:loading="loading"
:ghost="buttonGhost"
@click="handleClick">
<div :class="['button-content', iconAlign.toLowerCase()]">
<span v-if="cssClass || imagePath" class="icon">
<i v-if="cssClass" :class="cssClass" />
<img v-else :src="imagePath" />
</span>
<span v-if="showCaption" class="caption">{{ caption }}</span>
</div>
</i-button>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPresetButton extends Vue {
/**
* 按钮name
*
* @type {any}
* @memberof AppPresetButton
*/
@Prop() public name!: string;
/**
* 显示提示
*
* @memberof AppPresetButton
*/
@Prop() public tooltip?: string;
/**
* 标题
*
* @memberof AppPresetButton
*/
@Prop() public caption?: string;
/**
* 加载状态
*
* @memberof AppPresetButton
*/
@Prop({ default: false }) public loading?: boolean;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppPresetButton
*/
@Prop() public layoutModelDetails: any;
/**
* 显示标题
*
* @memberof AppPresetButton
*/
get showCaption() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.isShowCaption;
}
/**
* 类名
*
* @memberof AppPresetButton
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-button ${this.name} ${layoutModel.sysCss}`;
}
/**
* 图片路径
*
* @memberof AppPresetButton
*/
get imagePath() {
const layoutModel = this.layoutModelDetails[this.name];
let imagePath = '';
if (layoutModel.sysImage) {
imagePath = layoutModel.sysImage.imagePath;
} else if (layoutModel.uiAction) {
imagePath = layoutModel.uiAction.imagePath;
}
return imagePath;
}
/**
* 图标
*
* @memberof AppPresetButton
*/
get cssClass() {
const layoutModel = this.layoutModelDetails[this.name];
let cssClass = '';
if (layoutModel.sysImage) {
cssClass = layoutModel.sysImage.iconcls;
} else if (layoutModel.uiAction) {
cssClass = layoutModel.uiAction.iconcls;
}
return cssClass;
}
/**
* 当前容器样式
*
* @memberof AppPresetButton
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 禁用
*
* @memberof AppPresetButton
*/
get disabled(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.disabled;
}
/**
* 按钮类型
*
* @memberof AppPresetButton
*/
get buttonType() {
const layoutModel = this.layoutModelDetails[this.name];
if (Object.is(layoutModel.renderMode, 'LINK')) {
return 'text';
} else {
if (
Object.is(layoutModel.buttonStyle, 'DEFAULT') ||
Object.is(layoutModel.buttonStyle, 'STYLE2') ||
Object.is(layoutModel.buttonStyle, 'STYLE3') ||
Object.is(layoutModel.buttonStyle, 'STYLE4')
) {
return 'default';
} else if (Object.is(layoutModel.buttonStyle, 'DANGER')) {
return 'error';
} else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
return 'primary';
} else {
return layoutModel.buttonStyle.toLowerCase();
}
}
}
/**
* 图标方向
*
* @memberof AppPresetButton
*/
get iconAlign() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.iconAlign || 'LEFT';
}
/**
* 按钮幽灵属性，使按钮背景透明
*
* @memberof AppPresetButton
*/
get buttonGhost() {
const layoutModel = this.layoutModelDetails[this.name];
return Object.is(layoutModel.buttonStyle, 'INVERSE');
}
/**
* 点击按钮
*
* @param {*} event
* @memberof AppPresetButton
*/
public handleClick(event: any) {
this.$emit('itemClick', this.name);
}
}
</script>
<style lang='less'>
@import './app-preset-button.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-preset-qrcode {
width: 100%;
height: 100%;
.ibiz-qr-code {
width: 100%;
height: 100%;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/interactive/app-preset-qrcode/app-preset-qrcode.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<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;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppPresetQrCode
*/
@Prop() public layoutModelDetails: any;
/**
* 类名
*
* @memberof AppPresetQrCode
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-qrcode ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*
* @memberof AppPresetQrCode
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 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_Web/src/components/layout-element/interactive/app-preset-switch/app-preset-switch.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-preset-switch {
min-width: 40px;
height: 100%;
}
\ No newline at end of file
app_Web/src/components/layout-element/interactive/app-preset-switch/app-preset-switch.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<el-switch :class="curClassName" :style="curStyle" 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() public layoutModelDetails: any;
/**
* 类名
*
* @memberof AppPresetSwitch
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-switch ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*
* @memberof AppPresetSwitch
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 禁用
*
* @memberof AppPresetSwitch
*/
get disabled(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.disabled;
}
/**
* 获取开关状态
*
* @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_Web/src/components/layout-element/interactive/app-preset-text-input/app-preset-text-input.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-preset-text-input {
width: 100%;
height: 32px;
.el-input,
.el-input__inner {
width: 100%;
height: 32px;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/interactive/app-preset-text-input/app-preset-text-input.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<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 {*}
* @memberof AppPresetSwitch
*/
@Prop() public layoutModelDetails: any;
/**
* 类名
*
* @memberof AppPresetSwitch
*/
get curClassName() {
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-text-input ${this.name} ${layoutModel.sysCss}`;
}
/**
* 禁用
*
* @memberof AppPresetSwitch
*/
get disabled() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.disabled;
}
/**
* 当前容器样式
*
* @memberof AppPresetSwitch
*/
get curStyle() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 占位提示
*
* @memberof AppPresetSwitch
*/
get placeholder() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.placeholder || '';
}
/**
* 类名
*
* @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
app_Web/src/components/layout-element/login/app-login-button/app-login-button.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-login-button {
height: 40px;
width: 100%;
.ivu-btn {
width: 100%;
height: 100%;
}
.ivu-btn-text {
color: #1890ff;
border-color: transparent;
background: transparent;
box-shadow: none;
}
.fa {
margin-right: 8px;
}
img {
height: 16px;
width: 16px;
margin-right: 8px;
vertical-align: middle;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/login/app-login-button/app-login-button.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<i-button
@click="handleClick"
:disabled="disabled"
:title="curTooltip"
:type="buttonType">
<div :class="['button-content', iconAlign.toLowerCase()]">
<span v-if="cssClass || imagePath" class="icon">
<i v-if="cssClass" :class="cssClass" />
<img v-else :src="imagePath" />
</span>
<span v-if="showCaption" class="caption">{{ curCaption }}</span>
</div>
</i-button>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class AppLoginButton extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppLoginButton
*/
@Prop() public name!: string;
/**
* 模型
*
* @type {any}
* @memberof AppLoginButton
*/
@Prop() public layoutModelDetails: any;
/**
* 类型
*
* @type {string}
* @memberof AppLoginButton
*/
@Prop() public defaultStyle?: string;
/**
* 加载状态
*
* @memberof AppLoginButton
*/
@Prop({ default: false }) public loading?: boolean;
/**
* 标题
*
* @memberof AppLoginButton
*/
get curCaption() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.caption;
}
/**
* 提示信息
*
* @memberof AppLoginButton
*/
get curTooltip() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.tooltip;
}
/**
* 显示标题
*
* @memberof AppLoginButton
*/
get showCaption() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.isShowCaption;
}
/**
* 当前按钮类型
*
* @type {string}
* @memberof AppLoginButton
*/
get buttonType(): string {
const layoutModel = this.layoutModelDetails[this.name];
if (layoutModel.renderMode == 'LINK') {
return 'text';
} else if (layoutModel.buttonStyle != "DEFAULT" && this.defaultStyle) {
return this.defaultStyle;
} else {
if (
Object.is(layoutModel.buttonStyle, 'DEFAULT') ||
Object.is(layoutModel.buttonStyle, 'STYLE2') ||
Object.is(layoutModel.buttonStyle, 'STYLE3') ||
Object.is(layoutModel.buttonStyle, 'STYLE4')
) {
return 'default';
} else if (Object.is(layoutModel.buttonStyle, 'DANGER')) {
return 'error';
} else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
return 'primary';
} else {
return layoutModel.buttonStyle.toLowerCase();
}
}
}
/**
* 当前容器样式
*
* @memberof AppLoginButton
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 禁用
*
* @memberof AppLoginButton
*/
get disabled(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.disabled;
}
/**
* 类名
*
* @memberof AppLoginButton
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-button ${this.name} ${layoutModel.sysCss}`;
}
/**
* 图片路径
*
* @memberof AppLoginButton
*/
get imagePath() {
const layoutModel = this.layoutModelDetails[this.name];
let imagePath = '';
if (layoutModel.sysImage) {
imagePath = layoutModel.sysImage.imagePath;
} else if (layoutModel.uiAction) {
imagePath = layoutModel.uiAction.imagePath;
}
return imagePath;
}
/**
* 图标
*
* @memberof AppLoginButton
*/
get cssClass() {
const layoutModel = this.layoutModelDetails[this.name];
let cssClass = '';
if (layoutModel.sysImage) {
cssClass = layoutModel.sysImage.iconcls;
} else if (layoutModel.uiAction) {
cssClass = layoutModel.uiAction.iconcls;
}
return cssClass;
}
/**
* 图标方向
*
* @memberof AppLoginButton
*/
get iconAlign() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.iconAlign || 'LEFT';
}
/**
* 按钮幽灵属性，使按钮背景透明
*
* @memberof AppLoginButton
*/
get buttonGhost() {
const layoutModel = this.layoutModelDetails[this.name];
return Object.is(layoutModel.buttonStyle, 'INVERSE');
}
/**
* 处理点击
*
* @type {string}
* @memberof AppLoginButton
*/
public handleClick() {
this.$emit("itemClick", this.name);
}
}
</script>
<style lang="less">
@import "./app-login-button.less";
</style>
app_Web/src/components/layout-element/login/app-login-captcha/app-login-captcha.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<auth-puzzle-vcode :show="show" @success="onSuccess" @fail="onFail" />
<i-button :type="type" @click="executeOpen">验证</i-button>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import AuthPuzzleVcode from "./vue-puzzle-code/vue-puzzle-code.vue";
@Component({
components: {
"auth-puzzle-vcode": AuthPuzzleVcode,
},
})
export default class AppLoginCaptcha extends Vue {
/**
* 模型
*
* @type {string}
* @memberof AppLoginCaptcha
*/
@Prop() public layoutModelDetails: any;
/**
* 值
*
* @type {string}
* @memberof AppLoginCaptcha
*/
@Prop() public value!: string;
/**
* 名称
*
* @type {string}
* @memberof AppLoginCaptcha
*/
@Prop() public name!: string;
/**
* 当前容器样式
*
* @memberof AppLoginCaptcha
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 类名
*
* @memberof AppLoginCaptcha
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-captcha ${this.name} ${layoutModel.sysCss}`;
}
/**
* 是否显示
*/
public show: boolean = false;
/**
* 按钮类型
*/
public type: string = 'default';
public created() {
if (this.value) {
this.type = 'success';
}
}
/**
* 打开
*/
public executeOpen() {
this.show = true;
}
/**
* 成功
*/
public onSuccess() {
this.show = false;
this.type = 'success';
this.$emit("valueChange", { name: this.name, value: true});
}
/**
* 失败
*/
public onFail() {
this.$emit("valueChange", { name: this.name, value: false});
}
}
</script>
<style lang="less">
.app-login-captcha {
height: 40px;
width: 100%;
.ivu-btn {
width: 100%;
height: 100%;
&:hover {
border: 1px solid #dcdee2;
color: #515a6e;
}
}
}
</style>
app_Web/src/components/layout-element/login/app-login-captcha/vue-puzzle-code/vue-puzzle-code.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.vue-puzzle-vcode {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
&.show_ {
opacity: 1;
pointer-events: auto;
}
}
.vue-auth-box_ {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: #fff;
user-select: none;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
.auth-body_ {
position: relative;
overflow: hidden;
border-radius: 3px;
.loading-box_ {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 20;
opacity: 1;
transition: opacity 200ms;
display: flex;
align-items: center;
justify-content: center;
&.hide_ {
opacity: 0;
pointer-events: none;
.loading-gif_ {
span {
animation-play-state: paused;
}
}
}
.loading-gif_ {
flex: none;
height: 5px;
line-height: 0;
@keyframes load {
0% {
opacity: 1;
transform: scale(1.3);
}
100% {
opacity: 0.2;
transform: scale(0.3);
}
}
span {
display: inline-block;
width: 5px;
height: 100%;
margin-left: 2px;
border-radius: 50%;
background-color: #888;
animation: load 1.04s ease infinite;
&:nth-child(1) {
margin-left: 0;
}
&:nth-child(2) {
animation-delay: 0.13s;
}
&:nth-child(3) {
animation-delay: 0.26s;
}
&:nth-child(4) {
animation-delay: 0.39s;
}
&:nth-child(5) {
animation-delay: 0.52s;
}
}
}
}
.info-box_ {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 24px;
line-height: 24px;
text-align: center;
overflow: hidden;
font-size: 13px;
background-color: #83ce3f;
opacity: 0;
transform: translateY(24px);
transition: all 200ms;
color: #fff;
z-index: 10;
&.show {
opacity: 0.95;
transform: translateY(0);
}
&.fail {
background-color: #ce594b;
}
}
.auth-canvas2_ {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 100%;
z-index: 2;
}
.auth-canvas3_ {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 600ms;
z-index: 3;
&.show {
opacity: 1;
}
}
.flash_ {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
z-index: 3;
&.show {
transition: transform 600ms;
}
}
.reset_ {
position: absolute;
top: 2px;
right: 2px;
width: 35px;
height: auto;
z-index: 12;
cursor: pointer;
transition: transform 200ms;
transform: rotate(0deg);
&:hover {
transform: rotate(-90deg);
}
}
}
.auth-control_ {
.range-box {
position: relative;
width: 100%;
background-color: #eef1f8;
margin-top: 20px;
border-radius: 3px;
box-shadow: 0 0 8px rgba(240, 240, 240, 0.6) inset;
.range-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
color: #b7bcd1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
width: 100%;
}
.range-slider {
position: absolute;
height: 100%;
width: 50px;
background-color: rgba(106, 160, 255, 0.8);
border-radius: 3px;
.range-btn {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
right: 0;
width: 50px;
height: 100%;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 4px #ccc;
cursor: pointer;
& > div {
width: 0;
height: 40%;
transition: all 200ms;
&:nth-child(2) {
margin: 0 4px;
}
border: solid 1px #6aa0ff;
}
&:hover,
&.isDown {
& > div:first-child {
border: solid 4px transparent;
height: 0;
border-right-color: #6aa0ff;
}
& > div:nth-child(2) {
border-width: 3px;
height: 0;
border-radius: 3px;
margin: 0 6px;
border-right-color: #6aa0ff;
}
& > div:nth-child(3) {
border: solid 4px transparent;
height: 0;
border-left-color: #6aa0ff;
}
}
}
}
}
}
}
.vue-puzzle-overflow {
overflow: hidden !important;
}
\ No newline at end of file
app_Web/src/components/layout-element/login/app-login-input/app-login-input.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-login-input {
.ivu-input-wrapper {
width: 100%;
height: 100%;
}
.ivu-input {
height: 100%;
width: 100%;
}
.ivu-input-prefix {
display: flex;
align-items: center;
justify-content: center;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/login/app-login-input/app-login-input.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<i-input
size='large'
:prefix='defaultIcon'
v-model="curValue"
:type="defaultType"
:disabled="disabled"
:readonly="readonly"
:placeholder="curCaption">
</i-input>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({
})
export default class AppLoginInput extends Vue {
/**
* 模型
*
* @type {any}
* @memberof AppLoginInput
*/
@Prop() public layoutModelDetails: any;
/**
* 值
*
* @type {string}
* @memberof AppLoginInput
*/
@Prop() public value!: string;
/**
* 名称
*
* @type {string}
* @memberof AppLoginInput
*/
@Prop() public name!: string;
/**
* 默认图标
*
* @type {string}
* @memberof AppLoginInput
*/
@Prop() public defaultIcon?: string;
/**
* 默认类型
*
* @type {string}
* @memberof AppLoginInput
*/
@Prop() public defaultType?: string;
/**
* 标题
*
* @memberof AppLoginInput
*/
get curCaption() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.caption;
}
/**
* 当前容器样式
*
* @memberof AppLoginInput
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 类名
*
* @memberof AppLoginInput
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-input ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前值
*
* @type {any}
* @memberof AppLoginInput
*/
get curValue() {
return this.value;
}
/**
* 值变化
*
* @memberof AppPresetTextInput
*/
set curValue(val: any) {
this.$emit('valueChange', { name: this.name, value: val });
}
/**
* 禁用
*
* @memberof AppPresetSwitch
*/
get disabled() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.disabled;
}
/**
* 只读
*
* @memberof AppPresetSwitch
*/
get readonly() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.readonly;
}
}
</script>
<style lang="less">
@import "./app-login-input.less";
</style>
\ No newline at end of file
app_Web/src/components/layout-element/login/app-login-message/app-login-message.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-login-message{
height: 40px;
width: 100%;
.ivu-alert{
width: 100%;
height: 100%;
display: flex;
align-items: center;
background-color: rgb(255, 225, 225);
.ivu-alert-icon{
position: unset;
margin-right: 5px;
}
}
.ivu-alert-error,
.ivu-alert-with-icon{
padding-left: 10px;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/login/app-login-message/app-login-message.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<alert v-show="value" type="error" show-icon>{{ value }}</alert>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({})
export default class AppLoginMessage extends Vue {
/**
* 模型
*
* @type {any}
* @memberof AppLoginMessage
*/
@Prop() public layoutModelDetails: any;
/**
* 值
*
* @type {string}
* @memberof AppLoginMessage
*/
@Prop() public value!: string;
/**
* 名称
*
* @type {string}
* @memberof AppLoginMessage
*/
@Prop() public name!: string;
/**
* 当前容器样式
*
* @memberof AppLoginMessage
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 类名
*
* @memberof AppLoginMessage
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-message ${this.name} ${layoutModel.sysCss}`;
}
}
</script>
<style lang='less'>
@import "./app-login-message.less";
</style>
\ No newline at end of file
app_Web/src/components/layout-element/login/app-login-note-verify/app-login-note-verify.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-login-note-verify{
.content {
display: flex;
margin: 5px 0;
.el-button {
border: 1px solid #dcdee2;
margin-left: 10px;
color: #606266;
&:hover {
border: 1px solid #dcdee2;
}
&.is-disabled {
background-color: #f5f5f5;
color: #00000040;
}
}
}
.code{
padding-top: 8px;
}
.ivu-alert-error {
background-color: rgb(255, 225, 225);
}
}
\ No newline at end of file
app_Web/src/components/layout-element/login/app-login-note-verify/app-login-note-verify.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<div class="content">
<i-input
size="default"
type="text"
v-model="phoneNumber"
:placeholder="$t('components.login.phoneplaceholder')"
@on-blur="veriPhoneNumber"
></i-input>
<el-button :disabled="disabled" size="mini" @click="getVeriCode()">{{
disabled ? `${delay}s ${$t("components.login.getcodeafter")}` : `${$t("components.login.getcode")}`
}}</el-button>
</div>
<alert v-show="phoneError" type="error">电话号码格式错误</alert>
<div class="code" v-show="this.show">
<i-input
size="default"
type="text"
:value="currentValue"
@input="codeChange"
:placeholder="$t('components.login.codeplaceholder')"
></i-input>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class AppLoginNoteVerify extends Vue {
/**
* 模型
*
* @type {any}
* @memberof AppLoginNoteVerify
*/
@Prop() public layoutModelDetails: any;
/**
* 值
*
* @type {string}
* @memberof AppLoginNoteVerify
*/
@Prop() public value!: string;
/**
* 名称
*
* @type {string}
* @memberof AppLoginNoteVerify
*/
@Prop() public name!: string;
/**
*验证码当前值
*
* @type {string}
* @memberof AppLoginNoteVerify
*/
get currentValue(): string {
return this.value;
}
/**
* 手机号
*
* @type {*}
* @memberof AppLoginNoteVerify
*/
public phoneNumber: string = "";
/**
* 错误提示
* @type {*}
* @memberof AppLoginNoteVerify
*/
public phoneError = false;
/**
* 是否禁用获取验证码按钮
*
* @type {boolean}
* @memberof AppLoginNoteVerify
*/
public disabled: boolean = false;
/**
* 显示验证码输入框
*
* @type {boolean}
* @memberof AppLoginNoteVerify
*/
public show: boolean = false;
/**
* 延迟
*
* @type {number}
* @memberof AppLoginNoteVerify
*/
public delay: number = 60;
/**
* 定时器
*
* @type {any}
* @memberof AppLoginNoteVerify
*/
public timer: any = null;
/**
* 当前容器样式
*
* @memberof AppLoginNoteVerify
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 类名
*
* @memberof AppLoginNoteVerify
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-note-verify ${this.name} ${layoutModel.sysCss}`;
}
/**
* @description 验证码输入变化
* @memberof AppLoginNoteVerify
*/
public codeChange(value: string) {
this.$emit("valueChange", { name: this.name, value: value });
}
/**
* @description 校验手机号
* @memberof AppLoginNoteVerify
*/
public veriPhoneNumber(): boolean {
this.phoneError = !/^1[3-9]\d{9}$/.test(this.phoneNumber);
return this.phoneError;
}
/**
* @description 设置延迟时间
* @memberof AppLoginNoteVerify
*/
public setDelay() {
this.timer = setInterval(() => {
if (this.delay > 0) {
this.delay--;
} else {
this.delay = 60;
this.disabled = false;
clearInterval(this.timer);
}
}, 1000)
}
/**
* @description 获取验证码
* @memberof AppLoginNoteVerify
*/
public getVeriCode() {
if (this.phoneError) return;
// todo 获取验证码
this.show = true;
this.disabled = true;
this.setDelay();
}
}
</script>
<style lang="less">
@import "./app-login-note-verify.less";
</style>
app_Web/src/components/layout-element/login/app-login-org/app-login-org.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-login-org {
height: 40px;
width: 100%;
.ivu-select {
height: 100%;
width: 100%;
}
.ivu-select-selection {
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/login/app-login-org/app-login-org.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<Select v-model="curKey">
<Option v-for="(item, index) in items" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</div>
</template>
<script lang='ts'>
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppLoginOrg extends Vue {
/**
* 名称
*
* @type {*}
* @memberof AppLoginOrg
*/
@Prop() public name!: string;
/**
* 输入值
*
* @type {*}
* @memberof AppLoginOrg
*/
@Prop() public value!: string;
/**
* 模型
*
* @type {*}
* @memberof AppLoginOrg
*/
@Prop() public layoutModelDetails: any;
/**
* 当前值
*
* @type {string}
* @memberof AppLoginOrg
*/
get curKey() {
if (this.value) {
return this.value;
} else {
return '';
}
}
set curKey(value: string) {
this.$emit('valueChange', { name: this.name, value: value });
}
/**
* 组织部门名称数组
*
* @type {Array<any>}
* @memberof AppLoginOrg
*/
public items: Array<any> = [];
/**
* 当前容器样式
*
* @memberof AppLoginOrg
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 类名
*
* @memberof AppLoginOrg
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-org ${this.name} ${layoutModel.sysCss}`;
}
/**
* 组件初始化数据，vue生命周期
*
* @memberof AppLoginOrg
*/
public created() {
this.getOrgData();
}
/**
* 获取数据
*
* @memberof AppLoginOrg
*/
public async getOrgData() {
// todo
console.log('获取数据暂未实现');
}
}
</script>
<style lang="less">
@import './app-login-org.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/login/app-login-third/app-login-third.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-login-third {
text-align: center;
.app-login-third__title {
padding: 10px 0;
}
.app-login-third__content {
display: flex;
align-items: center;
justify-content: center;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/login/app-login-third/app-login-third.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<div class="app-login-third__title">{{ $t("components.login.other") }}</div>
<div class="app-login-third__content">
<div class="sign-btn" @click="handleThirdLogin('DINGDING')">
<img class="third-svg-container" src="@/assets/img/dingding.svg" />
</div>
<div class="sign-btn" @click="handleThirdLogin('WXWORK')">
<img class="third-svg-container" src="@/assets/img/qiyeweixin.svg" />
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({})
export default class AppThirdLogin extends Vue {
/**
* 模型
*
* @type {any}
* @memberof AppThirdLogin
*/
@Prop() public layoutModelDetails: any;
/**
* 值
*
* @type {string}
* @memberof AppThirdLogin
*/
@Prop() public value!: string;
/**
* 名称
*
* @type {string}
* @memberof AppThirdLogin
*/
@Prop() public name!: string;
/**
* 当前容器样式
*
* @memberof AppThirdLogin
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 类名
*
* @memberof AppThirdLogin
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-login-input ${this.name} ${layoutModel.sysCss}`;
}
/**
* 处理第三方登录
*
* @param type 登录类型
* @memberof AppThirdLogin
*/
handleThirdLogin(type: string) {
switch (type) {
case "DINGDING":
this.dingTalkHandleClick();
break;
case "WXWORK":
this.wxWorkHandleClick();
break;
default:
console.warn(`暂不支持${type}登录`);
break;
}
}
/**
* 钉钉登录
*
* @memberof AppThirdLogin
*/
async dingTalkHandleClick() {
}
/**
* 微信登录
*
* @memberof AppThirdLogin
*/
async wxWorkHandleClick() {
}
}
</script>
<style lang="less">
@import "./app-login-third.less";
</style>
app_Web/src/components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="['app-field-image-dynamic', model.sysCss]" :style="containerStyle">
<img :style="model.sysCss" :src="imgUrl" />
</div>
</template>
<script lang = 'ts'>
import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
import { ImgurlBase64 } from '@/utils';
import { Environment } from "@/environments/environment";
@Component({})
export default class AppFieldImageDynamic extends Vue {
/**
* 名称
*
* @type {*}
* @memberof AppRawItemImage
*/
@Prop() public name!: string;
/**
* 模型
*
* @type {*}
* @memberof AppRawItemImage
*/
@Prop() public layoutModelDetails!: any;
/**
* 输入值
*
* @type {string}
* @memberof AppFieldImageDynamic
*/
@Prop() public value: any;
/**
* 模型
*
* @type {*}
* @memberof AppFieldImageDynamic
*/
public model:any = null;
/**
* 动态图片路径
*
* @memberof AppFieldImageDynamic
*/
protected dynaImgUrl: string = '';
/**
* 下载文件路径
*
* @memberof AppFieldImageDynamic
*/
public downloadUrl = Environment.ExportFile;
/**
* 容器样式
*
* @type {any}
* @memberof AppFieldImageDynamic
*/
public containerStyle: any = null;
/**
* 图片路径
*
* @memberof AppFieldImageDynamic
*/
get imgUrl(): string {
return this.dynaImgUrl;
}
created() {
if (this.layoutModelDetails && this.name) {
this.model = this.layoutModelDetails[this.name];
this.containerStyle = this.model.getElementStyle();
}
this.handleDynaImg();
}
/**
* 处理动态图片
*
* @memberof AppFieldImageDynamic
*/
protected handleDynaImg() {
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">
@import './app-field-image-dynamic.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-rawitem-carousel{
width: 100%;
.carsouel-container{
.carousel-img-item{
width: 100%;
height: 100%;
position: relative;
text-align: center;
>img,i{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.app-carouse-img{
object-fit: contain;
width: 100%;
height: 100%;
}
}
}
}
\ No newline at end of file
app_Web/src/components/layout-element/media/app-rawitem-carousel/app-rawitem-carousel.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="['app-rawitem-carousel',model.sysCss]" :style="containerStyle" >
<el-carousel class="carsouel-container"
height="150px"
indicator-position="outside"
:autoplay="false"
:interval="swipeConfig.interval"
>
<el-carousel-item v-for="item in swipeData" :key="item.key">
<div class="carousel-img-item">
<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>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
@Component({})
export default class AppCarousel extends Vue {
/**
* 模型
*
* @type {*}
* @memberof AppRawItemImage
*/
@Prop() public layoutModelDetails!: any;
/**
* 父项所有数据
*
* @type {*}
* @memberof AppCarousel
*/
@Prop() public data?: any;
/**
* @description 轮播图数据
* @param {*}
* @memberof AppCarousel
*/
@Prop() public value?: any;
/**
* 模型
*
* @type {*}
* @memberof AppCarousel
*/
public model: any;
/**
* 名称
*
* @type {string}
* @memberof AppCarousel
*/
@Prop() public name!: string;
/**
* 类型
*
* @type {string}
* @memberof AppCarousel
*/
@Prop() public type?: string;
/**
* @description 轮播图图片所有项数据
* @memberof AppCarousel
*/
public swipeData: any[] = [];
/**
* @description 轮播图配置
* @memberof AppCarousel
*/
public swipeConfig: any = {};
/**
* 容器样式
*
* @type {any}
* @memberof AppCarousel
*/
public containerStyle: any = null;
/**
* data值变化
*
* @param {*} newVal
* @param {*} oldVal
* @memberof AppCarousel
*/
@Watch('value', { immediate: true, deep: true })
public onDataChange(newVal: any, oldVal: any) {
if (newVal) {
this.handleSwipData(newVal);
}
}
/**
* @description 构建之前
* @memberof AppCarousel
*/
created() {
if (this.layoutModelDetails && this.name) {
this.model = this.layoutModelDetails[this.name];
this.containerStyle = this.model.getElementStyle();
}
//处理轮播图-动态数据
if (this.type === "FIELD_CAROUSEL") {
if (this.value && typeof this.value === 'string') {
const swipeData = JSON.parse(this.value);
this.handleSwipData(swipeData);
}
} else if (this.type === "STATIC_CAROUSEL") {
//处理轮播图-静态数据
this.handleSwipData(this.value);
}
}
/**
* @description 处理轮播图数据
* @memberof AppCarousel
*/
private handleSwipData(data: any) {
if (data && data.length > 0) {
const configItem = data.findIndex((item: any) =>
Object.is(item.key, "autoplay")
);
if (configItem > -1) {
// 有配置参数就截掉配置参数
this.swipeData = data.slice(0, -2);
this.swipeConfig = this.setSwipeConfig(data.slice(-2));
} else {
this.swipeData = data;
this.swipeConfig = this.setSwipeConfig(data);
}
}
}
/**
* @description 设置轮播图配置
* @param {*}
* @memberof AppRawItem
*/
private setSwipeConfig(data: any) {
const autoPlay: any =
data.find((item: any) => Object.is(item.key, "autoplay")) || {};
const timeSpan: any =
data.find((item: any) => Object.is(item.key, "timespan")) || {};
let isauto = false;
let timespan = 0;
if (autoPlay.value && Object.is(autoPlay.value, "1")) {
isauto = true;
}
if (timeSpan.value) {
timespan = Number(timeSpan.value);
}
return {
isAuto: isauto,
timeSpan: timespan,
};
}
/**
* img src错误
*
* @param {*} $event
* @memberof AppCarousel
*/
imgError($event: any) {
let img = $event.srcElement;
if (img && !img.imgSign) {
if (img && !img.imgSign) {
img.src = 'assets/img/404.png';
img.imgSign = true;
img.imgSign = true;
}
img.onerror = null;
}
}
}
</script>
<style lang='less'>
@import './app-rawitem-carousel.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/media/app-rawitem-image/app-rawitem-image.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-rawitem-image{
margin: auto;
height: 100%;
>img{
width: auto;
height: 100%;
max-width: 100%;
height: 360px;
object-fit: contain;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/media/app-rawitem-image/app-rawitem-image.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="['app-rawitem-image', model.sysCss]" :style="containerStyle">
<img v-if="imgUrl" :src="imgUrl" />
<i v-else :class="imageClass ? imageClass : ''"></i>
</div>
</template>
<script lang = 'ts'>
import { PanelFieldModel } from '@/model/panel-detail';
import { Vue, Component, Prop, Watch, Provide } from 'vue-property-decorator';
@Component({})
export default class AppRawItemImage extends Vue {
/**
* 名称
*
* @type {*}
* @memberof AppRawItemImage
*/
@Prop() public name!: string;
/**
* 模型
*
* @type {*}
* @memberof AppRawItemImage
*/
@Prop() public layoutModelDetails!: any;
/**
* 图片地址
*
* @type {string}
* @memberof AppRawItemImage
*/
@Prop() public imgUrl?: string;
/**
* 图标
*
* @type {string}
* @memberof AppRawItemImage
*/
@Prop() public imageClass?: string;
/**
* 容器样式
*
* @type {any}
* @memberof AppRawItemImage
*/
public containerStyle: any = null;
/**
* 容器样式
*
* @type {any}
* @memberof AppRawItemImage
*/
public model: any = null;
created() {
if (this.layoutModelDetails && this.name) {
this.model = this.layoutModelDetails[this.name];
this.containerStyle = this.model.getElementStyle();
}
}
}
</script>
<style lang = "less">
@import './app-rawitem-image.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/media/app-rawitem-video/app-rawitem-video.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-rawitem-video{
width: 600px;
height: auto;
max-width: 100%;
min-height: 300px;
border: 1px solid gray;
>video{
width: 100%;
height: 100%;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/media/app-rawitem-video/app-rawitem-video.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="['app-rawitem-video',model.sysCss]" :style="containerStyle">
<video :src="playerParams.path" :autoplay="playerParams.autoplay" :controls="playerParams.showcontrols"
:loop="playerParams.replay" :muted="playerParams.mute">
<source :src="playerParams.path" type="video/mp4">
<source :src="playerParams.path" type="video/ogg">
<source :src="playerParams.path" type="video/webm">
</video>
</div>
</template>
<script lang="ts">
import { Util } from '@/utils';
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({})
export default class AppRawItemVideo extends Vue {
/**
* 名称
*
* @type {*}
* @memberof AppRawItemImage
*/
@Prop() public name!: string;
/**
* 模型
*
* @type {*}
* @memberof AppRawItemImage
*/
@Prop() public layoutModelDetails!: any;
/**
* 视频播放数据
* @memberof AppRawItemVideo
*/
@Prop() public videoParmas?: any;
/**
* 模型
*
* @type {*}
* @memberof @memberof AppRawItemVideo
*/
public model: any;
/**
* 播放器唯一标识
* @memberof AppRawItemVideo
*/
public uuid: string = Util.createUUID();
/**
* 容器样式
*
* @type {any}
* @memberof AppRawItemVideo
*/
public containerStyle: any = null;
/**
* 视频播放参数
*
* @type {any}
* @memberof AppRawItemVideo
*/
public playerParams = {
id: this.uuid,
height: '100%',
width: '100%',
path: "",
mute: 0.8,
autoplay: false,
replay: 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();
}
/**
* 处理静态视频播放
*
* @memberof AppRawItemVideo
*/
protected handleStaticVideo() {
if (this.videoParmas && this.videoParmas.length > 0) {
const rawParams: any = {};
this.videoParmas.forEach((param: any) => {
rawParams[param.key] = param.value;
})
Object.assign(this.playerParams, rawParams);
}
}
}
</script>
<style lang='less'>
@import "./app-rawitem-video.less";
</style>
app_Web/src/components/layout-element/text/app-preset-caption/app-preset-caption.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-preset-caption {
padding: 8px;
.caption-info {
font-weight: 600;
font-family: "Microsoft YaHei";
font-size: 14px;
}
}
\ No newline at end of file
app_Web/src/components/layout-element/text/app-preset-caption/app-preset-caption.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<slot></slot>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class AppPresetCaption extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppPresetCaption
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppPresetCaption
*/
@Prop() public layoutModelDetails: any;
/**
* 类名
*
* @memberof AppPresetCaption
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-caption ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*
* @memberof AppPresetCaption
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
}
</script>
<style lang='less'>
@import "./app-preset-caption.less";
</style>
\ No newline at end of file
app_Web/src/components/layout-element/text/app-preset-text/app-preset-text.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-preset-text {
width: 100%;
height: 100%;
}
\ No newline at end of file
app_Web/src/components/layout-element/text/app-preset-text/app-preset-text.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<div :class="curClassName" :style="curStyle">
<!-- 直接内容类型 -->
<template v-if="Object.is(contentType, 'RAW')">
<template v-if="Object.is(renderMode, 'TEXT')">
<span :style="contentStyle">{{ content }}</span>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING1')">
<h1 :style="contentStyle">{{ content }}</h1>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING2')">
<h2 :style="contentStyle">{{ content }}</h2>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING3')">
<h3 :style="contentStyle">{{ content }}</h3>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING4')">
<h4 :style="contentStyle">{{ content }}</h4>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING5')">
<h5 :style="contentStyle">{{ content }}</h5>
</template>
<template v-else-if="Object.is(renderMode, 'HEADING6')">
<h6 :style="contentStyle">{{ content }}</h6>
</template>
<template v-else-if="Object.is(renderMode, 'PARAGRAPH')">
<p :style="contentStyle">{{ content }}</p>
</template>
</template>
<!-- 图片类型 -->
<template v-else-if="Object.is(contentType, 'IMAGE')">
<img :style="contentStyle" v-if="imagePath" :src="imagePath" />
<i :style="contentStyle" v-else :class="cssClass"></i>
</template>
<!-- HTML类型 -->
<template v-else-if="Object.is(contentType, 'HTML')">
<div :style="contentStyle" v-html="content" />
</template>
<!-- MARKDOWN类型 -->
<template v-else-if="Object.is(contentType, 'MARKDOWN')">
MARKDOWN暂未支持
<!-- <app-markdown-editor :style="contentStyle" mode="PREVIEWONLY" :itemValue="value"></app-markdown-editor> -->
</template>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPresetText extends Vue {
/**
* 输入值
*
* @type {*}
* @memberof AppPresetText
*/
@Prop() public value!: any;
/**
* 名称
*
* @type {string}
* @memberof AppPresetText
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppPresetTitle
*/
@Prop() public layoutModelDetails: any;
/**
* 图标
*
* @memberof AppPresetText
*/
@Prop() public imageClass?: string;
/**
* 图片路径
*
* @memberof AppPresetText
*/
get imagePath() {
const layoutModel = this.layoutModelDetails[this.name];
let imagePath = '';
if (layoutModel.sysImage) {
imagePath = layoutModel.sysImage.imagePath;
}
return imagePath;
}
/**
* 图标
*
* @memberof AppPresetTitle
*/
get cssClass() {
const layoutModel = this.layoutModelDetails[this.name];
let cssClass = '';
if (layoutModel.sysImage) {
cssClass = layoutModel.sysImage.iconcls;
}
return cssClass;
}
/**
* 内容类型
*
* @memberof AppPresetTitle
*/
get contentType() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.contentType || 'RAW';
}
/**
* 类名
*
* @memberof AppPresetTitle
*/
get curClassName() {
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*
* @memberof AppPresetTitle
*/
get curStyle() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 绘制模式
*
* @memberof AppPresetTitle
*/
get renderMode() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.renderMode || 'TEXT';
}
/**
* 内容
*
* @memberof AppPresetText
*/
get content(): string {
const layoutModel = this.layoutModelDetails[this.name];
let content = this.value;
if (layoutModel.predefinedType && layoutModel.predefinedType !== 'FIELD_TEXT_DYNAMIC') {
if (this.contentType == 'RAW') {
content = layoutModel.rawContent;
} else if (this.contentType == 'HTML') {
content = layoutModel.htmlContent;
const items = content.match(/\{{(.+?)\}}/g);
if (items) {
items.forEach((item: string) => {
content = content.replace(/\{{(.+?)\}}/, eval(item.substring(2, item.length - 2)));
});
}
content = content.replaceAll('&lt;', '<');
content = content.replaceAll('&gt;', '>');
content = content.replaceAll('&amp;nbsp;', ' ');
content = content.replaceAll('&nbsp;', ' ');
}
}
return content;
}
/**
* 内容样式
*
* @memberof AppPresetText
*/
get contentStyle(): string {
const layoutModel = this.layoutModelDetails[this.name];
let contentStyle = layoutModel.contentStyle;
if (layoutModel.predefinedType === 'STATIC_LABEL') {
contentStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
}
return contentStyle;
}
}
</script>
<style lang="less">
@import './app-preset-text.less';
</style>
\ No newline at end of file
app_Web/src/components/layout-element/text/app-preset-title/app-preset-title.less 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
.app-preset-title {
padding: 16px;
font-weight: 600;
font-size: 24px;
}
\ No newline at end of file
app_Web/src/components/layout-element/text/app-preset-title/app-preset-title.vue 已删除 100644 → 0
浏览文件 @ 9fdcc6c2
<template>
<h1 :class="curClassName" :style="curStyle">{{ curValue }}</h1>
</template>
<script lang="ts">
import { Environment } from "@/environments/environment";
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class AppPresetTitle extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppPresetTitle
*/
@Prop() public name!: string;
/**
* 布局模型详情
*
* @type {*}
* @memberof AppPresetTitle
*/
@Prop() public layoutModelDetails: any;
/**
* 类名
*
* @memberof AppPresetTitle
*/
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-title ${this.name} ${layoutModel.sysCss}`;
}
/**
* 当前容器样式
*
* @memberof AppPresetTitle
*/
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 当前值
*
* @memberof AppPresetTitle
*/
public curValue: string = '';
/**
* 初始化
*
* @memberof AppPresetTitle
*/
public created() {
this.curValue = Environment.AppTitle;
}
}
</script>
<style lang='less'>
@import './app-preset-title.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或