表头管理

package.json

@@ -16,7 +16,7 @@
 		"url": "git@http://182.92.174.150:3000/:tiegu/czo.git"
 	},
 	"dependencies": {
-		"@riophae/vue-treeselect": "0.4.0",
+		"@riophae/vue-treeselect": "^0.4.0",
 		"ali-oss": "^6.16.0",
 		"axios": "0.24.0",
 		"clipboard": "2.0.8",

src/api/system/tableHead.js

@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+// 查询菜单
+export function listMenu() {
+	return request({
+		url: '/system/menu/listTwo',
+		method: 'get'
+	})
+}
+
+// 新增表头
+export function tableHeadAdd(data) {
+	return request({
+		url: '/system/tableHeader',
+		method: 'post',
+		data
+	})
+}
+
+// 查询表头
+export function tableHeadList(params) {
+	return request({
+		url: '/system/tableHeader/list',
+		method: 'get',
+		params
+	})
+}
+// 修改表头
+export function tableHeadUpd(data) {
+	return request({
+		url: '/system/tableHeader',
+		method: 'put',
+		data
+	})
+}
+// 删除表头
+export function tableHeadDel(id) {
+	return request({
+		url: `/system/tableHeader/${id}`,
+		method: 'delete'
+	})
+}

src/main.js

@@ -18,7 +18,7 @@ import './assets/icons'
 import './permission'
 import { getDicts } from '@/api/system/dict/data'
 import { getConfigKey } from '@/api/system/config'
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from '@/utils/tiegu'
+import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree, copyFormFiled } from '@/utils/tiegu'
 // 分页组件
 import Pagination from '@/components/Pagination'
 // 自定义表格工具组件
@@ -46,6 +46,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
+Vue.prototype.copyFormFiled = copyFormFiled
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)

src/permission.js

