提交 946d5cb8 编写于 作者: Mosher's avatar Mosher

update:更新

上级 4501b454
...@@ -5,6 +5,7 @@ import { AppEmbedView } from './components/app-embed-view/app-embed-view'; ...@@ -5,6 +5,7 @@ import { AppEmbedView } from './components/app-embed-view/app-embed-view';
import AppKeepAlive from './components/app-keep-alive/app-keep-alive.vue'; import AppKeepAlive from './components/app-keep-alive/app-keep-alive.vue';
import AppMobFileList from './components/app-mob-file-list/app-mob-file-list.vue'; import AppMobFileList from './components/app-mob-file-list/app-mob-file-list.vue';
import AppWFVersionSelect from './components/app-wfversion-select/app-wfversion-select.vue';
/** /**
* Vue插件 * Vue插件
...@@ -172,6 +173,8 @@ export const AppComponents = { ...@@ -172,6 +173,8 @@ export const AppComponents = {
//标题 //标题
v.component('app-mob-title',() => import('@/components/ui-components/app-mob-title/app-mob-title.vue')); v.component('app-mob-title',() => import('@/components/ui-components/app-mob-title/app-mob-title.vue'));
//header //header
v.component('app-mob-header',() => import('@/components/ui-components/app-mob-header/app-mob-header.vue')); v.component('app-mob-header',() => import('@/components/ui-components/app-mob-header/app-mob-header.vue'));
// 工作流版本选择
v.component('app-wfversion-select', AppWFVersionSelect);
}, },
}; };
\ No newline at end of file
<template>
<div class="app-wfversion-select">
<ion-select v-model="selectValue" @ionChange="valueChange">
<template v-for="item in versionItems">
<ion-select-option :value="item[majorKey]" :key="item[majorKey]">
<span>{{ item[versionTitle] }}</span>
</ion-select-option>
</template>
</ion-select>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
@Component({})
export default class AppWFVersionSelect extends Vue {
@Prop({ default: [] })
public versionItems!: any[];
@Prop({ default: 'definitionkey' })
public majorKey!: string;
@Prop({ default: 'definitionname' })
public versionTitle?: string;
public selectValue: any;
@Watch('versionItems', {
immediate: true
})
public onVersionItemSChange(newVal: any[], oldVal: any[]) {
if (newVal.length !== 0) {
this.selectValue = newVal[0][this.majorKey];
}
}
public valueChange(event: any) {
this.$emit('valueChange', event.detail.value);
}
}
</script>
\ No newline at end of file
...@@ -166,15 +166,19 @@ export default class AppSpan extends Vue { ...@@ -166,15 +166,19 @@ export default class AppSpan extends Vue {
if(tempParam){ if(tempParam){
Object.assign(tempParam,this.queryParam); Object.assign(tempParam,this.queryParam);
} }
let response: any = await this.codeListService.getItems(this.tag, param.context,tempParam); try {
if (response) { let response: any = await this.codeListService.getItems(this.tag, param.context,tempParam);
this.items = response; if (response) {
this.setText(); this.items = response;
if (this.isCache) { this.setText();
this.isCached = true; if (this.isCache) {
this.isCached = true;
}
} else {
this.items = [];
} }
} else { } catch (error) {
this.items = []; console.warn(`代码表 --- ${this.tag} ---获取数据项失败`);
} }
} }
......
import { Subject } from 'rxjs';
import { VNode } from 'vue';
import { Prop, Vue, Component } from 'vue-property-decorator';
import { Dialog } from 'vant';
Vue.use(Dialog);
import './app-message-box.less';
@Component({})
export default class AppMessageBoxComponent extends Vue {
/**
* 类型
*
* @type { 'info' | 'success' | 'warn' | 'error' }
* @memberof AppMessageBoxComponent
*/
@Prop({ default: 'info' })
public type?: 'info' | 'success' | 'warn' | 'error';
/**
* 标题
*
* @type {string}
* @memberof AppMessageBoxComponent
*/
@Prop()
public title?: string;
/**
* 内容
*
* @type {string}
* @memberof AppMessageBoxComponent
*/
@Prop()
public content?: string;
/**
* 启用自定义底部
*
* @type {boolean}
* @memberof ModalConfirmOptions
*/
@Prop({ default: false })
public visibleCustomFooter?: boolean;
/**
* 自定义底部
*
* @type {VNode}
* @memberof ModalConfirmOptions
*/
@Prop()
public customFooter?: VNode;
/**
* 自定义类名
*
* @type {string}
* @memberof AppMessageBoxComponent
*/
@Prop()
public customClass?: string;
/**
* 自定义类名
*
* @type {string}
* @memberof AppMessageBoxComponent
*/
@Prop()
public iconClass?: string;
/**
* 是否显示右上角的关闭按钮
*
* @type {string}
* @memberof AppMessageBoxComponent
*/
@Prop({ default: false })
public showClose?: boolean;
/**
* 是否显示遮罩
*
* @type {string}
* @memberof AppMessageBoxComponent
*/
@Prop({ default: true })
public mask?: boolean;
/**
* 是否可以点击遮罩关闭
*
* @type {string}
* @memberof AppMessageBoxComponent
*/
@Prop({ default: true })
public maskClosable?: boolean;
/**
* 显示模式
*
* @type {string}
* @memberof AppMessageBoxComponent
*/
@Prop({ default: 'center' })
public showMode?: string | 'center';
/**
* 关闭回调
*
* @type {Function}
* @memberof AppMessageBoxComponent
*/
@Prop()
public onClose?: Function;
/**
* 引用对象名称
*
* @type {string}
* @memberof AppMessageBoxComponent
*/
@Prop()
public refName?: string;
@Prop({ default: false })
public showCancelButton?: boolean;
@Prop({ default: () => {
return {
'confirm-text': '确认',
'confirm-color': '#ee0a24',
'cancel-text': '取消',
'cancel-button': 'black'
}
}})
public buttonStyle!: any;
/**
* 数据传递对象
*
* @type {any}
* @memberof AppMessageBoxComponent
*/
public subject: null | Subject<any> = new Subject<any>();
/**
* 层级
*
* @type {any}
* @memberof AppMessageBoxComponent
*/
public zIndex:any = null;
/**
* 是否显示
*
* @type {boolean}
* @memberof AppMessageBoxComponent
*/
public isShow: boolean = true;
/**
* 获取显示模式类名 居中/top
*
* @memberof AppMessageBoxComponent
*/
public getClassName() {
return this.showMode === 'center'?'center':'top';
}
/**
* 获取数据传递对象
*
* @memberof AppMessageBoxComponent
*/
public getSubject(){
return this.subject;
}
/**
* 根据type计算iconClass
*
* @memberof AppMessageBoxComponent
*/
public geticonClass(){
if(this.customClass){
return this.customClass;
}
let classes = '';
switch (this.type) {
case 'info':
classes = 'comment-o';
break;
case 'success':
classes = 'checked-o';
break;
case 'warn':
classes = 'warning-o';
break;
case 'error':
classes = 'clear-o';
break;
}
return classes;
}
/**
* 关闭方法
*
* @memberof AppMessageBoxComponent
*/
public close() {
this.isShow = false;
if(this.onClose){
this.onClose(this)
}
setTimeout(() => {
document.body.removeChild(this.$el);
this.$destroy();
this.subject = null;
}, 500)
}
public confirm() {
if (this.subject) {
this.subject.next(true);
}
this.close();
}
public cancel() {
if (this.subject) {
this.subject.next(false);
}
this.close();
}
/**
* Vue生命周期mounted
*
* @memberof AppMessageBoxComponent
*/
public mounted() {
const zIndex = this.$store.getters.getZIndex();
if (zIndex) {
this.zIndex = zIndex + 100;
this.$store.commit('updateZIndex', this.zIndex);
}
if(this.visibleCustomFooter && this.customFooter){
this.$slots.customFooter = [this.customFooter];
this.$forceUpdate();
}
this.isShow = true;
}
render() {
return (
<van-dialog
value={this.isShow}
ref={this.refName}
class={[ 'app-message-box', this.customClass ? this.customClass : '' ]}
closable={this.showClose}
zIndex={this.zIndex}
overlay={this.mask}
close-on-click-overlay={this.maskClosable}
className={this.getClassName()}
show-cancel-button={this.showCancelButton}
confirm-button-text={this.buttonStyle['confirm-text']}
confirm-button-color={this.buttonStyle['confirm-color']}
cancel-button-text={this.buttonStyle['cancel-text']}
cancel-button-color={this.buttonStyle['cancel-color']}
on-colse={(event: any) => { this.close(); }}
on-confirm={ () => { this.confirm(); } }
on-cancel={ () => { this.cancel(); } }
scopedSlots={{
title: () => {
return [
<van-icon name={this.geticonClass()}></van-icon>,
this.title
]
},
default: () => {
return <div style="text-align:center" class="content">{ this.content }</div>
}
}}>
</van-dialog>
)
}
}
\ No newline at end of file
.app-message-box {
.van-dialog__header {
padding-top: 20px;
.van-icon {
padding-right: 8px;
}
}
.van-dialog__content {
padding: 10px;
}
.info {
i {
color: #2d8cf0;
}
}
.success {
i {
color: #19be6b;
}
}
.warn {
i {
color: #f90;
}
}
.error {
i {
color: #ed4014;
}
}
}
import Vue from 'vue';
import store from '../../store';
import i18n from '@/locale';
import { MessageBoxOptions } from './interface/message-box-options';
import AppMessageBoxComponent from './app-message-box-component';
// import AppMessageBoxComponent from './app-message-box.vue';
/**
* 提示信息
*
* @export
* @class AppMessageBox
*/
export class AppMessageBox {
/**
* 唯一实例
*
* @private
* @static
* @memberof AppMessageBox
*/
private static readonly instance = new AppMessageBox();
/**
* vue 实例
*
* @private
* @type {Vue}
* @memberof AppModal
*/
private vueExample!: Vue;
/**
* 引用对象
*
* @private
* @type {*}
* @memberof AppMessageBox
*/
private refs: any;
/**
* 获取唯一实例
*
* @static
* @return {*} {AppMessageBox}
* @memberof AppMessageBox
*/
public static getInstance(): AppMessageBox {
return AppMessageBox.instance;
}
/**
* 打开提示信息
*
* @param {*} options
* @return {*}
* @memberof AppMessageBox
*/
public async open(options: any): Promise<any> {
this.handleDefault(options);
return this.createVueExample(options)
}
/**
* 处理options的默认值
*
* @private
* @param {*} options
* @memberof AppMessageBox
*/
private handleDefault(options: any) {
// 标题没有时显示默认标题
if (!options.title) {
switch (options.type) {
case 'error':
options.title = '错误';
break;
case 'success':
options.title = '询问';
break;
case 'warning':
options.title = '警告';
break;
default:
options.title = '消息';
}
}
}
/**
* 创建vue 实例
*
* @private
* @param {ModalConfirmOptions} opt
* @return {*} {Subject<any>}
* @memberof AppMessageBox
*/
private createVueExample(opt: MessageBoxOptions): Promise<any> {
try {
let component = AppMessageBoxComponent;
let props = { ...opt };
const vm = new Vue({
store: store,
i18n: i18n,
render(h) {
return h(component, { props });
}
}).$mount();
this.vueExample = vm;
let app = document.getElementById("app");
console.log(vm, vm.$el, app);
if(app){
app.appendChild(vm.$el);
}
const comp: any = vm.$children[0];
let subject = comp.getSubject()
return new Promise((resolve, reject) => {
subject.subscribe((result: any) => {
resolve(result);
});
});
} catch (error) {
console.error(error);
return new Promise((resolve)=>{ resolve(false) });
}
}
/**
* 关闭
*
* @memberof AppMessageBox
*/
public close() {
if (this.refs) {
this.refs.close();
}
}
}
export * from './interface/message-box-options';
export { AppMessageBox } from './app-message-box';
\ No newline at end of file
import { VNode } from "vue";
export interface MessageBoxOptions {
/**
* 对话框类型
*
* @type {('info' | 'success' | 'warn' | 'error' | 'confirm')}
* @memberof AppModalConfirm
*/
type?: 'info' | 'success' | 'warn' | 'error';
/**
* 标题
*
* @type {string}
* @memberof AppModalConfirm
*/
title?: string;
/**
* 内容
*
* @type {string}
* @memberof AppModalConfirm
*/
content?: string;
/**
* 内容类型
*
* @type {'string' | 'html'}
* @memberof AppModalConfirm
*/
contentType?: 'string' | 'html';
/**
* 按钮样式
*
* @memberof ModalConfirmOptions
*/
buttonStyle?: any;
showCancelButton?: boolean;
/**
* 启用自定义底部
*
* @type {boolean}
* @memberof ModalConfirmOptions
*/
visibleCustomFooter?: boolean;
/**
* 自定义底部
*
* @type {VNode}
* @memberof ModalConfirmOptions
*/
customFooter?: VNode;
/**
* 显示模式
* 默认值:center
*
* @type {('top' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left')}
* @memberof NoticeOptions
*/
showMode?: 'center' | string;
/**
* 自定义图标的类名,会覆盖type
*
* @type {string}
* @memberof NoticeOptions
*/
iconClass?: string;
/**
* 自定义类名
*
* @type {string}
* @memberof NoticeOptions
*/
customClass?: string;
/**
* 是否显示右上角的关闭按钮
* 默认值:false
*
* @type {boolean}
* @memberof NoticeOptions
*/
showClose?: boolean;
/**
* 是否显示遮罩
* 默认值:true
*
* @type {boolean}
* @memberof NoticeOptions
*/
mask?: boolean;
/**
* 是否点击遮罩关闭
* 默认值:false
*
* @type {boolean}
* @memberof NoticeOptions
*/
maskClosable?: boolean;
/**
* 引用对象名称
*
* @type {string}
* @memberof ModalConfirmOptions
*/
refName?: string;
/**
* 关闭时的回调函数, 参数为被关闭的实例
*
* @memberof NoticeOptions
*/
onClose?: (val: any) => void;
}
...@@ -6,4 +6,5 @@ export { ViewTool } from './view-tool/view-tool'; ...@@ -6,4 +6,5 @@ export { ViewTool } from './view-tool/view-tool';
export { Errorlog } from './decorators/errorlog'; export { Errorlog } from './decorators/errorlog';
export { Interceptors } from './interceptor/interceptor'; export { Interceptors } from './interceptor/interceptor';
export { Notice } from './notice/notice'; export { Notice } from './notice/notice';
export * from './app-message-box';
...@@ -3,7 +3,7 @@ import qs from 'qs'; ...@@ -3,7 +3,7 @@ import qs from 'qs';
import { Http, Util, HttpResponse } from '@/ibiz-core/utils'; import { Http, Util, HttpResponse } from '@/ibiz-core/utils';
import { AppModal } from '../app-modal/app-modal'; import { AppModal } from '../app-modal/app-modal';
import { AppDrawer } from '../app-drawer/app-drawer'; import { AppDrawer } from '../app-drawer/app-drawer';
import { ViewTool } from '../view-tool/view-tool'; import { AppMessageBox, MessageBoxOptions } from '../app-message-box';
/** /**
* 界面打开服务 * 界面打开服务
...@@ -152,6 +152,16 @@ export class ViewOpenService { ...@@ -152,6 +152,16 @@ export class ViewOpenService {
throw new Error('气泡打开界面未实现'); throw new Error('气泡打开界面未实现');
} }
/**
* 打开消息弹框
*
* @param {MessageBoxOptions} options 配置
* @memberof ViewOpenService
*/
public async openMsgBox(options: MessageBoxOptions): Promise<any> {
return await AppMessageBox.getInstance().open(options);
}
/** /**
* 浏览器新标签页打开 * 浏览器新标签页打开
* *
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册