Selaa lähdekoodia

Merge branch 'master' of http://182.92.174.150:3000/tiegu/czo

lz 3 vuotta sitten
vanhempi
sitoutus
8fd3e0ee8b
2 muutettua tiedostoa jossa 346 lisäystä ja 593 poistoa
  1. 175 224
      src/views/system/post/index.vue
  2. 171 369
      src/views/system/role/index.vue

+ 175 - 224
src/views/system/post/index.vue

@@ -1,98 +1,105 @@
 <template>
-	<div class="app-container">
-		<div class="item">
-			<div class="left_tag">
-				<div class="role border_role" :class="{ activeClass: over == 1 }" @click="getNature">性质</div>
-				<div class="role functional" :class="{ activeClass: over == 2 }" @click="getPostList">岗位</div>
-			</div>
-			<div class="right_add">
-				<el-button type="primary" icon="el-icon-plus" class="add_btn" @click="handleAddNature" v-show="natureShow">添加</el-button>
-				<el-button type="primary" icon="el-icon-plus" class="add_btn" @click="handleAddPost" v-show="postShow">添加</el-button>
-			</div>
-		</div>
-		<!-- 性质列表 -->
-		<el-table
-			v-loading="loading"
-			:data="natureList"
-			:row-class-name="tableRowClassName"
-			:row-style="selectedstyle"
-			border
-			class="roleTable"
-			@row-click="natureLineClick"
-			@row-dblclick="natureLineDbclick"
-			v-show="natureShow"
-		>
-			<el-table-column label="性质" prop="natureName" width="198" />
-			<el-table-column label="描述" prop="remarks" width="416" />
-			<el-table-column label="操作" class-name="small-padding fixed-width">
-				<template slot-scope="scope">
-					<el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['system:role:edit']" @click="handleUpdate(scope.row)">编辑</el-button>
-					<el-button size="mini" type="text" icon="el-icon-delete-solid" v-hasPermi="['system:role:remove']" @click="handleDelete(scope.row)">删除</el-button>
-					<el-button size="mini" type="text" icon="el-icon-top" @click="natureRise(scope.row)">上升</el-button>
-					<el-button size="mini" type="text" icon="el-icon-bottom" @click="natureDecline(scope.row)">下降</el-button>
-				</template>
-			</el-table-column>
-		</el-table>
-		<!-- 岗位列表 -->
-		<el-table
-			v-loading="loading"
-			:data="postList"
-			border
-			:row-class-name="tableRowClassName"
-			:row-style="selectedstyle1"
-			class="roleTable"
-			@row-click="postLineClick"
-			v-show="postShow"
-		>
-			<el-table-column label="岗位" prop="postName" width="198" />
-			<el-table-column label="性质" width="102">
-				{{natureName}}
-			</el-table-column>
-			<el-table-column label="描述" prop="remark" width="231" />
-			<el-table-column label="操作" class-name="small-padding fixed-width">
-				<template slot-scope="scope">
-					<el-button size="mini" type="text" icon="el-icon-edit" @click="updataPost(scope.row)">编辑</el-button>
-					<el-button size="mini" type="text" icon="el-icon-delete-solid" @click="deletePost(scope.row)">删除</el-button>
-					<el-button size="mini" type="text" icon="el-icon-top" @click="postRise(scope.row)">上升</el-button>
-					<el-button size="mini" type="text" icon="el-icon-bottom" @click="postDecline(scope.row)">下降</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 class="page-container">
+		<div class="content-container">
+			<div class="main">
+				<div class="table-nav">
+					<div class="tags">
+						<div class="tag" :class="{ activeClass: over == 1 }" @click="getNature">性质</div>
+						<div class="tag" :class="{ activeClass: over == 2 }" @click="getPostList">岗位</div>
+					</div>
+					<div class="actions">
+						<el-button type="primary" plain size="small " @click="handleAddNature" v-show="natureShow">添加</el-button>
+						<el-button type="primary" plain size="small " @click="handleAddPost" v-show="postShow">添加</el-button>
+					</div>
+				</div>
+				<!-- 性质列表 -->
+				<el-table
+					v-loading="loading"
+					:data="natureList"
+					:header-cell-style="{ 'text-align': 'center' }"
+					:cell-style="{ textAlign: 'center', cursor: 'pointer' }"
+					border
+					highlight-current-row
+					@row-click="natureLineClick"
+					v-show="natureShow"
+				>
+					<el-table-column label="性质" prop="natureName" width="200">
+						<template slot-scope="scope">
+							<a href="javascript:void(0);" class="linked" @click="natureLineDbclick(scope.row)">{{ scope.row.natureName }}</a>
+						</template>
+					</el-table-column>
+					<el-table-column label="描述" prop="remarks" width="1200" />
+					<el-table-column label="操作" class-name="small-padding fixed-width">
+						<template slot-scope="scope">
+							<el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['system:role:edit']" @click="handleUpdate(scope.row)">编辑</el-button>
+							<el-button size="mini" type="text" icon="el-icon-delete-solid" v-hasPermi="['system:role:remove']" @click="handleDelete(scope.row)">删除</el-button>
+							<el-button size="mini" type="text" icon="el-icon-top" @click="natureRise(scope.row, scope.$index)">上升</el-button>
+							<el-button size="mini" type="text" icon="el-icon-bottom" @click="natureDecline(scope.row, scope.$index)">下降</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+				<!-- 岗位列表 -->
+				<el-table
+					v-loading="loading"
+					:data="postList"
+					border
+					:header-cell-style="{ 'text-align': 'center' }"
+					highlight-current-row
+					:cell-style="{ textAlign: 'center', cursor: 'pointer' }"
+					@row-click="postLineClick"
+					v-show="postShow"
+				>
+					<el-table-column label="岗位" prop="postName" width="200" />
+					<el-table-column label="性质" width="200">
+						{{ natureName }}
+					</el-table-column>
+					<el-table-column label="描述" prop="remark" width="800" />
+					<el-table-column label="操作" class-name="small-padding fixed-width">
+						<template slot-scope="scope">
+							<el-button size="mini" type="text" icon="el-icon-edit" @click="updataPost(scope.row)">编辑</el-button>
+							<el-button size="mini" type="text" icon="el-icon-delete-solid" @click="deletePost(scope.row)">删除</el-button>
+							<el-button size="mini" type="text" icon="el-icon-top" @click="postRise(scope.row, scope.$index)">上升</el-button>
+							<el-button size="mini" type="text" icon="el-icon-bottom" @click="postDecline(scope.row, scope.$index)">下降</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" /> -->
 
