no message

This commit is contained in:
小陌 2023-06-19 22:55:32 +08:00
parent e91f1009df
commit 8f5aebb5f9
7 changed files with 240 additions and 246 deletions

View File

@ -3,7 +3,7 @@
<div class="scTable-table" :style="{'height':_table_height}">
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
<slot></slot>
<template v-for="(item, index) in userColumn" :key="index">
<template v-for="(item, index) in column" :key="index">
<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
<template #default="scope">
<slot :name="item.prop" v-bind="scope">
@ -24,11 +24,11 @@
</div>
<div class="scTable-do" v-if="!hideDo">
<el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
<el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
<el-popover v-if="columnSetting" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
<template #reference>
<el-button icon="el-icon-set-up" circle style="margin-left:15px"></el-button>
</template>
<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="column"></columnSetting>
</el-popover>
<el-popover v-if="!hideSetting" placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
<template #reference>
@ -63,7 +63,8 @@
columnSetting
},
props: {
tablename: { type: String, default: "" },
name: { type: String, default: "" },
tableColumn: { type: Object, default: () => {} },
apiObj: { type: Object, default: () => {} },
params: { type: Object, default: () => ({}) },
data: { type: Object, default: () => {} },
@ -75,7 +76,6 @@
pageSizes: { type: Array, default: config.pageSizes },
rowKey: { type: String, default: "" },
summaryMethod: { type: Function, default: null },
column: { type: Object, default: () => {} },
remoteSort: { type: Boolean, default: false },
remoteFilter: { type: Boolean, default: false },
remoteSummary: { type: Boolean, default: false },
@ -86,6 +86,7 @@
paginationLayout: { type: String, default: config.paginationLayout },
},
watch: {
//props
data(){
this.tableData = this.data;
@ -95,8 +96,8 @@
this.tableParams = this.params;
this.refresh();
},
column(){
this.userColumn=this.column;
tableColumn(){
this.column = this.tableColumn;
}
},
computed: {
@ -111,6 +112,7 @@
return {
scPageSize: this.pageSize,
isActivat: true,
api: '',
emptyText: "暂无数据",
toggleIndex: 0,
tableData: [],
@ -121,7 +123,8 @@
loading: false,
tableHeight:'100%',
tableParams: this.params,
userColumn: [],
column: [],
columnSetting: false,
customColumnShow: false,
summary: {},
config: {
@ -132,12 +135,23 @@
}
},
mounted() {
//
if(this.tablename){
this.getCustomColumn()
if(this.name) {
this.$http.get(config.configUrl, { name: this.name }, { cache:0 }).then((res) => {
if (res.code == 200) {
Object.assign(this.$data, res.data);
if (typeof res.data.api !== 'undefined' && res.data.api) {
this.api = res.data.api;
this.getData();
}
}
});
}else{
this.userColumn = this.column
this.column = this.tableColumn
}
//
if(this.apiObj){
this.getData();
@ -155,11 +169,6 @@
this.isActivat = false;
},
methods: {
//
async getCustomColumn(){
const userColumn = await config.columnSettingGet(this.tablename, this.column)
this.userColumn = userColumn
},
//
async getData(){
this.loading = true;
@ -176,7 +185,9 @@
Object.assign(reqData, this.tableParams)
try {
var res = await this.apiObj(reqData);
var res = this.api? await this.$http.get(this.api, reqData):await this.apiObj(reqData);
}catch(error){
this.loading = false;
this.emptyText = error.statusText;
@ -237,15 +248,15 @@
this.getData()
},
//
columnSettingChange(userColumn){
this.userColumn = userColumn;
columnSettingChange(column){
this.column = column;
this.toggleIndex += 1;
},
//
async columnSettingSave(userColumn){
async columnSettingSave(column){
this.$refs.columnSetting.isSave = true
try {
await config.columnSettingSave(this.tablename, userColumn)
await config.columnSettingSave(this.name, column)
}catch(error){
this.$message.error('保存失败')
this.$refs.columnSetting.isSave = false
@ -257,9 +268,9 @@
async columnSettingBack(){
this.$refs.columnSetting.isSave = true
try {
const column = await config.columnSettingReset(this.tablename, this.column)
this.userColumn = column
this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn||[]))
const column = await config.columnSettingReset(this.name, this.column)
this.column = column
this.$refs.columnSetting.column = JSON.parse(JSON.stringify(this.column||[]))
}catch(error){
this.$message.error('重置失败')
this.$refs.columnSetting.isSave = false
@ -271,7 +282,7 @@
if(!this.remoteSort){
return false
}
if(obj.column && obj.prop){
if(obj.tableColumn && obj.prop){
this.prop = obj.prop
this.order = obj.order
}else{

View File

@ -1,6 +1,5 @@
//数据表格配置
import tool from '@/utils/tool'
import http from "@/utils/request"
export default {
successCode: 200, //请求完成代码
pageSize: 20, //表格每一页条数
@ -22,6 +21,7 @@ export default {
prop: 'prop', //规定排序字段名字段
order: 'order' //规定排序规格字段
},
configUrl: 'system/table/get',
/**
* 自定义列保存处理
* @tablename scTable组件的props->tablename
@ -36,25 +36,6 @@ export default {
}, 1000)
})
},
/**
* 获取自定义列
* @tablename scTable组件的props->tablename
* @column 组件接受到的props->column
*/
columnSettingGet: function(tablename, column) {
return new Promise((resolve) => {
//这里为了演示使用了session和setTimeout演示开发时应用数据请求
// const userColumn = tool.session.get(tablename)
http.post('system/table/get', { name: tablename }).then((res) => {
if (res.code == 200) {
resolve(res.data.column)
return false;
}
resolve(column)
});
})
},
/**
* 重置自定义列
* @tablename scTable组件的props->tablename

View File

@ -1,210 +1,209 @@
import axios from 'axios';
import { ElNotification, ElMessageBox } from 'element-plus';
import {
ElNotification,
ElMessageBox
} from 'element-plus';
import sysConfig from "@/config";
import tool from '@/utils/tool';
import router from '@/router';
axios.defaults.baseURL = sysConfig.API_URL
axios.defaults.timeout = sysConfig.TIMEOUT
// HTTP request 拦截器
axios.interceptors.request.use(
(config) => {
let token = tool.cookie.get("token");
if(token){
config.headers[sysConfig.TOKEN_NAME] = sysConfig.TOKEN_PREFIX + token
}
if(!sysConfig.REQUEST_CACHE && config.method == 'get'){
config.params = config.params || {};
config.params['_'] = new Date().getTime();
}
Object.assign(config.headers, sysConfig.HEADERS)
return config;
},
(error) => {
return Promise.reject(error);
}
);
(config) => {
let token = tool.cookie.get("token");
if (token) {
config.headers[sysConfig.TOKEN_NAME] = sysConfig.TOKEN_PREFIX + token
}
if (!sysConfig.REQUEST_CACHE && config.method == 'get') {
config.params = config.params || {};
config.params['_'] = new Date().getTime();
}
Object.assign(config.headers, sysConfig.HEADERS)
return config;
}, (error) => {
return Promise.reject(error);
});
//FIX 多个API同时401时疯狂弹窗BUG
let MessageBox_401_show = false
// HTTP response 拦截器
axios.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if (error.response) {
if (error.response.status == 404) {
ElNotification.error({
title: '请求错误',
message: "Status:404正在请求不存在的服务器记录"
});
} else if (error.response.status == 500) {
ElNotification.error({
title: '请求错误',
message: error.response.data.message || "Status:500服务器发生错误"
});
} else if (error.response.status == 401) {
if(!MessageBox_401_show){
MessageBox_401_show = true
ElMessageBox.confirm('当前用户已被登出或无权限访问当前资源,请尝试重新登录后再操作。', '无权限访问', {
type: 'error',
closeOnClickModal: false,
center: true,
confirmButtonText: '重新登录',
beforeClose: (action, instance, done) => {
MessageBox_401_show = false
done()
}
}).then(() => {
router.replace({path: '/login'});
}).catch(() => {})
}
} else {
ElNotification.error({
title: '请求错误',
message: error.message || `Status:${error.response.status},未知错误!`
});
}
} else {
ElNotification.error({
title: '请求错误',
message: "请求服务器无响应!"
});
}
return Promise.reject(error.response);
}
);
(response) => {
return response;
}, (error) => {
if (error.response) {
if (error.response.status == 404) {
ElNotification.error({
title: '请求错误',
message: "Status:404正在请求不存在的服务器记录"
});
} else if (error.response.status == 500) {
ElNotification.error({
title: '请求错误',
message: error.response.data.message || "Status:500服务器发生错误"
});
} else if (error.response.status == 401) {
if (!MessageBox_401_show) {
MessageBox_401_show = true
ElMessageBox.confirm('当前用户已被登出或无权限访问当前资源,请尝试重新登录后再操作。', '无权限访问', {
type: 'error',
closeOnClickModal: false,
center: true,
confirmButtonText: '重新登录',
beforeClose: (action, instance, done) => {
MessageBox_401_show = false
done()
}
}).then(() => {
router.replace({
path: '/login'
});
}).catch(() => {})
}
} else {
ElNotification.error({
title: '请求错误',
message: error.message || `Status:${error.response.status},未知错误!`
});
}
} else {
ElNotification.error({
title: '请求错误',
message: "请求服务器无响应!"
});
}
return Promise.reject(error.response);
});
var http = {
/** get
* @param {string} url 接口地址
* @param {object} params 请求参数
* @param {object} config 参数
*/
get: function(url, params={}, config={}) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url: url,
params: params,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** post
* @param {string} url 接口地址
* @param {object} data 请求参数
* @param {object} config 参数
*/
post: function(url, data={}, config={}) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** put
* @param {string} url 接口地址
* @param {object} data 请求参数
* @param {object} config 参数
*/
put: function(url, data={}, config={}) {
return new Promise((resolve, reject) => {
axios({
method: 'put',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** patch
* @param {string} url 接口地址
* @param {object} data 请求参数
* @param {object} config 参数
*/
patch: function(url, data={}, config={}) {
return new Promise((resolve, reject) => {
axios({
method: 'patch',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** delete
* @param {string} url 接口地址
* @param {object} data 请求参数
* @param {object} config 参数
*/
delete: function(url, data={}, config={}) {
return new Promise((resolve, reject) => {
axios({
method: 'delete',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** jsonp
* @param {string} url 接口地址
* @param {string} name JSONP回调函数名称
*/
jsonp: function(url, name='jsonp'){
return new Promise((resolve) => {
var script = document.createElement('script')
var _id = `jsonp${Math.ceil(Math.random() * 1000000)}`
script.id = _id
script.type = 'text/javascript'
script.src = url
window[name] =(response) => {
resolve(response)
document.getElementsByTagName('head')[0].removeChild(script)
try {
delete window[name];
}catch(e){
window[name] = undefined;
}
}
document.getElementsByTagName('head')[0].appendChild(script)
})
}
/** get
* @param {string} url 接口地址
* @param {object} params 请求参数
* @param {object} config 参数
*/
get: function(url, params = {}, config = {}) {
return new Promise((resolve, reject) => {
// 缓存存在, 优先使用缓存
const cacheKey = '';
if (typeof config.cache !== 'undefined' && !isNaN(config.cache) && config.cache > 0) {
let cacheKey = tool.crypto.MD5(url);
const cachedData = tool.data.get(cacheKey);
if (cachedData) {
return resolve(cachedData);
}
}
axios({
method: 'get',
url: url,
params: params,
...config
}).then((response) => {
if (cacheKey) {
tool.data.set(cacheKey, response.data, config.cache);
}
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** post
* @param {string} url 接口地址
* @param {object} data 请求参数
* @param {object} config 参数
*/
post: function(url, data = {}, config = {}) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** put
* @param {string} url 接口地址
* @param {object} data 请求参数
* @param {object} config 参数
*/
put: function(url, data = {}, config = {}) {
return new Promise((resolve, reject) => {
axios({
method: 'put',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** patch
* @param {string} url 接口地址
* @param {object} data 请求参数
* @param {object} config 参数
*/
patch: function(url, data = {}, config = {}) {
return new Promise((resolve, reject) => {
axios({
method: 'patch',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** delete
* @param {string} url 接口地址
* @param {object} data 请求参数
* @param {object} config 参数
*/
delete: function(url, data = {}, config = {}) {
return new Promise((resolve, reject) => {
axios({
method: 'delete',
url: url,
data: data,
...config
}).then((response) => {
resolve(response.data);
}).catch((error) => {
reject(error);
})
})
},
/** jsonp
* @param {string} url 接口地址
* @param {string} name JSONP回调函数名称
*/
jsonp: function(url, name = 'jsonp') {
return new Promise((resolve) => {
var script = document.createElement('script')
var _id = `jsonp${Math.ceil(Math.random() * 1000000)}`
script.id = _id
script.type = 'text/javascript'
script.src = url
window[name] = (response) => {
resolve(response)
document.getElementsByTagName('head')[0].removeChild(script)
try {
delete window[name];
} catch (e) {
window[name] = undefined;
}
}
document.getElementsByTagName('head')[0].appendChild(script)
})
}
}
export default http;
export default http;

View File

@ -46,7 +46,7 @@
import save from './save'
export default {
name: "settingMenu",
name: "systemmenu",
components: {
save
},

View File

@ -46,7 +46,6 @@
</el-form-item>
<el-form-item label="颜色" prop="color">
<el-color-picker v-model="form.meta.color" :predefine="predefineColors"></el-color-picker>
</el-form-item>
<el-form-item label="是否隐藏" prop="meta.hidden">
<el-checkbox v-model="form.meta.hidden">隐藏菜单</el-checkbox>
@ -56,6 +55,9 @@
<el-form-item label="整页路由" prop="fullpage">
<el-switch v-model="form.meta.fullpage" />
</el-form-item>
<el-form-item label="表单名称" prop="fullpage">
<el-input v-model="form.meta.tablename" clearable placeholder="表单名称,读取配置及表头"></el-input>
</el-form-item>
<el-form-item label="标签" prop="tag">
<el-input v-model="form.meta.tag" clearable placeholder=""></el-input>
</el-form-item>

View File

@ -37,7 +37,7 @@
<script>
export default {
name: 'system',
name: 'setting',
data() {
return {
info: {},

View File

@ -6,7 +6,7 @@
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" tablename="fdsafafa" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
<scTable ref="table" :name="tablename" row-key="id" @selection-change="selectionChange" stripe>
<el-table-column type="selection" width="50"></el-table-column>
</scTable>
</el-main>
@ -28,7 +28,8 @@
save: false
},
apiObj: this.$api.system.table.list,
selection: []
selection: [],
tablename: this.$route.meta.tablename || '',
}
},
mounted() {