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

<template>
	<div class="page_content">
		<div class="page_title">
			<div class="title">
				<svg-icon className="documentation" iconClass="documentation" />
				<span>公司部门</span>
			</div>
		</div>
		<div class="page_main">
			<div class="organi">
				<div class="outer">
					<DeptItem v-for="item in dataList" :data="item" :key="item.id" />
				</div>
			</div>
		</div>
		<!-- 添加或修改部门对话框 -->
		<el-dialog :title="title" :visible.sync="show" width="600px" append-to-body @close="cancel">
			<el-form ref="deptForm" :model="deptForm" :rules="deptFormRules" label-width="100px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="上级部门">
							<el-input v-model="deptForm.parentName" disabled />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="部门名称" prop="deptName">
							<el-input v-model.trim="deptForm.deptName" placeholder="请输入部门名称" maxlength="20" show-word-limit @input="setShortList" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="公司简称">
							<ul class="short">
								<li v-for="item in shortList" :key="item.title">
									<span>{{ item.title }}</span>
									<input type="checkbox" v-model="item.checked" />
								</li>
							</ul>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="cancel">取 消</el-button>
				<el-button size="small" type="primary" @click="sub">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { treeselect, addDept } from '@/api/system/dept.js'
import DeptItem from './components/deptItem.vue'

export default {
	components: { DeptItem },
	data() {
		return {
			checked: true,
			//组织架构数据
			dataList: [],
			//弹窗显示
			show: false,
			//弹窗标题
			title: '',
			//弹窗表单
			deptForm: {
				//上级部门id
				parentId: 0,
				//上级部门名称
				parentName: '',
				//部门名称
				deptName: '',
				//部门简称
				shortName: '',
				//简称索引
				shortNameIndex: ''
			},
			//表单验证
			deptFormRules: {
				deptName: [{ required: true, message: '部门名称不能为空', trigger: 'submit' }]
			},
			//简写数据
			shortList: []
		}
	},
	created() {
		treeselect().then(res => {
			if (res.code === 200) {
				this.dataList = res.data.map(item => {
					return {
						...item,
						root: true
					}
				})
			}
		})
	},
	provide() {
		return {
			updData: this.updData,
			delData: this.delData,
			resetDel: this.resetDel
		}
	},
	methods: {
		//弹窗关闭
		cancel() {
			this.show = false
			this.resetForm()
		},
		//表单重置
		resetForm() {
			this.deptForm = {
				parentId: 0,
				parentName: '',
				deptName: '',
				shortName: '',
				shortNameIndex: ''
			}
		},
		//弹窗提交
		sub() {
			this.$refs['deptForm'].validate(valid => {
				if (valid) {
					if (this.deptForm.deptId != undefined) {
					} else {
						addDept(this.deptForm).then(res => {
							if (res.code === 200) {
								this.$msg({ message: '添加成功' })
								this.cancel()
							}
						})
					}
				}
			})
		},
		//编辑部门
		updData(type, data) {
			this.show = true
			//添加
			if (type == 0) {
				this.title = '部门添加'
				this.deptForm.parentId = data.id
				this.deptForm.parentName = data.label
			} else {
				this.title = '部门修改'
			}
		},
		//设置简写
		setShortList() {
			this.shortList = this.deptForm.deptName.split('').map((title, index) => {
				return {
					index,
					title,
					checked: true
				}
			})
		},
		delData() {},
		resetDel() {}
	}
}
</script>

<style scoped lang="scss">
::v-deep .org-chart-node-label {
	background-color: #199ed8;
	color: #fff;
	border-radius: 5px;
}
.organi {
	width: 100%;
	height: 100%;
	background-color: #fff;
	overflow: auto;
	padding: 30px;
}
.outer {
	width: auto;
	display: inline-block;
}
.short {
	display: flex;
	flex-wrap: wrap;
	li {
		height: 36px;
		line-height: 36px;
		margin-right: 10px;
	}
}
</style>