7dad9c87 by 任超

style:全局接口增加loading

1 parent 40b69927
......@@ -12,7 +12,8 @@ export function getQlxxDictList (data) {
return request({
url: '/sys/dict/getQlxxDictList',
method: 'post',
data
data,
showLoading: true
})
}
/*
......@@ -34,6 +35,7 @@ export function editDictNode (data) {
return request({
url: '/sys/dict/editDictNode',
method: 'post',
data
data,
showLoading: true
})
}
\ No newline at end of file
......
......@@ -7,7 +7,8 @@ export function getSysSqdjywBysearch (data) {
return request({
url: '/system/sysSqdjyw/getSysSqdjywBysearch',
method: 'post',
data
data,
showLoading: true
})
}
/*
......
......@@ -31,6 +31,13 @@
margin-top: 8px;
@include flex-center;
}
.is-fullscreen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
}
.dialog_title {
......@@ -82,10 +89,3 @@
left: 50%;
transform: translate(-50%, -50%);
}
\ No newline at end of file
.is-fullscreen {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
\ No newline at end of file
......
<template>
<el-dialog :visible.sync="dialogVisible" :width="width" v-loading="saveloding" :element-loading-text="loadingText"
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :fullscreen="fullscreen"
top="0" :append-to-body="true" :lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key"
<el-dialog :visible.sync="dialogVisible" :width="width" :fullscreen="fullscreen" top="0" :append-to-body="true"
:lock-scroll="true" :close-on-click-modal="false" @close="closeDialog" :key="key"
:custom-class="isMain ? 'mainCenter dialogBox' : 'contentCenter dialogBox'" :destroy-on-close="true" ref="dialogBox"
id="dialogBox">
<div slot="title">
......
......@@ -10,11 +10,10 @@
<template>
<div :class="['lb-table', customClass]">
<el-table v-if="!heightNumSetting" class="table-fixed" ref="elTable" :border='border' v-loading="loading"
element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)" :row-class-name="tableRowClassName" :show-header='showHeader'
:header-cell-style="{ background: '#f5f7fa' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
:data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
<el-table v-if="!heightNumSetting" class="table-fixed" ref="elTable" :border='border'
:row-class-name="tableRowClassName" :show-header='showHeader' :header-cell-style="{ background: '#f5f7fa' }"
v-bind="$attrs" :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
:span-method="this.merge ? this.mergeMethod : this.spanMethod">
<lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
</lb-column>
</el-table>
......@@ -41,10 +40,6 @@ export default {
column: Array,
data: Array,
spanMethod: Function,
loading: {
type: Boolean,
default: false,
},
pagination: {
type: Boolean,
default: true,
......
/**
* 此文件主要创建 axios 实例,然后添加请求拦截器和响应拦截器
*/
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import Cookies from 'js-cookie';
const CONTENT_TYPE = "application/json";
import { Message } from 'element-ui'
import { startLoadingAddCount, endLoadingSubCount } from './requestLoading'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
baseURL: process.env.VUE_APP_BASE_API,
withCredentials: true, //是否允许跨域
headers: {
"content-type": CONTENT_TYPE,
'Authorization':'bearer AT-16-oqkOHiUSsDdFA-eAZ49k2rJQDTzQpClO'
'Content-Type': 'application/json; charset=utf-8'
},
timeout: 50000 // request timeout
timeout: 15000
})
// request interceptor
service.interceptors.request.use(
config => {
config.headers['token'] = Cookies.get('token')
if (config.showLoading) {
startLoadingAddCount(config.loadingTarget);
}
return config
},
error => {
console.log(error) // for debug
if (config.showLoading) {
endLoadingSubCount(config.loadingTarget);
}
Message.error('请求超时!');
return Promise.reject(error)
}
)
......@@ -29,83 +35,59 @@ service.interceptors.request.use(
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data
const { code } = res
if (code === undefined) {
return res
if (response.config.showLoading) {
endLoadingSubCount();
}
// if the custom code is not 20000, it is judged as an error.
if (code !== 200) {
if (code === 600) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
} else if (code === 402) {
MessageBox.confirm('登录已失效,可以取消继续留在该页面,或者重新登录', '确定登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
})
} else if (code === 401) {
store.dispatch('user/resetToken').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
} else if (code === 403) {
if (res.message == 'Bad credentials') {
Message({
message: '账号、密码输入有误',
type: 'error',
duration: 5 * 1000
})
/**
* 对响应数据判断:
* 如果成功返回数据,就通过return把数据返出去
* 如果请求不成功,就在拦截器这里统一处理(组件的代码就不用关注错误的情况了)
*/
if (response.status == 200) {
return response.data;
} else {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
}
handleErrorData(response.data);
}
else {
Message({
message: '服务器异常,请联系管理员',
type: 'error',
duration: 5 * 1000
})
}
// 401:未登录;
return Promise.reject('error')
} else {
return res
}
return response;
},
error => {
let str = '600'; //新增了token 返回状态码为600
if (error.toString().indexOf(str) !== -1) {
MessageBox.confirm('登录已失效,可以取消继续留在该页面,或者重新登录', '确定登出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()// 为了重新实例化vue-router对象 避免bug
})
})
} else {
// 对响应错误做点什么
Message({
message: '服务器异常,请联系管理员',
type: 'error',
duration: 5 * 1000
})
}
return Promise.reject(error)
endLoadingSubCount();
return Promise.reject(error);
}
)
//对错误信息的处理函数
function handleErrorData (errMes) {
if (errMes.message) {
Message.error(errMes.message);
} else {
switch (errMes.code) {
case 401:
Message.error("未授权,请重新登录!");
break;
case 403:
Message.error("拒绝访问");
break;
case 404:
Message.error("很抱歉,资源未找到!");
break;
case 500:
Message.error("服务器错误!");
break;
case 504:
Message.error("网络超时!");
break;
default:
Message.error("服务正在联调中,请稍后!");
break;
}
}
}
export default service
......
import { Loading } from 'element-ui'
// 定义 loading
let loading
// loading开始 方法
function startLoading (LoadingText = '拼命加载中...') {
// element-ui loading 服务调用方式
loading = Loading.service({
text: LoadingText,
spinner: 'el-icon-loading', // 自定义图标
background: 'rgba(0, 0, 0, 0.8)'
})
}
// loading结束 方法
function endLoading () {
loading.close()
}
// 定义一个变量,有请求变量加一,收到响应变量减一
let loadingCount = 0
/**
* 调用一次startLoadingAddCount() 方法 开启Loading 并 loadingCount + 1
* 调用一次endLoadingSubCount() 方法 loadingCount - 1 直到为0 关闭loading
*/
export function startLoadingAddCount (LoadingText) {
if (loadingCount === 0) {
startLoading(LoadingText)
}
loadingCount++
}
export function endLoadingSubCount () {
loadingCount--
if (loadingCount === 0) {
endLoading()
}
}
\ No newline at end of file
<template>
<!-- 编辑 -->
<dialogBox submitForm="submitForm" @closeDialog="closeDialog" @submitForm="handleSubmit" width="80%" v-model="myValue"
:isSave="details.isenable == 1" title="字典信息" :saveloding="saveloding">
:isSave="details.isenable == 1" title="字典信息">
<el-form :model="ruleForm" ref="ruleForm" label-width="120px">
<el-row :gutter="20">
<el-col :span="6">
......@@ -170,8 +170,7 @@ export default {
}
}
],
tableData: [],
saveloding: false
tableData: []
}
},
watch: {
......@@ -220,14 +219,12 @@ export default {
removeTreeListItem(this.tableData, row.bsmDict)
},
handleSubmit () {
this.saveloding = true
editDictNode({
bsmDict: this.details.rowData.bsmDict,
typeid: this.details.rowData.typeid,
children: this.tableData
}).then(res => {
if (res.code === 200) {
this.saveloding = false
this.$emit('input', false)
}
})
......
......@@ -25,9 +25,9 @@
</div>
<!-- 表格 -->
<div class="from-clues-content">
<lb-table :page-size="pageData.pageSize" :loading="loading" :current-page.sync="pageData.currentPage"
:total="tableData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
:column="tableData.columns" :data="tableData.data">
<lb-table :page-size="pageData.pageSize" :current-page.sync="pageData.currentPage" :total="tableData.total"
@size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
:data="tableData.data">
</lb-table>
</div>
<editDialog v-model="isDialog" :details="details" />
......@@ -49,7 +49,6 @@ export default {
},
data () {
return {
loading: false,
isDialog: false,
details: {
dataList: [],
......@@ -70,9 +69,7 @@ export default {
methods: {
// 初始化数据
fetchData () {
this.loading = true
getQlxxDictList({ ...this.ruleForm, ...this.pageData }).then(res => {
this.loading = false
let { records, total } = res.result
this.tableData.data = records
this.tableData.total = total
......
......@@ -207,6 +207,8 @@ export default {
that.$emit('input', false)
}, 500)
}
}).catch(error => {
that.saveloding = false
})
},
closeDialog () {
......
......@@ -73,6 +73,8 @@ export default {
let { records, total } = res.result
this.tableData.data = records
this.tableData.total = total
}).catch(error => {
this.loading = false
})
},
editClick (row) {
......
......@@ -81,8 +81,8 @@ export default {
},
methods: {
handleSelect (item) {
if (!item.checked) {
item.radio = 0
if (item.checked) {
item.selected = '0'
}
},
handleSelectall () {
......
<template>
<dialogBox title="申请业务规则配置" @submitForm="submitForm" @closeDialog="closeDialog" v-model="myValue"
:saveloding="saveloding">
<dialogBox title="申请业务规则配置" @submitForm="submitForm" @closeDialog="closeDialog" v-model="myValue">
<ul class="edit-title-list" v-if="titleList.length > 0">
<li v-for="(item, index) in titleList" @click="handleTitleSelct(item, index)" :key="index"
:class="{ active: index == tn }">{{
......@@ -157,7 +156,6 @@ export default {
data () {
return {
myValue: this.value,
saveloding: false,
tn: 0,
titleList: [],
imgUploadUrl: fileController.uploadUrl(),
......@@ -244,10 +242,8 @@ export default {
this.$refs['ruleForm'].validate(async (valid) => {
let that = this
if (valid) {
that.saveloding = true
this.subData.ywDetail = this.ruleForm
saveSqdjyw(this.subData).then(res => {
that.saveloding = false
that.$emit('input', false)
})
} else {
......
......@@ -28,9 +28,9 @@
</div>
<!-- 表格 -->
<div class="from-clues-content">
<lb-table :page-size="pageData.pageSize" :loading="loading" :current-page.sync="pageData.currentPage"
:total="tableData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
:column="tableData.columns" :data="tableData.data">
<lb-table :page-size="pageData.pageSize" :current-page.sync="pageData.currentPage" :total="tableData.total"
@size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
:data="tableData.data">
</lb-table>
</div>
<editDialog v-model="isDialog" :detailList="detailList" />
......@@ -52,7 +52,6 @@ export default {
},
data () {
return {
loading: false,
isDialog: false,
queryForm: {
qllx: "",
......@@ -74,10 +73,8 @@ export default {
},
// 初始化数据
fetchData () {
this.loading = true
getSysSqdjywBysearch({ ...this.queryForm, ...this.pageData }).then(res => {
if (res.code === 200) {
this.loading = false
let { total, records } = res.result
this.tableData.total = total
this.tableData.data = records
......