no message

src/components/scTable/index.vue

@@ -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(){
+			tableColumn(){
-				this.userColumn=this.column;
+				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){
+			if(this.name) {
-				this.getCustomColumn()
+				this.$http.get(config.configUrl, { name: this.name }, { cache:0 }).then((res) => {
-			}else{
+				    if (res.code == 200) {
-				this.userColumn = this.column
+				    	Object.assign(this.$data, res.data);
+				    	if (typeof res.data.api !== 'undefined' && res.data.api) {
+				    		this.api = res.data.api;
+				    		this.getData();
 				    	}
+				    }
+				});
+
+			}else{
+				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){
+			columnSettingChange(column){
-				this.userColumn = userColumn;
+				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)
+					const column = await config.columnSettingReset(this.name, this.column)
-					this.userColumn = column
+					this.column = column
-					this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn||[]))
+					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{

src/config/table.js

@@ -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

src/utils/request.js

@@ -1,13 +1,13 @@
 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) => {
@@ -21,21 +21,16 @@ axios.interceptors.request.use(
         }
         Object.assign(config.headers, sysConfig.HEADERS)
         return config;
-	},
+    }, (error) => {
-	(error) => {
         return Promise.reject(error);
-	}
+    });
-);
-
 //FIX 多个API同时401时疯狂弹窗BUG
 let MessageBox_401_show = false
-
 // HTTP response 拦截器
 axios.interceptors.response.use(
     (response) => {
         return response;
-	},
+    }, (error) => {
-	(error) => {
         if (error.response) {
             if (error.response.status == 404) {
                 ElNotification.error({
@@ -60,7 +55,9 @@ axios.interceptors.response.use(
                             done()
                         }
                     }).then(() => {
-						router.replace({path: '/login'});
+                        router.replace({
+                            path: '/login'
+                        });
                     }).catch(() => {})
                 }
             } else {
@@ -75,13 +72,9 @@ axios.interceptors.response.use(
                 message: "请求服务器无响应！"
             });
         }
-
         return Promise.reject(error.response);
-	}
+    });
-);
-
 var http = {
-
     /** get 请求
      * @param  {string} url 接口地址
      * @param  {object} params 请求参数
@@ -89,19 +82,30 @@ var http = {
      */
     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 请求参数
@@ -121,7 +125,6 @@ var http = {
             })
         })
     },
-
     /** put 请求
      * @param  {string} url 接口地址
      * @param  {object} data 请求参数
@@ -141,7 +144,6 @@ var http = {
             })
         })
     },
-
     /** patch 请求
      * @param  {string} url 接口地址
      * @param  {object} data 请求参数
@@ -161,7 +163,6 @@ var http = {
             })
         })
     },
-
     /** delete 请求
      * @param  {string} url 接口地址
      * @param  {object} data 请求参数
@@ -181,7 +182,6 @@ var http = {
             })
         })
     },
-
     /** jsonp 请求
      * @param  {string} url 接口地址
      * @param  {string} name JSONP回调函数名称
@@ -206,5 +206,4 @@ var http = {
         })
     }
 }
-
 export default http;

src/views/system/menu/index.vue

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

src/views/system/menu/save.vue

@@ -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>

src/views/system/setting/index.vue

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

src/views/system/table/index.vue

@@ -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() {