Browse Source

feat: 优化成功和失败的提示,添加loading

master
alan 6 years ago
parent
commit
6754c8394b
  1. 1
      .eslintrc.js
  2. 49
      src/app/app.component.scss
  3. 26
      src/app/link_set/link-set.model.ts
  4. BIN
      src/img/error.png
  5. BIN
      src/img/loading.gif
  6. BIN
      src/img/success.png
  7. 6
      src/shared/crud/crud.request.ts
  8. 180
      src/shared/service/dialog.service.ts

1
.eslintrc.js

@ -169,7 +169,6 @@ module.exports = {
// "one-var": ["error", "never"], // 变量统一声明
// 比较运算符 & 相等运算符
"eqeqeq": "error", // 使用 === 和 !== 代替 == 和 !=
"no-case-declarations": "error", // 禁止在 case 或 default 子句中出现变量声明
"no-nested-ternary": "error", // 禁止混合的三目运算符
"no-unneeded-ternary": "error", //禁止可以在有更简单的可替代的表达式时使用三元操作符
// 条件

49
src/app/app.component.scss

@ -248,6 +248,55 @@
}
}
.popover-notitle{
.bi-header-background{
display: none;
}
.bi-absolute-layout{
top:0px !important;
}
}
.bi-custom-show{
.show-content{
text-align: center;
.loading-icon{
display: block;
background: url(../img/loading.gif) center center no-repeat;
background-size: contain;
margin: 0 auto;
margin-bottom: 18px;
}
.success-icon{
display: block;
background: url(../img/success.png) center center no-repeat;
background-size: contain;
margin: 0 auto;
margin-bottom: 18px;
}
.error-icon{
display: block;
background: url(../img/error.png) center center no-repeat;
background-size: contain;
margin: 0 auto;
margin-bottom: 18px;
}
.buttons{
margin-top: 18px;
div{
margin: 0 4px;
}
}
}
.show-more{
text-align: left !important;
height: 73px;
background: #F2F4F7;
margin-bottom: 10px;
padding: 5px;
margin-top: 10px;
}
}
.link-font .b-font:before {
content: "\e759";
color: inherit;

26
src/app/link_set/link-set.model.ts

@ -1,8 +1,8 @@
import {ModelType} from '@ui/index';
import {LinkType} from '@ui/type';
import {deleteConnection, getConnectionStatus} from '@shared/crud/crud.request';
import {deleteConnection, testConnection} from '@shared/crud/crud.request';
import {databaseTyle, getCnnectionName} from './select/select.service';
import {confirm} from '@shared/service/dialog.service';
import dialog from '@shared/service/dialog.service';
import {saveConnection} from './link-set.service';
const className = 'fr.model.linkset';
@ -15,7 +15,7 @@ const Model: ModelType = {
*/
setLinkSelected(name: string) {
if (this.model.linkSelected && this.model.linkSelected.isSelected) {
confirm('当前设置尚未保存,是否保存?', (isConfirm: boolean) => {
dialog.confirm('当前设置尚未保存,是否保存?', (isConfirm: boolean) => {
if (isConfirm) {
saveConnection(this.model.linkUpdate).then(() => {
this.setEdit(false);
@ -50,9 +50,7 @@ const Model: ModelType = {
});
break;
case '测试连接':
getConnectionStatus(id, (res: any) => {
});
this._textLink(id);
break;
case '复制':
this.copyLink(id);
@ -61,6 +59,20 @@ const Model: ModelType = {
break;
}
},
_textLink(id: string) {
const loadingId = dialog.loading('正在测试连接,请稍候...');
const link = this.model.linkList.find((item: LinkType) => item.connectionId === id);
testConnection(link, (res: any) => {
dialog.close(loadingId);
if (res && res.errorCode) {
dialog.linkFail(`${link.connectionName}测试连接失败`, res.errorMsg, () => {
this._textLink(id);
});
} else {
dialog.success('连接成功');
}
});
},
copyLink(id: string) {
const name = getCnnectionName(this.model.linkList);
let data = {};
@ -121,7 +133,7 @@ const Model: ModelType = {
},
setNewLink(value: string) {
if (this.model.linkSelected && this.model.linkSelected.isSelected) {
confirm('当前设置尚未保存,是否保存?', (isConfirm: boolean) => {
dialog.confirm('当前设置尚未保存,是否保存?', (isConfirm: boolean) => {
if (isConfirm) {
saveConnection(this.model.linkUpdate).then(() => {
this.setEdit(true);

BIN
src/img/error.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
src/img/loading.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/img/success.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

6
src/shared/crud/crud.request.ts

@ -56,10 +56,12 @@ export function testConnection(data: LinkType, cb: Function): void{
console.log('%cdata: ', 'color: MidnightBlue; background: Aquamarine;', data);
if (Dec) {
Dec.reqPost(`/v10/config/connection/test`, data, (res: any) => {
cb(res.data);
cb(res);
});
} else {
cb('success');
setTimeout(() => {
cb({errorCode:'500', errorMsg:'createConnectionThread not start!'});
}, 2000);
}
}

180
src/shared/service/dialog.service.ts

@ -1,4 +1,11 @@
export const confirm = (message: string, onConfirm: Function): void => {
import {Label, Vertical, Left, Button, Layout} from '@ui/index';
class Dialog {
/**
*
* @param message
* @param onConfirm
*/
public confirm(message: string, onConfirm: Function): string {
const id = BI.UUID();
BI.Popovers.create(id, {
type: 'bi.bar_popover',
@ -37,4 +44,175 @@ export const confirm = (message: string, onConfirm: Function): void => {
},
],
}).open(id);
return id;
}
public loading(message: string): string {
const body = {
type: 'bi.center_adapt',
cls: 'show-content',
items: [
{
type: Vertical,
items:[
{
type: 'bi.layout',
cls: 'loading-icon',
width: 100,
height: 100,
},
{
type: Label,
text: message,
},
],
},
],
};
return this.show(body);
}
public success(message: string): string {
const body = {
type: 'bi.center_adapt',
cls: 'show-content',
items: [
{
type: Vertical,
items:[
{
type: 'bi.layout',
cls: 'success-icon',
width: 100,
height: 100,
},
{
type: Label,
text: message,
},
],
},
],
};
return this.show(body, 1000);
}
public linkFail(text: string, more: string, cb?: Function): string {
let Popover: any = null;
let More: any = null;
const id = BI.UUID();
const that = this;
const body = {
type: Vertical,
items: [
{
type: 'bi.center_adapt',
cls: 'show-content',
tgap:10,
items: [
{
type: Vertical,
items:[
{
type: Layout,
cls: 'error-icon',
width: 100,
height: 100,
},
{
type: Label,
text,
},
{
type: Left,
cls:'buttons',
items:[
{
type: Button,
text:'详细信息',
level: 'ignore',
handler() {
const isHide = this.getText() === '详细信息';
Popover.element.css({
height: isHide ? '290' : '220',
});
More.setVisible(isHide);
this.setText(isHide ? '收起信息' : '详细信息');
},
},
{
type: Button,
text:'返回',
level: 'ignore',
handler() {
that.close(id);
},
},
{
type: Button,
text:'重新连接',
handler() {
that.close(id);
cb ? cb() : null;
},
},
],
},
],
},
],
}, {
type: Label,
cls:'show-more',
text:more,
invisible: true,
ref(ref: any) {
More = ref;
},
},
],
};
BI.Popovers.create(id, {
type: 'bi.popover',
cls:'popover-notitle',
extraCls:'bi-custom-show',
size: 'normal',
width: 450,
height: 220,
body,
ref(ref: any) {
Popover = ref;
},
}).open(id);
return id;
}
public close(id: string): void{
BI.Popovers.close(id);
}
public show(body: any, autoClose = 0): string {
const id = BI.UUID();
BI.Popovers.create(id, {
type: 'bi.popover',
cls:'popover-notitle',
extraCls:'bi-custom-show',
size: 'normal',
width: 450,
height: 220,
body,
}).open(id);
if (autoClose > 0) {
setTimeout(() => {
this.close(id);
}, autoClose);
}
return id;
}
}
export default new Dialog();

Loading…
Cancel
Save