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" plain size="small " v-show="tabIndex == 1" @click="addLevel" v-hasPermi="['system:levelPosition:addLevel']">添加</el-button>
						<el-button type="primary" plain size="small " v-show="tabIndex == 2" @click="addPost" v-hasPermi="['system:levelPosition:addPost']">添加</el-button>
					</div>
				</div>
				<!-- 级别表格 -->
				<el-table
					v-loading="loading"
					:data="levelList"
					border
					:header-cell-style="{ 'text-align': 'center' }"
					:cell-style="{ textAlign: 'center', cursor: 'pointer' }"
					highlight-current-row
					@current-change="rowClick"
					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 label="黑星" prop="blackStar" width="100" />
					<el-table-column label="红星" prop="redStar" width="100" />
					<el-table-column label="描述" prop="remarks" width="1000" />
					<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="updLevel(scope.row)" v-hasPermi="['system:levelPosition:updLevel']">编辑</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click="delLevel(scope.row)" v-hasPermi="['system:levelPosition:delLevel']">删除</el-button>
							<el-button size="mini" type="text" icon="el-icon-top" @click="levelUpOrder(scope.row)" v-hasPermi="['system:levelPosition:upLevel']">上升</el-button>
							<el-button size="mini" type="text" icon="el-icon-bottom" @click="levelDownOrder(scope.row)" v-hasPermi="['system:levelPosition:downLevel']">下降</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 职务表格 -->
				<el-table v-loading="loading" :data="postList" border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" 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" 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="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>
						</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 type="primary" @click="levelSub">确 定</el-button>
						<el-button @click="levelCancel">取 消</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 type="primary" @click="postSub">确 定</el-button>
						<el-button @click="postCancel">取 消</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import { levelAdd, levelList, levelUpd, levelDel, levelOrder, postAdd, postList, postUpd, postDel, postOrder } from '@/api/system/levelPosition.js'
	import { listDept } from '@/api/system/dept.js'
	import { checkPermi } from '@/utils/permission'
	export default {
		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: []
			}
		},
		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
				}
				levelList().then((res) => {
					if (res.code == 200) {
						this.levelList = res.data
					} 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.$msg({ type: 'error', message: res.msg })
								}
							})
						} 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 {
									this.$msg({ type: 'error', message: res.msg })
								}
							})
						}
					} else {
						return false
					}
				})
			},
			//级别上升
			levelUpOrder(row) {
				let prevList = this.levelList.filter((item) => item.levelSort > row.levelSort)
				prevList.sort((a, b) => {
					return b.levelSort - a.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) {
							this.$msg({ message: '设置成功' })
							this.getLevelList()
						}
					})
				}
			},
			//级别下降
			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) {
							this.$msg({ message: '设置成功' })
							this.getLevelList()
						}
					})
				}
			},
			//跳转到级别
			toTab1() {
				this.tabIndex = 1
			},
			//级别行单击
			rowClick(e) {
				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 b.jobSort - a.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) {
							this.$msg({ message: '设置成功' })
							this.getPostList()
						}
					})
				}
			},
			//职务下降排序
			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) {
							this.$msg({ message: '设置成功' })
							this.getPostList()
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss"></style>