-		<!-- 添加或修改性质对话框 -->
-		<el-dialog :title="title" :visible.sync="natureOpen" width="500px" append-to-body>
-			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
-				<el-form-item label="性质" prop="natureName">
-					<el-input v-model="form.natureName" placeholder="请输入性质" />
-				</el-form-item>
-				<el-form-item label="描述" prop="remarks">
-					<el-input v-model="form.remarks" placeholder="请输入描述" />
-				</el-form-item>
-			</el-form>
-			<div slot="footer" class="dialog-footer">
-				<el-button @click="cancelNature">取 消</el-button>
-				<el-button type="primary" @click="submitFormNature">保 存</el-button>
+				<!-- 添加或修改性质对话框 -->
+				<el-dialog :title="title" :visible.sync="natureOpen" width="500px" append-to-body>
+					<el-form ref="form" :model="form" :rules="rules" label-width="80px">
+						<el-form-item label="性质" prop="natureName">
+							<el-input v-model="form.natureName" placeholder="请输入性质" />
+						</el-form-item>
+						<el-form-item label="描述" prop="remarks">
+							<el-input v-model="form.remarks" placeholder="请输入描述" />
+						</el-form-item>
+					</el-form>
+					<div slot="footer" class="dialog-footer">
+						<el-button @click="cancelNature">取 消</el-button>
+						<el-button type="primary" @click="submitFormNature">保 存</el-button>
+					</div>
+				</el-dialog>
+				<!-- 岗位添加或修改对话框 -->
+				<el-dialog :title="title" :visible.sync="postOpen" width="500px" append-to-body>
+					<el-form ref="formPost" :model="formPost" :rules="rulesPost" label-width="80px">
+						<el-form-item label="岗位" prop="postName">
+							<el-input v-model="formPost.postName" placeholder="请输入岗位" />
+						</el-form-item>
+						<el-form-item label="性质">
+							<el-input v-model="natureName" disabled />
+						</el-form-item>
+						<el-form-item label="描述" prop="remark">
+							<el-input v-model="formPost.remark" placeholder="请输入描述" />
+						</el-form-item>
+					</el-form>
+					<div slot="footer" class="dialog-footer">
+						<el-button @click="cancelPost">取 消</el-button>
+						<el-button type="primary" @click="submitFormPost">保 存</el-button>
+					</div>
+				</el-dialog>
 			</div>
-		</el-dialog>
-		<!-- 岗位添加或修改对话框 -->
-		<el-dialog :title="title" :visible.sync="postOpen" width="500px" append-to-body>
-			<el-form ref="formPost" :model="formPost" :rules="rulesPost" label-width="80px">
-				<el-form-item label="岗位" prop="postName">
-					<el-input v-model="formPost.postName" placeholder="请输入岗位" />
-				</el-form-item>
-				<el-form-item label="性质">
-					<el-input v-model="natureName" disabled />
-				</el-form-item>
-				<el-form-item label="描述" prop="remark">
-					<el-input v-model="formPost.remark" placeholder="请输入描述" />
-				</el-form-item>
-			</el-form>
-			<div slot="footer" class="dialog-footer">
-				<el-button @click="cancelPost">取 消</el-button>
-				<el-button type="primary" @click="submitFormPost">保 存</el-button>
-			</div>
-		</el-dialog>
+		</div>
 	</div>
 </template>
 
