222

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/components/Upload/index.vue

@@ -1,86 +0,0 @@
-<template>
-	<div class="upload">
-		<div class="upload-box" @click="choiceFile" v-loading="loading">
-			<div class="upload-btn" v-if="src == ''">
-				<i class="el-icon-upload"></i>
-				<span class="upload-text">点击选择文件</span>
-				<span><small>允许上传格式:jpg/png/gif,文件大小不超过5M</small></span>
-			</div>
-			<div class="upload-show" v-else>
-				<img :src="src" alt="" />
-			</div>
-		</div>
-		<input type="file" name="file" ref="file" :multiple="multiple" @change="getFile" style="display: none" :accept="accept" />
-	</div>
-</template>
-
-<script>
-	import upload from '@/utils/oss.js'
-	export default {
-		data() {
-			return {
-				url: '',
-				src: '',
-				multiple: false,
-				loading: false,
-				accept: 'image/jpg,image/jpeg,image/png,image/gif'
-			}
-		},
-		methods: {
-			choiceFile() {
-				//this.loading = true
-				this.$refs.file.click()
-			},
-			getFile(e) {
-				//this.loading = false
-				let file = e.target.files[0]
-				this.src = URL.createObjectURL(file)
-				this.$emit('getFileInfo', file)
-			},
-			sub() {
-				upload(this.files).then((res) => {
-					console.log(res)
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.upload-box {
-		width: 360px;
-		height: 300px;
-		user-select: none;
-		-webkit-user-select: none;
-		cursor: pointer;
-		.upload-btn {
-			width: 100%;
-			height: 100%;
-			border: 1px dashed #d9d9d9;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			color: #666;
-			.upload-text {
-				display: inline-block;
-				margin: 10px 0;
-			}
-			i {
-				font-size: 50px;
-				color: #c0c4cc;
-			}
-		}
-		.upload-show {
-			width: 100%;
-			height: 100%;
-			border: 1px solid #d9d9d9;
-			padding: 10px;
-			box-sizing: border-box;
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-</style>

src/components/UploadOne/index.vue

@@ -0,0 +1,146 @@
+<template>
+	<div class="upload">
+		<div class="upload-box" @click="choiceFile">
+			<div class="upload-btn" v-if="!preview">
+				<i class="el-icon-upload"></i>
+				<span class="upload-text">点击选择文件</span>
+				<span>
+					<small>允许上传格式:jpg/png/gif</small><br />
+					<small>文件大小不超过{{ size }}M</small><br />
+				</span>
+			</div>
+			<div class="upload-show" v-else>
+				<div class="progress" v-show="progressStatus">
+					<div class="mask"></div>
+					<el-progress type="circle" :percentage="$store.state.oss.progress"></el-progress>
+				</div>
+
+				<img :src="preview" alt="" />
+			</div>
+		</div>
+		<input type="file" name="file" ref="file" @change="getFile" style="display: none" :accept="accept" />
+	</div>
+</template>
+
+<script>
+	import upload from '@/utils/oss.js'
+	export default {
+		props: {
+			//限制文件大小
+			size: {
+				type: Number,
+				default: 3
+			}
+		},
+		data() {
+			return {
+				//文件对象
+				fileObj: null,
+				//预览地址
+				preview: null,
+				//文件类型
+				accept: 'image/jpg,image/jpeg,image/png,image/gif',
+				//显示进度条
+				showProgress: false
+			}
+		},
+		computed: {
+			progressStatus() {
+				if (this.showProgress && this.$store.state.oss.progress != 100) {
+					return true
+				}
+				return false
+			}
+		},
+		methods: {
+			//选择文件
+			choiceFile() {
+				this.$refs.file.click()
+			},
+			//获取文件对象
+			getFile(e) {
+				this.fileObj = e.target.files[0]
+				if (!this.fileObj) return
+				let types = this.accept.split(',')
+				let type = this.fileObj.type
+				let size = this.fileObj.size
+				if (!types.includes(type)) {
+					this.$msg({ type: 'error', message: '文件类型不符' })
+					return
+				}
+				if (size > this.size * 1024 * 1024) {
+					this.$msg({ type: 'error', message: `文件不能大于${this.size}M` })
+					return
+				}
+				this.preview = URL.createObjectURL(this.fileObj)
+			},
+			//上传图片到oss并返回图片路径
+			uploadPut() {
+				if (!this.fileObj) return
+				this.showProgress = true
+				return upload(this.fileObj).then((res) => res.url)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.upload-box {
+		width: 360px;
+		height: 300px;
+		user-select: none;
+		-webkit-user-select: none;
+		cursor: pointer;
+		.upload-btn {
+			width: 100%;
+			height: 100%;
+			border: 1px dashed #d9d9d9;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			color: #666;
+			text-align: left;
+			.upload-text {
+				display: inline-block;
+				margin: 10px 0;
+				font-weight: bolder;
+			}
+			i {
+				font-size: 50px;
+				color: #c0c4cc;
+			}
+		}
+		.upload-show {
+			width: 100%;
+			height: 100%;
+			border: 1px solid #d9d9d9;
+			padding: 10px;
+			box-sizing: border-box;
+			position: relative;
+			.progress {
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 0;
+				left: 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				z-index: 9999;
+				.mask {
+					width: 100%;
+					height: 100%;
+					background-color: rgba($color: #ddd, $alpha: 0.8);
+					position: absolute;
+					top: 0;
+					left: 0;
+				}
+			}
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+</style>

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/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import app from './modules/app'
+import oss from './modules/oss'
 import user from './modules/user'
 import tagsView from './modules/tagsView'
 import permission from './modules/permission'
@@ -10,14 +11,15 @@ import getters from './getters'
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
-  modules: {
-    app,
-    user,
-    tagsView,
-    permission,
-    settings
-  },
-  getters
+	modules: {
+		app,
+		user,
+		tagsView,
+		permission,
+		settings,
+		oss
+	},
+	getters
 })
 
 export default store

src/store/modules/oss.js

@@ -0,0 +1,40 @@
+const state = {
+	region: 'oss-cn-beijing',
+	accessKeyId: 'LTAI5tJe94eBRuNzuVFyt1C2',
+	accessKeySecret: 'YRhe8lc7vpbxX8Fi4qvosDqVERFdjJ',
+	bucket: 'yangguzhineng',
+	folder: 'test',
+	progress: 0,
+	ossBaseUrl: '',
+	stsToken: ''
+}
+const mutations = {
+	SET_REGION: (state, payload) => {
+		state.region = payload
+	},
+	SET_ACCESS_KEY_ID: (state, payload) => {
+		state.accessKeyId = payload
+	},
+	SET_ACCESS_KEY_SECRET: (state, payload) => {
+		state.accessKeySecret = payload
+	},
+	SET_BUCKET: (state, payload) => {
+		state.bucket = payload
+	},
+	SET_FOLDER: (state, payload) => {
+		state.folder = payload
+	},
+	SET_PROGRESS: (state, payload) => {
+		state.progress = payload
+	},
+	SET_OSS_BASE_URL: (state) => {
+		state.ossBaseUrl = `https://${state.bucket}.${state.region}.aliyuncs.com/`
+	}
+}
+const actions = {}
+export default {
+	namespaced: true,
+	state,
+	mutations,
+	actions
+}

src/utils/oss.js

@@ -1,43 +1,29 @@
 import OSS from 'ali-oss'
-/**
- * 配置信息
- */
-const region = 'oss-cn-beijing'
-const accessKeyId = 'LTAI5tJe94eBRuNzuVFyt1C2'
-const accessKeySecret = 'YRhe8lc7vpbxX8Fi4qvosDqVERFdjJ'
-const bucket = 'yangguzhineng'
-const folder = 'test'
+import store from '@/store'
 import { Message } from 'element-ui'
 
 let client = new OSS({
-	region: region,
-	accessKeyId: accessKeyId,
-	accessKeySecret: accessKeySecret,
-	bucket: bucket
+	region: store.state.oss.region,
+	accessKeyId: store.state.oss.accessKeyId,
+	accessKeySecret: store.state.oss.accessKeySecret,
+	bucket: store.state.oss.bucket
 })
 
-/**
- *
- * @param {上传是设置文件key , 一般为文件名称} objectKey
- * @param {文件file} file
- */
-
 //  上传
 const CooOss = function (file) {
 	if (this instanceof CooOss) {
-		let objectKey = folder + '/' + file.lastModified + '_' + getFileNameUUID()
+		let objectKey = store.state.oss.folder + '/' + file.lastModified + '_' + getFileNameUUID()
 		return new Promise((resolve, reject) => {
 			client
 				.multipartUpload(objectKey, file, {
 					progress: function (p) {
-						//上传进度
-						console.log(p)
+						store.commit('oss/SET_PROGRESS', p * 100)
 					}
 				})
 				.then((result) => {
 					resolve({
 						code: 200,
-						url: this.getOssFileUrl(objectKey),
+						url: objectKey,
 						msg: 'ok'
 					})
 				})
@@ -85,7 +71,6 @@ CooOss.prototype.getOssFileUrl = (obecjtKey) => {
 	if (!obecjtKey) return new Error('object key 必须传')
 	return 'https://' + bucket + '.' + region + '.aliyuncs.com/' + obecjtKey
 }
-
 const getFileNameUUID = () => {
 	function rx() {
 		return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)

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/login3.vue

@@ -1,296 +0,0 @@
-<template>
-	<div class="login">
-		<div class="header">
-			<div class="inner">
-				<div class="header-left">
-					<div class="header-left-logo">
-						<img src="~@/assets/images/login/icon.png" alt="" />
-					</div>
-					<div class="header-left-line"></div>
-					<div class="header-left-text">
-						<p style="font-size: 24px">CZO智能分析管理系统</p>
-						<p style="font-size: 12px">Enterprise management integration platform</p>
-					</div>
-				</div>
-				<div class="header-right">
-					<span>合同样本</span>
-					<span>税收政策</span>
-					<span>政府惠企政策</span>
-					<span>四险一金</span>
-				</div>
-			</div>
-		</div>
-		<div class="main">
-			<div class="inner">
-				<div class="mian-info">
-					<p>企业智能信息化 高效管理 节能降耗</p>
-					<p style="margin-top: 20px">实现 标准化、机制化、流程化、责任化、市场化、人性化</p>
-					<div class="main-info-link">
-						<a href="javascript:void(0);">产品视频</a>
-						<a href="javascript:void(0);">企业诊断</a>
-					</div>
-				</div>
-				<div class="main-login">
-					<div class="main-login-title">黑龙江省华滋佐味酿造有限公司</div>
-					<div class="main-login-form">
-						<div class="main-login-from-user">
-							<label>
-								<span>账号</span>
-								<input type="text" auto-complete="off" v-model="formData.username" />
-							</label>
-						</div>
-						<div class="main-login-from-pass">
-							<label>
-								<span>密码</span>
-								<input type="password" auto-complete="off" v-model="formData.password" />
-							</label>
-						</div>
-						<div class="main-login-from-btn">
-							<button @click="handleLogin">
-								<span v-if="!loading">立即登录</span>
-								<span v-else>登 录 中...</span>
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="footer">
-			<div class="inner">
-				<a href="javascript:void(0);">代理商</a>
-				<a href="javascript:void(0);">加盟商</a>
-				<a href="javascript:void(0);">合作商</a>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				loading: false,
-				formData: {
-					username: 'admin',
-					password: '15645766666'
-				},
-				redirect: undefined
-			}
-		},
-		watch: {
-			$route: {
-				handler: function (route) {
-					this.redirect = route.query && route.query.redirect
-				},
-				immediate: true
-			}
-		},
-		methods: {
-			handleLogin() {
-				if (this.formData.username.trim() == '') {
-					this.$msg({ type: 'error', message: '账号不能为空' })
-					return
-				}
-				if (this.formData.password.trim() == '') {
-					this.$msg({ type: 'error', message: '密码不能为空' })
-					return
-				}
-				this.loading = true
-				this.$store
-					.dispatch('Login', this.formData)
-					.then(() => {
-						this.$router.push({ path: this.redirect || '/' }).catch(() => {})
-					})
-					.catch(() => {
-						this.loading = false
-					})
-			}
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.login {
-		width: 100%;
-		height: 100vh;
-		.header,
-		.footer {
-			width: 100%;
-			height: 80px;
-			background: url('~@/assets/images/login/line.jpg') 0 0 no-repeat;
-		}
-		.main {
-			width: 100%;
-			height: calc(100vh - 160px);
-			background: url('~@/assets/images/login/main.jpg') 0 0 no-repeat;
-		}
-		.inner {
-			width: 80%;
-			margin: 0 auto;
-			display: flex;
-		}
-		.header {
-			.inner {
-				height: 80px;
-				justify-content: space-between;
-				align-items: center;
-				.header-left {
-					display: flex;
-					color: #fff;
-					.header-left-logo,
-					.header-left-line,
-					.header-left-text {
-						height: 60px;
-						display: flex;
-						align-items: center;
-					}
-					.header-left-line {
-						width: 2px;
-						background: url('~@/assets/images/login/1.png') 0 0 no-repeat;
-						margin: 0 5px;
-					}
-					.header-left-text {
-						height: 50px;
-						align-items: flex-start;
-						flex-direction: column;
-						justify-content: space-around;
-					}
-				}
-				.header-right {
-					height: 60px;
-					display: flex;
-					align-items: flex-end;
-					span {
-						background-color: #3cc3cc;
-						display: inline-block;
-						border-radius: 5px;
-						padding: 3px 5px;
-						margin-left: 8px;
-					}
-				}
-			}
-		}
-		.footer {
-			.inner {
-				height: 80px;
-				align-items: center;
-				a {
-					display: inline-block;
-					background-color: #3cc3cc;
-					border-radius: 5px;
-					-webkit-box-shadow: 0 0 11px 3px #4fcaca inset;
-					box-shadow: inset 0 0 11px 3px #4fcaca;
-					width: 175px;
-					height: 50px;
-					border: 1px solid #000;
-					font-size: 18px;
-					margin-right: 8px;
-					color: #fff;
-					text-align: center;
-					line-height: 50px;
-				}
-			}
-		}
-		.main {
-			.inner {
-				height: 100%;
-				align-items: center;
-				justify-content: space-between;
-				.mian-info {
-					p {
-						color: #fff;
-						font-size: 28px;
-						font-weight: bolder;
-					}
-					.main-info-link {
-						margin-top: 100px;
-						a {
-							display: inline-block;
-							width: 175px;
-							height: 50px;
-							color: #fff;
-							border-radius: 5px;
-							text-align: center;
-							line-height: 50px;
-							font-size: 18px;
-							border: 1px solid #000;
-							&:first-child {
-								background: rgba(7, 34, 83, 0.89);
-								-webkit-box-shadow: 0 0 11px 3px rgba(8, 49, 157, 0.8) inset;
-								box-shadow: inset 0 0 11px 3px rgba(8, 49, 157, 0.8);
-							}
-							&:last-child {
-								background: rgba(51, 204, 204, 0.7);
-								-webkit-box-shadow: 0 0 11px 3px #4fcaca inset;
-								box-shadow: inset 0 0 11px 3px #4fcaca;
-								margin-left: 8px;
-							}
-						}
-					}
-				}
-				.main-login {
-					width: 300px;
-					.main-login-title {
-						width: 100%;
-						height: 45px;
-						line-height: 45px;
-						font-size: 18px;
-						background: #07276a;
-						border-radius: 5px 5px 0 0;
-						color: #fff;
-						text-align: center;
-					}
-					.main-login-form {
-						width: 100%;
-						background: #a4a4af;
-						border-radius: 0 0 5px 5px;
-						padding: 40px 30px;
-						box-sizing: border-box;
-						.main-login-from-user,
-						.main-login-from-pass {
-							width: 240px;
-							border: 1px solid #000;
-							height: 30px;
-							border-radius: 5px;
-							margin-bottom: 20px;
-							overflow: hidden;
-							label {
-								display: flex;
-								span {
-									display: inline-block;
-									width: 70px;
-									height: 30px;
-									background-color: #a6a6a6;
-									text-align: center;
-									line-height: 30px;
-								}
-								input {
-									display: block;
-									width: 170px;
-									height: 30px;
-									padding: 0;
-									margin: 0;
-									border: none;
-									background-color: #fff;
-									outline: none;
-									line-height: 30px;
-									padding-left: 5px;
-								}
-							}
-						}
-						.main-login-from-btn {
-							button {
-								width: 100%;
-								color: #fff;
-								background-color: #07276a;
-								height: 35px;
-								border-radius: 5px;
-								outline: none;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-</style>

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>