@@ -24,6 +24,7 @@ router.beforeEach((to, from, next) => {
 					.dispatch('GetInfo')
 					.then(() => {
 						store.dispatch('GenerateRoutes').then((accessRoutes) => {
+							store.commit('oss/SET_OSS_BASE_URL')
 							// 根据roles权限生成可访问的路由表
 							router.addRoutes(accessRoutes) // 动态添加可访问路由表
 							next({ ...to, replace: true }) // hack方法 确保addRoutes已完成

src/plugins/del.js

@@ -0,0 +1,9 @@
+import { MessageBox } from 'element-ui'
+
+export default function () {
+	return MessageBox.confirm('确认删除吗', '系统提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning'
+	})
+}

src/plugins/index.js

@@ -1,23 +1,26 @@
-import tab from "./tab";
-import auth from "./auth";
-import cache from "./cache";
-import modal from "./modal";
-import download from "./download";
-import msg from "./msg";
+import tab from './tab'
+import auth from './auth'
+import cache from './cache'
+import modal from './modal'
+import download from './download'
+import msg from './msg'
+import del from './del'
 
 export default {
-  install(Vue) {
-    // 页签操作
-    Vue.prototype.$tab = tab;
-    // 认证对象
-    Vue.prototype.$auth = auth;
-    // 缓存对象
-    Vue.prototype.$cache = cache;
-    // 模态框对象
-    Vue.prototype.$modal = modal;
-    // 下载文件
-    Vue.prototype.$download = download;
-    // 提示框
-    Vue.prototype.$msg = msg;
-  },
-};
+	install(Vue) {
+		// 页签操作
+		Vue.prototype.$tab = tab
+		// 认证对象
+		Vue.prototype.$auth = auth
+		// 缓存对象
+		Vue.prototype.$cache = cache
+		// 模态框对象
+		Vue.prototype.$modal = modal
+		// 下载文件
+		Vue.prototype.$download = download
+		// 提示框
+		Vue.prototype.$msg = msg
+		//删除确认框
+		Vue.prototype.$del = del
+	}
+}

src/utils/tiegu.js

@@ -13,12 +13,15 @@ export function parseTime(time, pattern) {
 	if (typeof time === 'object') {
 		date = time
 	} else {
-		if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+		if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
 			time = parseInt(time)
 		} else if (typeof time === 'string') {
-			time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm),'');
+			time = time
+				.replace(new RegExp(/-/gm), '/')
+				.replace('T', ' ')
+				.replace(new RegExp(/\.[\d]{3}/gm), '')
 		}
-		if ((typeof time === 'number') && (time.toString().length === 10)) {
+		if (typeof time === 'number' && time.toString().length === 10) {
 			time = time * 1000
 		}
 		date = new Date(time)
@@ -35,7 +38,9 @@ export function parseTime(time, pattern) {
 	const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
 		let value = formatObj[key]
 		// Note: getDay() returns 0 on Sunday
-		if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+		if (key === 'a') {
+			return ['日', '一', '二', '三', '四', '五', '六'][value]
+		}
 		if (result.length > 0 && value < 10) {
 			value = '0' + value
 		}
@@ -47,89 +52,91 @@ export function parseTime(time, pattern) {
 // 表单重置
 export function resetForm(refName) {
 	if (this.$refs[refName]) {
-		this.$refs[refName].resetFields();
+		this.$refs[refName].resetFields()
 	}
 }
 
 // 添加日期范围
 export function addDateRange(params, dateRange, propName) {
-	let search = params;
-	search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
-	dateRange = Array.isArray(dateRange) ? dateRange : [];
-	if (typeof (propName) === 'undefined') {
-		search.params['beginTime'] = dateRange[0];
-		search.params['endTime'] = dateRange[1];
+	let search = params
+	search.params = typeof search.params === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {}
+	dateRange = Array.isArray(dateRange) ? dateRange : []
+	if (typeof propName === 'undefined') {
+		search.params['beginTime'] = dateRange[0]
+		search.params['endTime'] = dateRange[1]
 	} else {
-		search.params['begin' + propName] = dateRange[0];
-		search.params['end' + propName] = dateRange[1];
+		search.params['begin' + propName] = dateRange[0]
+		search.params['end' + propName] = dateRange[1]
 	}
-	return search;
+	return search
 }
 
 // 回显数据字典
 export function selectDictLabel(datas, value) {
-	var actions = [];
+	var actions = []
 	Object.keys(datas).some((key) => {
-		if (datas[key].value == ('' + value)) {
-			actions.push(datas[key].label);
-			return true;
+		if (datas[key].value == '' + value) {
+			actions.push(datas[key].label)
+			return true
 		}
 	})
-	return actions.join('');
+	return actions.join('')
 }
 
 // 回显数据字典（字符串数组）
 export function selectDictLabels(datas, value, separator) {
-	var actions = [];
-	var currentSeparator = undefined === separator ? "," : separator;
-	var temp = value.split(currentSeparator);
+	var actions = []
+	var currentSeparator = undefined === separator ? ',' : separator
+	var temp = value.split(currentSeparator)
 	Object.keys(value.split(currentSeparator)).some((val) => {
 		Object.keys(datas).some((key) => {
-			if (datas[key].value == ('' + temp[val])) {
-				actions.push(datas[key].label + currentSeparator);
+			if (datas[key].value == '' + temp[val]) {
+				actions.push(datas[key].label + currentSeparator)
 			}
 		})
 	})
-	return actions.join('').substring(0, actions.join('').length - 1);
+	return actions.join('').substring(0, actions.join('').length - 1)
 }
 
 // 字符串格式化(%s )
 export function sprintf(str) {
-	var args = arguments, flag = true, i = 1;
+	var args = arguments,
+		flag = true,
+		i = 1
 	str = str.replace(/%s/g, function () {
-		var arg = args[i++];
+		var arg = args[i++]
 		if (typeof arg === 'undefined') {
-			flag = false;
-			return '';
+			flag = false
+			return ''
 		}
-		return arg;
-	});
-	return flag ? str : '';
+		return arg
+	})
+	return flag ? str : ''
 }
 
 // 转换字符串，undefined,null等转化为""
 export function praseStrEmpty(str) {
-	if (!str || str == "undefined" || str == "null") {
-		return "";
+	if (!str || str == 'undefined' || str == 'null') {
+		return ''
 	}
-	return str;
+	return str
 }
 
 // 数据合并
 export function mergeRecursive(source, target) {
-    for (var p in target) {
-        try {
-            if (target[p].constructor == Object) {
-                source[p] = mergeRecursive(source[p], target[p]);
-            } else {
-                source[p] = target[p];
-            }
-        } catch(e) {
-            source[p] = target[p];
-        }
-    }
-    return source;
-};
+	for (var p in target) {
+		try {
+			if (target[p].constructor == Object) {
+				source[p] = mergeRecursive(source[p], target[p])
+			} else {
+				source[p] = target[p]
+			}
+		} catch (e) {
+			source[p] = target[p]
+		}
+	}
+	return source
+}
 
 /**
  * 构造树型结构数据
@@ -143,65 +150,65 @@ export function handleTree(data, id, parentId, children) {
 		id: id || 'id',
 		parentId: parentId || 'parentId',
 		childrenList: children || 'children'
-	};
+	}
 
-	var childrenListMap = {};
-	var nodeIds = {};
-	var tree = [];
+	var childrenListMap = {}
+	var nodeIds = {}
+	var tree = []
 
 	for (let d of data) {
-		let parentId = d[config.parentId];
+		let parentId = d[config.parentId]
 		if (childrenListMap[parentId] == null) {
-			childrenListMap[parentId] = [];
+			childrenListMap[parentId] = []
 		}
-		nodeIds[d[config.id]] = d;
-		childrenListMap[parentId].push(d);
+		nodeIds[d[config.id]] = d
+		childrenListMap[parentId].push(d)
 	}
 
 	for (let d of data) {
-		let parentId = d[config.parentId];
+		let parentId = d[config.parentId]
 		if (nodeIds[parentId] == null) {
-			tree.push(d);
+			tree.push(d)
 		}
 	}
 
 	for (let t of tree) {
-		adaptToChildrenList(t);
+		adaptToChildrenList(t)
 	}
 
 	function adaptToChildrenList(o) {
 		if (childrenListMap[o[config.id]] !== null) {
-			o[config.childrenList] = childrenListMap[o[config.id]];
+			o[config.childrenList] = childrenListMap[o[config.id]]
 		}
 		if (o[config.childrenList]) {
 			for (let c of o[config.childrenList]) {
-				adaptToChildrenList(c);
+				adaptToChildrenList(c)
 			}
 		}
 	}
-	return tree;
+	return tree
 }
 
 /**
-* 参数处理
-* @param {*} params  参数
-*/
+ * 参数处理
+ * @param {*} params  参数
+ */
 export function tansParams(params) {
 	let result = ''
 	for (const propName of Object.keys(params)) {
-		const value = params[propName];
-		var part = encodeURIComponent(propName) + "=";
-		if (value !== null && typeof (value) !== "undefined") {
+		const value = params[propName]
+		var part = encodeURIComponent(propName) + '='
+		if (value !== null && typeof value !== 'undefined') {
 			if (typeof value === 'object') {
 				for (const key of Object.keys(value)) {
-					if (value[key] !== null && typeof (value[key]) !== 'undefined') {
-						let params = propName + '[' + key + ']';
-						var subPart = encodeURIComponent(params) + "=";
-						result += subPart + encodeURIComponent(value[key]) + "&";
+					if (value[key] !== null && typeof value[key] !== 'undefined') {
+						let params = propName + '[' + key + ']'
+						var subPart = encodeURIComponent(params) + '='
+						result += subPart + encodeURIComponent(value[key]) + '&'
 					}
 				}
 			} else {
-				result += part + encodeURIComponent(value) + "&";
+				result += part + encodeURIComponent(value) + '&'
 			}
 		}
 	}
@@ -210,11 +217,23 @@ export function tansParams(params) {
 
 // 验证是否为blob格式
 export async function blobValidate(data) {
-    try {
-      const text = await data.text();
-      JSON.parse(text);
-      return false;
-    } catch (error) {
-      return true;
-    }
+	try {
+		const text = await data.text()
+		JSON.parse(text)
+		return false
+	} catch (error) {
+		return true
+	}
+}
+
+// 复制参数
+export function copyFormFiled(formData, itemData, idKey) {
+	let newObj = {}
+	for (let f of Object.keys(formData)) {
+		newObj[f] = itemData[f]
+	}
+	if (idKey) {
+		newObj[idKey] = itemData[idKey]
+	}
+	return newObj
 }

src/views/index.vue

@@ -1,10 +1,29 @@
 <template>
-	<div>index </div>
+	<div>
+		<UploadOne ref="upload" />
+		<button @click="test">上传</button>
+		<img :src="src" alt="暂无图片" width="100" height="100" />
+	</div>
 </template>
 
 <script>
+	import UploadOne from '@/components/UploadOne/index.vue'
 	export default {
-		name: 'Index'
+		name: 'Index',
+		data() {
+			return {
+				src: ''
+			}
+		},
+		components: {
+			UploadOne
+		},
+		methods: {
+			async test() {
+				const res = await this.$refs.upload.uploadPut()
+				this.src = this.$store.state.oss.ossBaseUrl + res
+			}
+		}
 	}
 </script>
 

src/views/system/tableHead/index.vue

@@ -0,0 +1,272 @@
+<template>
+	<div class="table-head">
+		<el-row :gutter="20">
+			<el-col :span="4" :xs="24">
+				<div class="menu">
+					<el-input placeholder="输入菜单名称搜索" v-model="filterText" style="margin-bottom: 20px"></el-input>
+					<el-tree
+						:data="menuList"
+						node-key="id"
+						default-expand-all
+						:highlight-current="true"
+						:expand-on-click-node="false"
+						:filter-node-method="filterNode"
+						ref="tree"
+						@node-click="menuClick"
+					>
+						<span class="custom-tree-node" slot-scope="{ data }">
+							<span>{{ data.menuName }}</span>
+						</span>
+					</el-tree>
+				</div>
+			</el-col>
+			<el-col :span="20" :xs="24">
+				<div class="main">
+					<template v-if="menuId">
+						<el-input v-model="queryParams.columnName" placeholder="输入表头名称" clearable size="small" style="width: 150px; margin-bottom: 10px" />
+						<el-button type="primary" plain size="small " style="margin: 0 0 10px 3px" @click="getList" v-hasPermi="['system:tableHead:listTable']">搜索</el-button>
+						<el-button type="primary" plain size="small " style="margin: 0 0 10px 3px" @click="handleAdd" v-hasPermi="['system:tableHead:addTable']">新增</el-button>
+					</template>
+					<el-table v-loading="loading" :data="tableHeadList">
+						<el-table-column type="index" width="55" align="center" label="序号" />
+						<el-table-column label="列名称" prop="columnName" width="120" />
+						<el-table-column label="前端列名" prop="uiColumn" :show-overflow-tooltip="true" width="150" />
+						<el-table-column label="后端列名" prop="apiColum" :show-overflow-tooltip="true" width="150" />
+						<el-table-column label="是否必须显示" align="center" width="100">
+							<template slot-scope="scope">
+								<el-switch v-model="scope.row.required" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+							</template>
+						</el-table-column>
+						<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+							<template slot-scope="scope" v-if="scope.row.roleId !== 1">
+								<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:tableHead:updTable']">修改</el-button>
+								<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:tableHead:delTable']">删除</el-button>
+							</template>
+						</el-table-column>
+					</el-table>
+
+					<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+				</div>
+			</el-col>
+		</el-row>
+		<!-- 添加表头对话框 -->
+		<el-dialog title="添加表头" :visible.sync="open" width="500px" append-to-body>
+			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
+				<el-form-item label="所属菜单" prop="menuId">
+					<el-input disabled :value="menuName" />
+				</el-form-item>
+				<el-form-item label="列名称" prop="columnName">
+					<el-input v-model="form.columnName" placeholder="请输入列名称" />
+				</el-form-item>
+				<el-form-item label="前端列名" prop="uiColumn">
+					<el-input v-model="form.uiColumn" placeholder="请输入列名称" />
+				</el-form-item>
+				<el-form-item label="后端列名" prop="apiColum">
+					<el-input v-model="form.apiColum" placeholder="请输入列名称" />
+				</el-form-item>
+				<!-- <el-form-item label="排序" prop="apiColum">
+					<el-input v-model="form.apiColum" placeholder="请输入列名称" />
+				</el-form-item> -->
+				<el-form-item label="是否必须显示" prop="required">
+					<el-radio-group v-model="form.required">
+						<el-radio v-for="dict in dict.type.sys_tableHead_required" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+					</el-radio-group>
+				</el-form-item>
+			</el-form>
+			<div slot="footer" class="dialog-footer">
+				<el-button type="primary" @click="submitForm">确 定</el-button>
+				<el-button @click="cancel">取 消</el-button>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	import { listMenu, tableHeadAdd, tableHeadList, tableHeadUpd, tableHeadDel } from '@/api/system/tableHead'
+	import { checkPermi } from '@/utils/permission'
+	export default {
+		name: 'TableHead',
+		dicts: ['sys_tableHead_required'],
+		data() {
+			return {
+				//遮罩层
+				loading: false,
+				//搜索菜单
+				filterText: '',
+				//菜单数据
+				menuList: [],
+				//选中的菜单id
+				menuId: 0,
+				//选中菜单名称
+				menuName: '',
+				//表头数据
+				tableHeadList: [],
+				//总条数
+				total: 0,
+				// 查询参数
+				queryParams: {
+					pageNum: 1,
+					pageSize: 10,
+					columnName: undefined
+				},
+				//弹窗显示
+				open: false,
+				form: {
+					menuId: null,
+					columnName: '',
+					uiColumn: '',
+					apiColum: '',
+					required: '0'
+				},
+				//表单验证
+				rules: {
+					columnName: [{ required: true, message: '列名称不能为空' }],
+					uiColumn: [{ required: true, message: '前端列名不能为空' }],
+					apiColum: [{ required: true, message: '后端列名不能为空' }]
+				}
+			}
+		},
+		watch: {
+			filterText(val) {
+				this.$refs.tree.filter(val)
+			}
+		},
+		created() {
+			this.getMenuList()
+		},
+		methods: {
+			//获取菜单
+			getMenuList() {
+				listMenu().then((res) => {
+					if (res.code == 200) {
+						this.menuList = this.handleTree(res.data, 'menuId', 'parentId')
+					}
+				})
+			},
+			//搜索过滤节点
+			filterNode(value, data) {
+				if (!value) return true
+				return data.menuName.indexOf(value) !== -1
+			},
+			/** 转换菜单数据结构 */
+			normalizer(node) {
+				if (node.children && !node.children.length) {
+					delete node.children
+				}
+				return {
+					id: node.menuId,
+					label: node.menuName,
+					children: node.children
+				}
+			},
+			//点击菜单
+			menuClick(data) {
+				this.tableHeadList = []
+				this.menuId = data.menuId
+				this.menuName = data.menuName
+				this.getList()
+			},
+			//获取表头数据
+			getList() {
+				if (!checkPermi(['system:tableHead:listTable']) || !this.menuId) {
+					return
+				}
+				tableHeadList({ menuId: this.menuId, ...this.queryParams }).then((res) => {
+					if (res.code == 200) {
+						this.total = res.total
+						this.tableHeadList = res.rows
+					}
+				})
+			},
+			handleStatusChange() {},
+			//新增表头数据
+			handleAdd() {
+				this.form.menuId = this.menuId
+				this.open = true
+			},
+			//修改表头数据
+			handleUpdate(data) {
+				this.form = this.copyFormFiled(this.form, data, 'id')
+				this.open = true
+			},
+			//删除表头数据
+			handleDelete(data) {
+				this.$del()
+					.then(() => {
+						tableHeadDel(data.id).then((res) => {
+							if (res.code == 200) {
+								this.$msg({ message: '删除成功' })
+								this.tableHeadList = this.tableHeadList.filter((item) => item.id != data.id)
+							}
+						})
+					})
+					.catch(() => {})
+			},
+			//弹窗确定
+			submitForm() {
+				this.$refs.form.validate((valid) => {
+					if (valid) {
+						if (this.form.id) {
+							tableHeadUpd(this.form).then((res) => {
+								if (res.code == 200) {
+									this.$msg({ message: '修改成功' })
+									this.updateData(this.form)
+									this.cancel()
+								}
+							})
+						} else {
+							tableHeadAdd(this.form).then((res) => {
+								if (res.code == 200) {
+									this.$msg({ message: '添加成功' })
+									this.form.id = res.data
+									this.updateData(this.form)
+									this.cancel()
+								}
+							})
+						}
+					} else {
+						return false
+					}
+				})
+			},
+			//前端更新数据
+			updateData(data) {
+				let obj = this.tableHeadList.find((item) => item.id == data.id)
+				if (obj) {
+					this.tableHeadList = this.tableHeadList.map((item) => {
+						if (item.id == data.id) {
+							return {
+								...this.copyFormFiled(item, data)
+							}
+						}
+						return {
+							...item
+						}
+					})
+				} else {
+					this.tableHeadList.push(data)
+				}
+			},
+			//弹窗取消
+			cancel() {
+				this.resetForm()
+				this.open = false
+			},
+			//表单重置
+			resetForm() {
+				this.$refs.form.resetFields()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.table-head {
+		.menu {
+			padding: 10px;
+		}
+		.main {
+			padding: 10px;
+		}
+	}
+</style>

vue.config.js

@@ -21,7 +21,7 @@ module.exports = {
 		open: true,
 		proxy: {
 			[process.env.VUE_APP_BASE_API]: {
-				target: `http://192.168.0.104:8080`,
+				target: `http://192.168.0.104:9098`,
 				changeOrigin: true,
 				pathRewrite: {
 					['^' + process.env.VUE_APP_BASE_API]: ''