@@ -106,16 +113,6 @@ export default {
 		return {
 			// 遮罩层
 			loading: true,
-			// 选中数组
-			ids: [],
-			// 非单个禁用
-			single: true,
-			// 非多个禁用
-			multiple: true,
-			// 显示搜索条件
-			showSearch: true,
-			// 总条数
-			// total: 0,
 			// 岗位表格数据
 			postList: [],
 			// 弹出层标题
@@ -125,7 +122,7 @@ export default {
 			// 查询参数
 			queryParams: {
 				natureId: 0,
-				postName: '',
+				postName: ''
 			},
 			// 表单参数
 			form: {},
@@ -150,7 +147,7 @@ export default {
 			nature: {},
 			perPostId: 0,
 			decPostId: 0,
-			natureObj: {},
+			natureObj: {}
 		}
 	},
 	created() {
@@ -184,17 +181,6 @@ export default {
 		tableRowClassName({ row, rowIndex }) {
 			row.index = rowIndex
 		},
-		//设置行对象(row)的样式(style)
-		selectedstyle({ row, rowIndex }) {
-			if (this.getIndex === rowIndex) {
-				return { 'background-color': '#EBEEF5' }
-			}
-		},
-		selectedstyle1({ row, rowIndex }) {
-			if (this.getIndex1 === rowIndex) {
-				return { 'background-color': '#EBEEF5' }
-			}
-		},
 		// 单击性质表格某一行
 		natureLineClick(row, event, column) {
 			this.getIndex = row.index
@@ -202,10 +188,11 @@ export default {
 		},
 		// 双击性质表格某一行
 		natureLineDbclick(row) {
+			console.log(row)
 			this.queryParams.natureId = row.natureId
 			this.natureName = row.natureName
 			this.nature = row
-			listPost(this.queryParams).then(res => {
+			listPost(this.queryParams).then((res) => {
 				if (res.code === 200) {
 					this.postList = res.data
 					this.natureShow = false
@@ -234,7 +221,7 @@ export default {
 				if (valid) {
 					if (this.formPost.postId != undefined) {
 						updatePost(this.formPost).then((response) => {
-							this.$modal.msgSuccess('修改成功')
+							this.$msg({ message: '修改成功' })
 							this.postOpen = false
 							this.getList()
 							this.natureLineDbclick(this.nature)
@@ -244,17 +231,17 @@ export default {
 							this.formPost.natureId = this.queryParams.natureId
 							this.formPost.postSort = parseInt(this.postList[0].postSort) + 1
 							addPost(this.formPost).then((response) => {
-								this.$modal.msgSuccess('新增成功')
+								this.$msg({ message: '添加成功' })
 								this.formPost = {}
 								this.postOpen = false
 								this.getList()
 								this.natureLineDbclick(this.nature)
 							})
-						}else{
+						} else {
 							this.formPost.postSort = 1
 							this.formPost.natureId = this.queryParams.natureId
 							addPost(this.formPost).then((response) => {
-								this.$modal.msgSuccess('新增成功')
+								this.$msg({ message: '添加成功' })
 								this.formPost = {}
 								this.formPost.postSort = null
 								this.postOpen = false
@@ -286,7 +273,7 @@ export default {
 		},
 		// 修改岗位按钮
 		updataPost(row) {
-			getPost(row.postId).then(res => {
+			getPost(row.postId).then((res) => {
 				this.formPost = res.data
 				this.postOpen = true
 				this.title = '修改岗位'
@@ -295,22 +282,22 @@ export default {
 		// 删除岗位
 		deletePost(row) {
 			this.$modal
-			.confirm('是否确认删除岗位为"' + row.postName + '"的数据项?')
-			.then(function () {
-				return delPost(row.postId)
-			})
-			.then((res) => {
-				console.log(res)
-				if (res.code === 200) {
-					this.getList()
-					this.natureLineDbclick(this.nature)
-					this.$modal.msgSuccess('删除成功')
-				}else if (res.code === 500) {
-					this.getList()
-					this.$notify({title: '警告', message: res.msg, type: 'warning'});
-				}
-			})
-			.catch(() => {})
+				.confirm('是否确认删除岗位为"' + row.postName + '"的数据项?')
+				.then(function () {
+					return delPost(row.postId)
+				})
+				.then((res) => {
+					console.log(res)
+					if (res.code === 200) {
+						this.getList()
+						this.natureLineDbclick(this.nature)
+						this.$msg({ message: '删除成功' })
+					} else if (res.code === 500) {
+						this.getList()
+						this.$notify({ title: '警告', message: res.msg, type: 'warning' })
+					}
+				})
+				.catch(() => {})
 		},
 		/** 性质提交按钮 */
 		submitFormNature: function () {
@@ -331,7 +318,7 @@ export default {
 								this.natureOpen = false
 								this.getList()
 							})
-						}else{
+						} else {
 							this.form.natureSort = 1
 							addNature(this.form).then((response) => {
 								console.log(response)
@@ -347,56 +334,57 @@ export default {
 			})
 		},
 		// 性质上升
-		natureRise(row) {
+		natureRise(row, rowIndex) {
+			console.log(rowIndex)
 			this.perId = row.natureSort
 			let sysNatureEditBOs = []
 			let item = {}
 			let previous = {}
-			if (row.index === 0) {
-				this.$notify({title: '警告', message: '已经是最高级,无法上升!', type: 'warning'});
-			}else{
-				row.natureSort = this.natureList[row.index - 1].natureSort
-				this.natureList[row.index - 1].natureSort = this.perId
+			if (rowIndex === 0) {
+				this.$notify({ title: '警告', message: '已经是最高级,无法上升!', type: 'warning' })
+			} else {
+				row.natureSort = this.natureList[rowIndex - 1].natureSort
+				this.natureList[rowIndex - 1].natureSort = this.perId
 				item = {
 					natureId: row.natureId,
 					natureSort: row.natureSort
 				}
 				previous = {
-					natureId: this.natureList[row.index - 1].natureId,
-					natureSort: this.natureList[row.index - 1].natureSort
+					natureId: this.natureList[rowIndex - 1].natureId,
+					natureSort: this.natureList[rowIndex - 1].natureSort
 				}
 				sysNatureEditBOs = [item, previous]
-				updateSortNature(sysNatureEditBOs).then(res => {
+				updateSortNature(sysNatureEditBOs).then((res) => {
 					if (res.code === 200) {
-						this.$modal.msgSuccess('上升成功')
+						this.$msg({ message: '设置成功' })
 						this.getList()
 					}
 				})
 			}
 		},
 		// 岗位上升
-		postRise(row) {
+		postRise(row, rowIndex) {
 			this.perPostId = row.postSort
 			let sysNatureEditBOs = []
 			let item = {}
 			let previous = {}
-			if (row.index === 0) {
-				this.$notify({title: '警告', message: '已经是最高级,无法上升!', type: 'warning'});
-			}else{
-				row.postSort = this.postList[row.index - 1].postSort
-				this.postList[row.index - 1].postSort = this.perPostId
+			if (rowIndex === 0) {
+				this.$notify({ title: '警告', message: '已经是最高级,无法上升!', type: 'warning' })
+			} else {
+				row.postSort = this.postList[rowIndex - 1].postSort
+				this.postList[rowIndex - 1].postSort = this.perPostId
 				item = {
 					postId: row.postId,
 					postSort: row.postSort
 				}
 				previous = {
-					postId: this.postList[row.index - 1].postId,
-					postSort: this.postList[row.index - 1].postSort
+					postId: this.postList[rowIndex - 1].postId,
+					postSort: this.postList[rowIndex - 1].postSort
 				}
 				sysNatureEditBOs = [item, previous]
-				updateSortPost(sysNatureEditBOs).then(res => {
+				updateSortPost(sysNatureEditBOs).then((res) => {
 					if (res.code === 200) {
-						this.$modal.msgSuccess('上升成功')
+						this.$msg({ message: '设置成功' })
 						this.getList()
 						this.natureLineDbclick(this.nature)
 					}
@@ -404,56 +392,56 @@ export default {
 			}
 		},
 		// 性质下降
-		natureDecline(row) {
+		natureDecline(row, rowIndex) {
 			this.decId = row.natureSort
 			let sysNatureEditBOs = []
 			let item = {}
 			let previous = {}
-			if (row.index === this.natureList.length - 1) {
-				this.$notify({title: '警告', message: '已经是最低级,无法下降!', type: 'warning'});
-			}else{
-				row.natureSort = this.natureList[row.index + 1].natureSort
-				this.natureList[row.index + 1].natureSort = this.decId
+			if (rowIndex === this.natureList.length - 1) {
+				this.$notify({ title: '警告', message: '已经是最低级,无法下降!', type: 'warning' })
+			} else {
+				row.natureSort = this.natureList[rowIndex + 1].natureSort
+				this.natureList[rowIndex + 1].natureSort = this.decId
 				item = {
 					natureId: row.natureId,
 					natureSort: row.natureSort
 				}
 				previous = {
-					natureId: this.natureList[row.index + 1].natureId,
-					natureSort: this.natureList[row.index + 1].natureSort
+					natureId: this.natureList[rowIndex + 1].natureId,
+					natureSort: this.natureList[rowIndex + 1].natureSort
 				}
 				sysNatureEditBOs = [item, previous]
-				updateSortNature(sysNatureEditBOs).then(res => {
+				updateSortNature(sysNatureEditBOs).then((res) => {
 					if (res.code === 200) {
-						this.$modal.msgSuccess('下降成功')
+						this.$msg({ message: '设置成功' })
 						this.getList()
 					}
 				})
 			}
 		},
 		// 岗位下降
-		postDecline(row) {
+		postDecline(row, rowIndex) {
 			this.decPostId = row.postSort
 			let sysNatureEditBOs = []
 			let item = {}
 			let previous = {}
-			if (row.index === this.postList.length - 1) {
-				this.$notify({title: '警告', message: '已经是最低级,无法下降!', type: 'warning'});
-			}else{
-				row.postSort = this.postList[row.index + 1].postSort
-				this.postList[row.index + 1].postSort = this.decPostId
+			if (rowIndex === this.postList.length - 1) {
+				this.$notify({ title: '警告', message: '已经是最低级,无法下降!', type: 'warning' })
+			} else {
+				row.postSort = this.postList[rowIndex + 1].postSort
+				this.postList[rowIndex + 1].postSort = this.decPostId
 				item = {
 					postId: row.postId,
 					postSort: row.postSort
 				}
 				previous = {
-					postId: this.postList[row.index + 1].postId,
-					postSort: this.postList[row.index + 1].postSort
+					postId: this.postList[rowIndex + 1].postId,
+					postSort: this.postList[rowIndex + 1].postSort
 				}
 				sysNatureEditBOs = [item, previous]
-				updateSortPost(sysNatureEditBOs).then(res => {
+				updateSortPost(sysNatureEditBOs).then((res) => {
 					if (res.code === 200) {
-						this.$modal.msgSuccess('下降成功')
+						this.$msg({ message: '设置成功' })
 						this.getList()
 						this.natureLineDbclick(this.nature)
 					}
@@ -463,58 +451,21 @@ export default {
 		/** 删除性质按钮操作 */
 		handleDelete(row) {
 			this.$modal
-			.confirm('是否确认删除性质为"' + row.natureName + '"的数据项?')
-			.then(function () {
-				return delNature(row.natureId)
-			})
-			.then(() => {
-				this.getList()
-				this.$modal.msgSuccess('删除成功')
-			})
-			.catch(() => {})
+				.confirm('是否确认删除性质为"' + row.natureName + '"的数据项?')
+				.then(function () {
+					return delNature(row.natureId)
+				})
+				.then(() => {
+					this.getList()
+					this.$msg({ message: '删除成功' })
+				})
+				.catch(() => {})
 		}
 	}
 }
 </script>
 <style scoped>
-.role {
-	width: 90px;
-	height: 40px;
-	text-align: center;
-	line-height: 40px;
-	font-size: 14px;
-	border: 1px solid #dfe6ec;
-	border-bottom: none;
-}
-.roleTable {
-	width: 1154px;
-}
-.add_btn {
-	width: 80px;
-	height: 35px;
-	text-align: center;
-}
-.item {
-	width: 1154px;
-	display: flex;
-	justify-content: space-between;
-}
-.dataTable {
-	width: 656px;
-}
-.left_tag {
-	display: flex;
-}
-.border_role {
-	border-right: none;
-}
 .activeClass {
 	color: #409eff;
 }
-.tableRowClassName {
-	background: olive;
-}
-.pagination-container[data-v-72233bcd] {
-	width: 1154px;
-}
 </style>

+ 171 - 369
src/views/system/role/index.vue

@@ -1,241 +1,142 @@
 <template>
-	<div class="app-container">
-		<div class="item">
-			<div class="left_tag">
-				<div class="role border_role" :class="{ activeClass: over == 1 }" @click="getRole">角色</div>
-				<div class="role functional" :class="{ activeClass: over == 2 }" @click="getFunctionalAuthority">功能权限</div>
-				<div class="role" :class="{ activeClass: over == 3 }" @click="getHeaderPermission">表头权限</div>
-			</div>
-			<div class="right_add">
-				<el-button type="primary" icon="el-icon-plus" class="add_btn" @click="handleAdd" v-show="roleShow" v-hasPermi="['system:role:add']">添加</el-button>
-			</div>
-		</div>
-		<!-- 编辑按钮 -->
-		<!-- <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:role:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:role:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:role:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:role:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row> -->
+	<div class="page-container">
+		<div class="content-container">
+			<div class="main">
+				<div class="table-nav">
+					<div class="tags">
+						<div class="tag" :class="{ activeClass: over == 1 }" @click="getRole">角色</div>
+						<div class="tag" :class="{ activeClass: over == 2 }" @click="getFunctionalAuthority">功能权限</div>
+						<div class="tag" :class="{ activeClass: over == 3 }" @click="getHeaderPermission">表头权限</div>
+					</div>
+					<div class="actions">
+						<el-button type="primary" plain size="small " @click="handleAdd" v-show="roleShow" v-hasPermi="['system:role:add']">添加</el-button>
+					</div>
+				</div>
 
-		<!-- 角色列表 -->
-		<el-table
-			v-loading="loading"
-			:data="roleList"
-			:row-class-name="tableRowClassName"
-			:row-style="selectedstyle"
-			border
-			class="roleTable"
-			@row-click="roleLineClick"
-			@row-dblclick="roleLineDbclick"
-			v-show="roleShow"
-		>
-			<el-table-column label="名称" prop="roleName" width="198" />
-			<el-table-column label="描述" prop="remark" width="416" />
-			<el-table-column label="创建时间" prop="createTime" width="200">
-				<template slot-scope="scope">
-					<span>{{ parseTime(scope.row.createTime) }}</span>
-				</template>
-			</el-table-column>
-			<el-table-column label="状态" width="117" prop="status">
-				<template slot-scope="scope">
-					<span>{{ scope.row.status == 0 ? '正常' : '停用' }}</span>
-				</template>
-			</el-table-column>
-			<el-table-column label="操作" class-name="small-padding fixed-width" width="222">
-				<template slot-scope="scope">
-					<el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['system:role:edit']" @click="handleUpdate(scope.row)">编辑</el-button>
-					<el-button size="mini" type="text" icon="el-icon-remove-outline" @click="handleStatusChange(scope.row)">{{ scope.row.status == '0' ? '禁用' : '启用' }}</el-button>
-					<el-button size="mini" type="text" icon="el-icon-delete-solid" v-hasPermi="['system:role:remove']" @click="handleDelete(scope.row)">删除</el-button>
-				</template>
-			</el-table-column>
-		</el-table>
+				<!-- 角色列表 -->
+				<el-table
+					v-loading="loading"
+					:data="roleList"
+					:header-cell-style="{ 'text-align': 'center' }"
+					:cell-style="{ textAlign: 'center', cursor: 'pointer' }"
+					border
+					@row-click="roleLineClick"
+					v-show="roleShow"
+				>
+					<el-table-column label="名称" prop="roleName" width="200">
+						<template slot-scope="scope">
+							<a href="javascript:void(0);" class="linked" @click="roleLineDbclick(scope.row)">{{ scope.row.roleName }}</a>
+						</template>
+					</el-table-column>
+					<el-table-column label="描述" prop="remark" width="950" />
+					<el-table-column label="创建时间" prop="createTime" width="200">
+						<template slot-scope="scope">
+							<span>{{ parseTime(scope.row.createTime) }}</span>
+						</template>
+					</el-table-column>
+					<el-table-column label="状态" width="117" prop="status">
+						<template slot-scope="scope">
+							<span>{{ scope.row.status == 0 ? '正常' : '停用' }}</span>
+						</template>
+					</el-table-column>
+					<el-table-column label="操作" class-name="small-padding fixed-width">
+						<template slot-scope="scope">
+							<el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['system:role:edit']" @click="handleUpdate(scope.row)">编辑</el-button>
+							<el-button size="mini" type="text" icon="el-icon-remove-outline" @click="handleStatusChange(scope.row)">{{ scope.row.status == '0' ? '禁用' : '启用' }}</el-button>
+							<el-button size="mini" type="text" icon="el-icon-delete-solid" v-hasPermi="['system:role:remove']" @click="handleDelete(scope.row)">删除</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
 
-		<!-- 功能权限列表 -->
-		<el-table
-			v-loading="loading"
-			:data="FuncListTree"
-			row-key="menuId"
-			:tree-props="{ children: 'children' }"
-			border
-			:row-class-name="tableRowClassName"
-			:row-style="selectedstyle1"
-			class="roleTable"
-			@row-click="functionalLineClick"
-			@row-dblclick="functionalLineDbclick"
-			v-show="functionalShow"
-		>
-			<el-table-column label="名称" prop="menuName" width="198" />
-			<el-table-column label="描述" prop="remark" width="231" />
-			<el-table-column label="权限" prop="createTime" width="55" align="center">
-				<template slot-scope="scope">
-					<span><input type="checkbox" :checked="isChecked(scope.row)" @change="handleCheckedTreeConnect($event, 'menu', scope.row)" /></span>
-				</template>
-			</el-table-column>
-			<el-table-column label="操作" class-name="small-padding fixed-width">
-				<template slot-scope="scope">
-					<el-button
-						size="mini"
-						type="text"
-						:style="{ color: checkedKeys.includes(item.menuId) ? '#409EFF' : '#909399' }"
-						v-for="(item, index) in btnListss(scope.row.menuId)"
-						:key="index"
-						@click="updateBtn(item, scope.row)"
-						><span>{{ item.menuName }}</span>
-					</el-button>
-				</template>
-			</el-table-column>
-		</el-table>
+				<!-- 功能权限列表 -->
+				<el-table
+					v-loading="loading"
+					:data="FuncListTree"
+					row-key="menuId"
+					:tree-props="{ children: 'children' }"
+					border
+					:header-cell-style="{ 'text-align': 'center' }"
+					:cell-style="{ textAlign: 'center', cursor: 'pointer' }"
+					@row-click="functionalLineClick"
+					v-show="functionalShow"
+				>
+					<el-table-column label="名称" prop="menuName" width="200">
+						<template slot-scope="scope">
+							<a href="javascript:void(0);" class="linked" @click="functionalLineDbclick(scope.row)">{{ scope.row.menuName }}</a>
+						</template>
+					</el-table-column>
+					<el-table-column label="描述" prop="remark" width="231" />
+					<el-table-column label="权限" prop="createTime" width="55" align="center">
+						<template slot-scope="scope">
+							<span><input type="checkbox" :checked="isChecked(scope.row)" @change="handleCheckedTreeConnect($event, 'menu', scope.row)" /></span>
+						</template>
+					</el-table-column>
+					<el-table-column label="操作" class-name="small-padding fixed-width">
+						<template slot-scope="scope">
+							<el-button
+								size="mini"
+								type="text"
+								:style="{ color: checkedKeys.includes(item.menuId) ? '#409EFF' : '#909399' }"
+								v-for="(item, index) in btnListss(scope.row.menuId)"
+								:key="index"
+								@click="updateBtn(item, scope.row)"
+								><span>{{ item.menuName }}</span>
+							</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
 
-		<!-- 表头权限列表 -->
-		<el-table v-loading="loading" :data="headList" border :row-class-name="tableRowClassName" :row-style="selectedstyle2" class="dataTable" @row-click="headlLineClick" v-show="headShow">
-			<el-table-column label="列表名称" width="198">{{ listName }}</el-table-column>
-			<el-table-column label="列名称" prop="columnName" width="298" />
-			<el-table-column label="状态" class-name="small-padding fixed-width" width="159">
-				<template slot-scope="scope">
-					<el-button
-						size="mini"
-						:disabled="disabled"
-						type="text"
-						icon="el-icon-remove-outline"
-						:style="{ color: scope.row.isShow == 0 ? '#409EFF' : '#909399' }"
-						@click="showOrHide(scope.row)"
-						>显示</el-button
-					>
-				</template>
-			</el-table-column>
-		</el-table>
+				<!-- 表头权限列表 -->
+				<el-table
+					v-loading="loading"
+					:data="headList"
+					border
+					:header-cell-style="{ 'text-align': 'center' }"
+					:cell-style="{ textAlign: 'center', cursor: 'pointer' }"
+					@row-click="headlLineClick"
+					v-show="headShow"
+				>
+					<el-table-column label="列表名称" width="200">{{ listName }}</el-table-column>
+					<el-table-column label="列名称" prop="columnName" width="200" />
+					<el-table-column label="状态" class-name="small-padding fixed-width">
+						<template slot-scope="scope">
+							<el-button
+								size="mini"
+								:disabled="disabled"
+								type="text"
+								icon="el-icon-remove-outline"
+								:style="{ color: scope.row.isShow == 0 ? '#409EFF' : '#909399' }"
+								@click="showOrHide(scope.row)"
+								>显示</el-button
+							>
+						</template>
+					</el-table-column>
+				</el-table>
 
-		<pagination v-show="total > 0 && roleShow" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+				<pagination v-show="total > 0 && roleShow" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
-		<!-- 添加或修改角色配置对话框 -->
-		<el-dialog :title="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="roleName">
-					<el-input v-model="form.roleName" placeholder="请输入角色名称" />
-				</el-form-item>
-				<!-- <el-form-item prop="roleKey">
-          <span slot="label">
-            <el-tooltip content="控制器中定义的权限字符,如:@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
-              <i class="el-icon-question"></i>
-            </el-tooltip>
-            权限字符
-          </span>
-          <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
-        </el-form-item> -->
-				<!-- <el-form-item label="角色顺序" prop="roleSort">
-          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
-        </el-form-item> -->
-				<el-form-item label="状态">
-					<el-radio-group v-model="form.status">
-						<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-					</el-radio-group>
-				</el-form-item>
-				<!-- <el-form-item label="菜单权限">
-          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
-          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
-          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
-          <el-tree
-            class="tree-border"
-            :data="menuOptions"
-            show-checkbox
-            ref="menu"
-            node-key="id"
-            :check-strictly="!form.menuCheckStrictly"
-            empty-text="加载中,请稍候"
-            :props="defaultProps"
-          ></el-tree>
-        </el-form-item> -->
-				<el-form-item label="描述">
-					<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-				</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>
+				<!-- 添加或修改角色配置对话框 -->
+				<el-dialog :title="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="roleName">
+							<el-input v-model="form.roleName" placeholder="请输入角色名称" />
+						</el-form-item>
+						<el-form-item label="状态">
+							<el-radio-group v-model="form.status">
+								<el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="描述">
+							<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+						</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>
-		</el-dialog>
-
-		<!-- 分配角色数据权限对话框 -->
-		<!-- <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
-      <el-form :model="form" label-width="80px">
-        <el-form-item label="角色名称">
-          <el-input v-model="form.roleName" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="权限字符">
-          <el-input v-model="form.roleKey" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="权限范围">
-          <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
-            <el-option
-              v-for="item in dataScopeOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="数据权限" v-show="form.dataScope == 2">
-          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
-          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
-          <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
-          <el-tree
-            class="tree-border"
-            :data="deptOptions"
-            show-checkbox
-            default-expand-all
-            ref="dept"
-            node-key="id"
-            :check-strictly="!form.deptCheckStrictly"
-            empty-text="加载中,请稍候"
-            :props="defaultProps"
-          ></el-tree>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitDataScope">确 定</el-button>
-        <el-button @click="cancelDataScope">取 消</el-button>
-      </div>
-    </el-dialog> -->
+		</div>
 	</div>
 </template>
 
@@ -265,14 +166,6 @@ export default {
 		return {
 			// 遮罩层
 			loading: true,
-			// 选中数组
-			ids: [],
-			// 非单个禁用
-			single: true,
-			// 非多个禁用
-			multiple: true,
-			// 显示搜索条件
-			showSearch: true,
 			// 总条数
 			total: 0,
 			// 角色表格数据
@@ -289,29 +182,6 @@ export default {
 			deptNodeAll: false,
 			// 日期范围
 			dateRange: [],
-			// 数据范围选项
-			dataScopeOptions: [
-				{
-					value: '1',
-					label: '全部数据权限'
-				},
-				{
-					value: '2',
-					label: '自定数据权限'
-				},
-				{
-					value: '3',
-					label: '本部门数据权限'
-				},
-				{
-					value: '4',
-					label: '本部门及以下数据权限'
-				},
-				{
-					value: '5',
-					label: '仅本人数据权限'
-				}
-			],
 			// 菜单列表
 			menuOptions: [],
 			// 部门列表
@@ -327,10 +197,6 @@ export default {
 			// 表单参数
 			form: {},
 			form1: {},
-			defaultProps: {
-				children: 'children',
-				label: 'label'
-			},
 			// 表单校验
 			rules: {
 				roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
@@ -399,28 +265,6 @@ export default {
 			this.getIndex = row.index
 			this.objRole = row
 		},
-		//设置行对象(row)的样式(style)
-		selectedstyle({ row, rowIndex }) {
-			if (this.getIndex === rowIndex) {
-				return {
-					'background-color': '#EBEEF5'
-				}
-			}
-		},
-		selectedstyle1({ row, rowIndex }) {
-			if (this.getIndex1 === rowIndex) {
-				return {
-					'background-color': '#EBEEF5'
-				}
-			}
-		},
-		selectedstyle2({ row, rowIndex }) {
-			if (this.getIndex2 === rowIndex) {
-				return {
-					'background-color': '#EBEEF5'
-				}
-			}
-		},
 		//为行对象(row)设置index属性
 		tableRowClassName({ row, rowIndex }) {
 			row.index = rowIndex
@@ -435,7 +279,6 @@ export default {
 			this.FuncListTree = []
 			this.roleId = row.roleId
 			getRoleMenuTreeselect(row.roleId).then((res) => {
-				console.log(res)
 				this.checkedKeys = res.data.checkedKeys
 				this.functionList = res.data.menus
 				this.btnList = this.functionList.filter((item, index, c) => item.menuType == 'F')
@@ -463,7 +306,6 @@ export default {
 			this.menuId = row.menuId
 			this.checkStatus = this.isChecked(row) ? 0 : 1
 			getTableHeadList(this.roleId, row.menuId, this.checkStatus).then((res) => {
-				console.log(res)
 				this.headList = res.data
 			})
 		},
@@ -663,31 +505,31 @@ export default {
 				})
 			this.resetForm('form')
 		},
-		/** 搜索按钮操作 */
-		handleQuery() {
-			this.queryParams.pageNum = 1
-			this.getList()
-		},
-		/** 重置按钮操作 */
-		resetQuery() {
-			this.dateRange = []
-			this.resetForm('queryForm')
-			this.handleQuery()
-		},
+		// /** 搜索按钮操作 */
+		// handleQuery() {
+		// 	this.queryParams.pageNum = 1
+		// 	this.getList()
+		// },
+		// /** 重置按钮操作 */
+		// resetQuery() {
+		// 	this.dateRange = []
+		// 	this.resetForm('queryForm')
+		// 	this.handleQuery()
+		// },
 		// 树权限(展开/折叠)
-		handleCheckedTreeExpand(value, type) {
-			if (type == 'menu') {
-				let treeList = this.menuOptions
-				for (let i = 0; i < treeList.length; i++) {
-					this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
-				}
-			} else if (type == 'dept') {
-				let treeList = this.deptOptions
-				for (let i = 0; i < treeList.length; i++) {
-					this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
-				}
-			}
-		},
+		// handleCheckedTreeExpand(value, type) {
+		// 	if (type == 'menu') {
+		// 		let treeList = this.menuOptions
+		// 		for (let i = 0; i < treeList.length; i++) {
+		// 			this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
+		// 		}
+		// 	} else if (type == 'dept') {
+		// 		let treeList = this.deptOptions
+		// 		for (let i = 0; i < treeList.length; i++) {
+		// 			this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
+		// 		}
+		// 	}
+		// },
 		// 树权限(全选/全不选)
 		// handleCheckedTreeNodeAll(value, type) {
 		//   if (type == 'menu') {
@@ -799,10 +641,10 @@ export default {
 			})
 		},
 		/** 分配用户操作 */
-		handleAuthUser: function (row) {
-			const roleId = row.roleId
-			this.$router.push('/system/role-auth/user/' + roleId)
-		},
+		// handleAuthUser: function (row) {
+		// 	const roleId = row.roleId
+		// 	this.$router.push('/system/role-auth/user/' + roleId)
+		// },
 		/** 提交按钮 */
 		submitForm: function () {
 			this.$refs['form'].validate((valid) => {
@@ -852,27 +694,27 @@ export default {
 					if (res.code === 200) {
 						this.getList()
 						this.$modal.msgSuccess('删除成功')
-					}else if (res.code === 500) {
+					} else if (res.code === 500) {
 						this.getList()
 						this.$notify({
 							title: '警告',
 							message: res.msg,
 							type: 'warning'
-						});
+						})
 					}
 				})
 				.catch(() => {})
 		},
 		/** 导出按钮操作 */
-		handleExport() {
-			this.download(
-				'system/role/export',
-				{
-					...this.queryParams
-				},
-				`role_${new Date().getTime()}.xlsx`
-			)
-		},
+		// handleExport() {
+		// 	this.download(
+		// 		'system/role/export',
+		// 		{
+		// 			...this.queryParams
+		// 		},
+		// 		`role_${new Date().getTime()}.xlsx`
+		// 	)
+		// },
 		//寻找子id集合
 		findIds(parent) {
 			if (!parent.children) {
@@ -914,47 +756,7 @@ export default {
 }
 </script>
 <style scoped>
-.role {
-	width: 90px;
-	height: 40px;
-	text-align: center;
-	line-height: 40px;
-	font-size: 14px;
-	border: 1px solid #dfe6ec;
-	border-bottom: none;
-}
-.roleTable {
-	width: 1154px;
-}
-.add_btn {
-	width: 80px;
-	height: 35px;
-	text-align: center;
-}
-.item {
-	width: 1154px;
-	display: flex;
-	justify-content: space-between;
-}
-.dataTable {
-	width: 656px;
-}
-.left_tag {
-	display: flex;
-}
-.border_role {
-	border-right: none;
-}
-.functional {
-	border-right: none;
-}
 .activeClass {
 	color: #409eff;
 }
-.tableRowClassName {
-	background: olive;
-}
-.pagination-container[data-v-72233bcd] {
-	width: 1154px;
-}
 </style>