CZO_Boss/src/views/system/levelPosition/index.vue

<template>
	<div class="page-container">
		<div class="content-container">
			<div class="main">
				<div class="table-nav">
					<div class="tags">
						<div class="tag" :style="isActive(1)" @click="toTab1">级别</div>
						<div class="tag" :style="isActive(2)" @click="toTab2">职务</div>
					</div>
					<div class="actions">
						<el-button type="primary" icon="el-icon-plus" size="mini " v-show="tabIndex == 1" @click="addLevel" v-hasPermi="['system:levelPosition:addLevel']">添加</el-button>
						<el-button type="primary" icon="el-icon-plus" size="mini " v-show="tabIndex == 2" @click="addPost" v-hasPermi="['system:levelPosition:addPost']">添加</el-button>
					</div>
				</div>
				<!-- 级别表格 -->
				<el-table v-loading="loading" :data="levelList" border :cell-style="{ cursor: 'pointer' }" highlight-current-row @current-change="rowHandler" v-show="tabIndex == 1">
					<el-table-column label="级别" prop="levelName" width="200">
						<template slot-scope="scope">
							<a href="javascript:void(0);" class="linked" @click="toTab2">{{ scope.row.levelName }}</a>
						</template>
					</el-table-column>
					<el-table-column align="center" label="黑星" prop="blackStar" width="100" />
					<el-table-column align="center" label="红星" prop="redStar" width="100" />
					<el-table-column label="描述" prop="remarks" />
					<el-table-column align="center" label="操作" class-name="small-padding fixed-width" width="300">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="updLevel(scope.row)" v-hasPermi="['system:levelPosition:updLevel']">修改</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click.stop="delLevel(scope.row)" v-hasPermi="['system:levelPosition:delLevel']">删除</el-button>
							<el-button size="mini" type="text" icon="el-icon-top" @click.stop="levelUpOrder(scope.row)" v-hasPermi="['system:levelPosition:upLevel']">上升</el-button>
							<el-button size="mini" type="text" icon="el-icon-bottom" @click.stop="levelDownOrder(scope.row)" v-hasPermi="['system:levelPosition:downLevel']">下降</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 职务表格 -->
				<el-table v-loading="loading" :data="postList" border :cell-style="{ cursor: 'pointer' }" highlight-current-row v-show="tabIndex == 2">
					<el-table-column label="职务" prop="jobName" width="200" />
					<el-table-column label="级别" width="200">
						<template slot-scope="scope">
							{{ getLevelName(scope.row.levelId) }}
						</template>
					</el-table-column>
					<el-table-column label="部门" width="200">
						<template slot-scope="scope">
							{{ getDeptName(scope.row.deptId) }}
						</template>
					</el-table-column>
					<el-table-column label="描述" prop="remarks" />
					<el-table-column align="center" label="操作" class-name="small-padding fixed-width" width="300">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-edit" @click="updPost(scope.row)" v-hasPermi="['system:levelPosition:updPost']">修改</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click="delPost(scope.row)" v-hasPermi="['system:levelPosition:delPost']">删除</el-button>
							<el-button size="mini" type="text" icon="el-icon-top" @click="postUpOrder(scope.row)" v-hasPermi="['system:levelPosition:upPost']">上升</el-button>
							<el-button size="mini" type="text" icon="el-icon-bottom" @click="postDownOrder(scope.row)" v-hasPermi="['system:levelPosition:downPost']">下降</el-button>
							<el-button size="mini" type="text" icon="el-icon-edit" @click="editPower(scope.row)" v-hasPermi="['system:levelPosition:power']">责权</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 添加修改级别弹窗 -->
				<el-dialog title="编辑级别" :visible.sync="levelShow" width="30%">
					<el-form ref="levelForm" :model="levelForm" :rules="levelRules" label-width="100px">
						<el-form-item label="级别" prop="levelName">
							<div style="width: 200px"><el-input v-model="levelForm.levelName" placeholder="请输入级别" /></div>
						</el-form-item>
						<el-form-item label="黑星" prop="blackStar">
							<el-input-number v-model="levelForm.blackStar" step-strictly :min="0"></el-input-number>
						</el-form-item>
						<el-form-item label="红星" prop="redStar">
							<el-input-number v-model="levelForm.redStar" step-strictly :min="0"></el-input-number>
						</el-form-item>
						<el-form-item label="描述" prop="remarks">
							<div style="width: 300px"><el-input v-model="levelForm.remarks" placeholder="请输入描述" /></div>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="medium" @click="levelCancel">取 消</el-button>
						<el-button type="primary" size="medium" @click="levelSub">保 存</el-button>
					</div>
				</el-dialog>
				<!-- 添加修改职务弹窗 -->
				<el-dialog title="编辑职务" :visible.sync="postShow" width="30%">
					<el-form ref="postForm" :model="postForm" :rules="postRules" label-width="100px">
						<el-form-item label="职务" prop="jobName">
							<div style="width: 200px"><el-input v-model="postForm.jobName" placeholder="请输入职务" /></div>
						</el-form-item>
						<el-form-item label="部门" prop="deptId">
							<el-cascader
								v-model="deptIds"
								:options="deptTree"
								:props="{ expandTrigger: 'hover', value: 'deptId', label: 'deptName', checkStrictly: true }"
								@change="deptChange"
								:show-all-levels="false"
							></el-cascader>
						</el-form-item>
						<el-form-item label="级别" prop="levelName">
							<div style="width: 200px"><el-input disabled v-model="postForm.levelName" placeholder="请输入职务" /></div>
						</el-form-item>
						<el-form-item label="描述" prop="remarks">
							<div style="width: 300px"><el-input v-model="postForm.remarks" placeholder="请输入描述" /></div>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="postCancel">取 消</el-button>
						<el-button type="primary" size="small" @click="postSub">保 存</el-button>
					</div>
				</el-dialog>
				<!-- 责权弹窗 -->
				<el-dialog title="责权信息" :visible.sync="powerShow" width="30%">
					<div class="power">
						<div>级别职务:{{ postForm.levelName }}\{{ powerForm.jobName }}</div>
						<div><strong>责任</strong></div>
						<div>
							<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入责任" v-model="powerForm.responsibility"> </el-input>
						</div>
						<div><strong>权力</strong></div>
						<div>
							<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入权力" v-model="powerForm.right"> </el-input>
						</div>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="powerShow = false">取 消</el-button>
						<el-button size="small" type="primary" @click="powerSub">保 存</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import { levelAdd, levelList, levelUpd, levelDel, levelOrder, postAdd, postList, postUpd, postDel, postOrder, powerUpd } from '@/api/system/levelPosition.js'
	import { listDept } from '@/api/system/dept.js'
	import { checkPermi } from '@/utils/permission'
	export default {
		name: 'levelPosition',
		data() {
			return {
				loading: false,
				//级别职务 选项
				tabIndex: 1,
				//级别数据
				levelList: [],
				//级别新增弹窗显示
				levelShow: false,
				//级别弹窗表单信息
				levelForm: {
					//黑星
					blackStar: 0,
					//级别id
					levelId: 0,
					//级别名称
					levelName: '',
					//级别排序
					levelSort: 0,
					//红星
					redStar: 0,
					//描述
					remarks: ''
				},
				//级别弹窗表单验证
				levelRules: {
					levelName: [{ required: true, message: '级别名称不能为空', trigger: 'submit' }]
				},
				//职务数据
				postList: [],
				//职务新增弹窗显示
				postShow: false,
				//职务弹窗表单信息
				postForm: {
					//部门id
					deptId: '',
					//职务id
					jobId: 0,
					//职务名称
					jobName: '',
					//职务排序
					jobSort: 0,
					//级别id
					levelId: 0,
					//级别名称
					levelName: '',
					//描述
					remarks: ''
				},
				//职务弹窗表单验证
				postRules: {
					jobName: [{ required: true, message: '职务名称不能为空', trigger: 'submit' }],
					deptId: [{ required: true, message: '未选择部门', trigger: 'submit' }]
				},
				//部门数据
				deptList: [],
				//部门树型数据
				deptTree: [],
				deptIds: [],
				//责权弹窗显示
				powerShow: false,
				//责权表单
				powerForm: {
					//责任
					responsibility: '',
					//权力
					right: '',
					//职务名称
					jobName: ''
				}
			}
		},
		created() {
			this.getLevelList()
			listDept().then((res) => {
				if (res.code == 200) {
					this.deptList = res.data
					this.deptTree = this.handleTree(res.data, 'deptId')
				}
			})
		},
		computed: {
			theme() {
				return this.$store.state.settings.theme
			}
		},
		methods: {
			isActive(index) {
				if (this.tabIndex != index) return {}
				return {
					color: this.theme
				}
			},
			//获取级别数据
			getLevelList() {
				if (!checkPermi(['system:levelPosition:listLevel'])) {
					return
				}
				this.loading = true
				levelList().then((res) => {
					if (res.code == 200) {
						this.levelList = res.data
						this.loading = false
					} else {
						this.$msg({ type: 'error', message: res.msg })
					}
				})
			},
			//级别表单字段重置
			resetLevelForm() {
				this.levelForm = {
					//黑星
					blackStar: 0,
					//级别id
					levelId: 0,
					//级别名称
					levelName: '',
					//级别排序
					levelSort: 0,
					//红星
					redStar: 0,
					//描述
					remarks: ''
				}
			},
			//职务表单字段重置
			resetPostForm() {
				this.postForm = {
					//部门id
					deptId: '',
					//职务id
					jobId: 0,
					//职务名称
					jobName: '',
					//职务排序
					jobSort: 0,
					//描述
					remarks: ''
				}
			},
			//新增级别
			addLevel() {
				this.levelShow = true
			},
			//级别弹窗取消
			levelCancel() {
				this.resetLevelForm()
				this.levelShow = false
			},
			//修改级别
			updLevel(row) {
				this.levelForm = { ...row }
				this.levelShow = true
			},
			//删除级别
			delLevel(row) {
				this.$modal
					.confirm('确定要删除吗')
					.then(() => {
						levelDel(row.levelId).then((res) => {
							if (res.code == 200) {
								this.$msg({ message: '删除成功' })
								this.getLevelList()
							} else {
								this.$msg({ type: 'error', message: res.msg })
							}
						})
					})
					.catch(() => {})
			},
			//级别重名检测
			checkLevelName(data) {
				let o = this.levelList.find((item) => item.levelName == data.levelName && item.levelId != data.levelId)
				if (o) {
					return '级别名称重复'
				}
				return false
			},
			//职务重名检测
			checkPostName(data) {
				let o = this.postList.find((item) => item.jobName == data.jobName && item.jobId != data.jobId)
				if (o) {
					return '职务名称重复'
				}
				return false
			},
			//编辑级别提交
			levelSub() {
				this.$refs.levelForm.validate((valid) => {
					if (valid) {
						let checkFiled = this.checkLevelName(this.levelForm)
						if (checkFiled) {
							this.$msg({ type: 'error', message: checkFiled })
							return
						}
						if (this.levelForm.levelId) {
							levelUpd(this.levelForm).then((res) => {
								if (res.code == 200) {
									this.$msg({ message: '修改成功' })
									this.getLevelList()
									this.levelCancel()
								}
							})
						} else {
							this.levelForm.levelSort = this.levelList.length ? this.levelList[0].levelSort + 1 : 1
							levelAdd(this.levelForm).then((res) => {
								if (res.code === 200) {
									this.$msg({ message: '添加成功' })
									this.getLevelList()
									this.levelCancel()
								}
							})
						}
					} else {
						return false
					}
				})
			},
			//级别上升
			levelUpOrder(row) {
				console.log(row)
				let prevList = this.levelList.filter((item) => item.levelSort > row.levelSort)
				prevList.sort((a, b) => {
					return a.levelSort - b.levelSort
				})
				let prev = prevList[0]
				if (!prev) {
					this.$msg({ type: 'info', message: '已经是最高级了' })
				} else {
					let d = [
						{ levelId: row.levelId, levelSort: prev.levelSort },
						{ levelId: prev.levelId, levelSort: row.levelSort }
					]
					levelOrder(d).then((res) => {
						if (res.code == 200) {
							let pSort = prev.levelSort
							prev.levelSort = row.levelSort
							row.levelSort = pSort
							this.levelList.sort((a, b) => {
								return b.levelSort - a.levelSort
							})
							this.$msg({ message: '设置成功' })
						}
					})
				}
			},
			//级别下降
			levelDownOrder(row) {
				let nextList = this.levelList.filter((item) => item.levelSort < row.levelSort)
				nextList.sort((a, b) => {
					return b.levelSort - a.levelSort
				})
				let next = nextList[0]
				if (!next) {
					this.$msg({ type: 'info', message: '已经是最下级了' })
				} else {
					let d = [
						{ levelId: row.levelId, levelSort: next.levelSort },
						{ levelId: next.levelId, levelSort: row.levelSort }
					]
					levelOrder(d).then((res) => {
						if (res.code == 200) {
							let nSort = next.levelSort
							next.levelSort = row.levelSort
							row.levelSort = nSort
							this.levelList.sort((a, b) => {
								return b.levelSort - a.levelSort
							})
							this.$msg({ message: '设置成功' })
						}
					})
				}
			},
			//跳转到级别
			toTab1() {
				this.tabIndex = 1
			},
			//级别行单击
			rowHandler(e) {
				if (!e) return
				this.postForm.levelId = e.levelId
				this.postForm.levelName = e.levelName
				this.postList = []
				this.getPostList()
			},
			//跳转到职务
			toTab2() {
				this.tabIndex = 2
			},
			//获取职务数据
			getPostList() {
				if (!checkPermi(['system:levelPosition:listPost'])) {
					return
				}
				postList({ levelId: this.postForm.levelId }).then((res) => {
					if (res.code == 200) {
						this.postList = res.data
					} else {
						this.$msg({ type: 'error', message: res.msg })
					}
				})
			},
			//添加职务
			addPost() {
				this.postShow = true
			},
			//修改职务
			updPost(row) {
				this.postForm = { ...row }
				this.postShow = true
				this.deptIds = this.getDeptIds(row.deptId)
			},
			//查找部门ids
			getDeptIds(id) {
				let res = [id]
				let self = this.deptList.find((item) => item.deptId == id)
				let p = this.deptList.find((item) => item.deptId == self.parentId)
				while (p) {
					res.unshift(p.deptId)
					p = this.deptList.find((item) => item.deptId == p.parentId)
				}

				return res
			},
			//删除职务
			delPost(row) {
				this.$modal
					.confirm('确定要删除吗')
					.then(() => {
						postDel(row.jobId).then((res) => {
							if (res.code == 200) {
								this.$msg({ message: '删除成功' })
								this.getPostList()
							} else {
								this.$msg({ type: 'error', message: res.msg })
							}
						})
					})
					.catch(() => {})
			},
			//职务提交
			postSub() {
				this.$refs.postForm.validate((valid) => {
					if (valid) {
						let checkFiled = this.checkPostName(this.postForm)
						if (checkFiled) {
							this.$msg({ type: 'error', message: checkFiled })
							return
						}
						if (this.postForm.jobId) {
							postUpd(this.postForm).then((res) => {
								if (res.code == 200) {
									this.$msg({ message: '修改成功' })
									this.getPostList()
									this.postCancel()
								} else {
									this.$msg({ type: 'error', message: res.msg })
								}
							})
						} else {
							this.postForm.jobSort = this.postList.length ? this.postList[0].jobSort + 1 : 1
							postAdd(this.postForm).then((res) => {
								if (res.code == 200) {
									this.$msg({ message: '添加成功' })
									this.getPostList()
									this.postCancel()
								} else {
									this.$msg({ type: 'error', message: res.msg })
								}
							})
						}
					} else {
						return false
					}
				})
			},
			//职务取消
			postCancel() {
				this.resetPostForm()
				this.postShow = false
				this.deptIds = []
			},
			//部门改变
			deptChange(e) {
				this.postForm.deptId = e[e.length - 1]
			},
			//获取级别名称
			getLevelName(id) {
				let o = this.levelList.find((item) => item.levelId == id)
				if (o) {
					return o.levelName
				}
				return ''
			},
			//获取部门名称
			getDeptName(id) {
				let o = this.deptList.find((item) => item.deptId == id)
				if (o) {
					return o.deptName
				}
				return ''
			},
			//职务上升排序
			postUpOrder(row) {
				let prevList = this.postList.filter((item) => item.jobSort > row.jobSort)
				prevList.sort((a, b) => {
					return a.jobSort - b.jobSort
				})
				let prev = prevList[0]
				if (!prev) {
					this.$msg({ type: 'info', message: '已经是最高级了' })
				} else {
					let d = [
						{ jobId: row.jobId, jobSort: prev.jobSort },
						{ jobId: prev.jobId, jobSort: row.jobSort }
					]
					postOrder(d).then((res) => {
						if (res.code == 200) {
							let pSort = prev.jobSort
							prev.jobSort = row.jobSort
							row.jobSort = pSort
							this.postList.sort((a, b) => {
								return b.jobSort - a.jobSort
							})
							this.$msg({ message: '设置成功' })
						}
					})
				}
			},
			//职务下降排序
			postDownOrder(row) {
				let nextList = this.postList.filter((item) => item.jobSort < row.jobSort)
				nextList.sort((a, b) => {
					return b.jobSort - a.jobSort
				})
				let next = nextList[0]
				if (!next) {
					this.$msg({ type: 'info', message: '已经是最下级了' })
				} else {
					let d = [
						{ jobId: row.jobId, jobSort: next.jobSort },
						{ jobId: next.jobId, jobSort: row.jobSort }
					]
					postOrder(d).then((res) => {
						if (res.code == 200) {
							let nSort = next.jobSort
							next.jobSort = row.jobSort
							row.jobSort = nSort
							this.postList.sort((a, b) => {
								return b.jobSort - a.jobSort
							})
							this.$msg({ message: '设置成功' })
						}
					})
				}
			},
			//编辑责权
			editPower(row) {
				this.powerForm.responsibility = row.responsibility
				this.powerForm.right = row.right
				this.powerForm.jobName = row.jobName
				this.powerForm.jobId = row.jobId
				this.powerShow = true
			},
			//保存责权
			powerSub() {
				delete this.powerForm.jobName
				powerUpd(this.powerForm).then((res) => {
					if (res.code == 200) {
						this.$msg({ message: '修改成功' })
						let o = this.postList.find((item) => item.jobId == this.powerForm.jobId)
						o.responsibility = this.powerForm.responsibility
						o.right = this.powerForm.right
						this.powerShow = false
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.power > div {
		margin-bottom: 10px;
	}
</style>