增加部门
This commit is contained in:
jiutianzhiyu
parent
442e9376ec
commit
492cb1b30b
7
src/api/employees.js
Normal file
7
src/api/employees.js
Normal file
@ -0,0 +1,7 @@
|
||||
import request from '@/utils/request'
|
||||
// 获取员工简单信息
|
||||
export function getEmployeeSimple() {
|
||||
return request({
|
||||
url: '/sys/user/simple'
|
||||
})
|
||||
}
|
||||
129
src/views/departments/componets/add-depart.vue
Normal file
129
src/views/departments/componets/add-depart.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<el-dialog title="新增部门" :visible="showDialog" @close="btnCancel">
|
||||
<!-- 表单组件 el-form label-width设置label的宽度 -->
|
||||
<!-- 匿名插槽 -->
|
||||
<el-form ref="departForm" label-width="120px" :model="formData" :rules="rules">
|
||||
<el-form-item label="部门名称" prop="name">
|
||||
<el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门编码" prop="code">
|
||||
<el-input v-model="formData.code" style="width:80%" placeholder="1-50个字符" />
|
||||
</el-form-item>
|
||||
<el-form-item label="部门负责人" prop="manager">
|
||||
<el-select v-model="formData.manager" style="width:80%" placeholder="请选择" @focus="getEmployeeSimple">
|
||||
<!-- 下拉菜单选项 -->
|
||||
<el-option v-for="item in simpleUserInfo" :key="item.id" :label="item.username" :value="item.username" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门介绍" prop="introduce">
|
||||
<el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- el-dialog有专门放置底部操作栏的 插槽 具名插槽 -->
|
||||
<el-row slot="footer" type="flex" justify="center">
|
||||
<!-- 列被分为24 -->
|
||||
<el-col :span="6">
|
||||
<el-button type="primary" size="small" @click="btnOK">确定</el-button>
|
||||
<el-button size="small" @click="btnCancel">取消</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDepartments, addDepartments } from '@/api/departments'
|
||||
import { getEmployeeSimple } from '@/api/employees'
|
||||
export default {
|
||||
props: {
|
||||
showDialog: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
treeNode: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const checkNameRepeat = async(rule, value, callback) => {
|
||||
// 成功调用callback
|
||||
// 失败调用callback(new Error('错误原因'))
|
||||
const { depts } = await getDepartments()
|
||||
const isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
|
||||
isRepeat ? callback(new Error(`同级部门下已经有${value}部门了`)) : callback()
|
||||
}
|
||||
const checkCodeRepeat = async(rule, value, callback) => {
|
||||
const { depts } = await getDepartments()
|
||||
const isRepeat = depts.some(item => item.code === value && value) // 编码不能为空, 因为预设部门有可能为空
|
||||
isRepeat ? callback(new Error(`已经有部门使用了${value}编码`)) : callback()
|
||||
}
|
||||
return {
|
||||
// 表单数据
|
||||
formData: {
|
||||
name: '',
|
||||
code: '',
|
||||
manager: '',
|
||||
introduce: ''
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{ min: 1, max: 50, message: '要求1-50个字符', trigger: 'blur' },
|
||||
{ trigger: 'blur', validator: checkNameRepeat }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{ min: 1, max: 50, message: '要求1-50个字符', trigger: 'blur' },
|
||||
{ trigger: 'blur', validator: checkCodeRepeat }
|
||||
],
|
||||
manager: [
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{ min: 1, max: 50, message: '要求1-50个字符', trigger: 'blur' }
|
||||
],
|
||||
introduce: [
|
||||
{ required: true, message: '不能为空', trigger: 'blur' },
|
||||
{ min: 1, max: 300, message: '要求1-50个字符', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
// 简单用户信息
|
||||
simpleUserInfo: []
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getEmployeeSimple() {
|
||||
const res = await getEmployeeSimple()
|
||||
console.log(res)
|
||||
this.simpleUserInfo = [...res]
|
||||
},
|
||||
// 确定提交按钮
|
||||
async btnOK() {
|
||||
try {
|
||||
await this.$refs.departForm.validate()
|
||||
// 接口要求拼接一个pid
|
||||
await addDepartments({ ...this.formData, pid: this.treeNode.id })
|
||||
// 更新数据
|
||||
this.$emit('addDepartOK')
|
||||
// 关闭弹窗 子组件修改父组件传来的props: this.$emit(update: props名, 新值), 父组件加.sync
|
||||
this.$emit('update:showDialog', false)
|
||||
this.$message.success('添加成功')
|
||||
} catch (error) {
|
||||
console.log('捕获错误')
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 取消按钮
|
||||
btnCancel() {
|
||||
// resetFields, 重置校验字段 和校验错误信息
|
||||
this.$refs.departForm.resetFields()
|
||||
// 关闭弹窗
|
||||
this.$emit('update:showDialog', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@ -40,9 +40,11 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 操作部门信息
|
||||
async operateDeparts(type) {
|
||||
switch (type) {
|
||||
case 'add':
|
||||
this.$emit('addDeparts', this.treeNode)
|
||||
break
|
||||
case 'edit':
|
||||
break
|
||||
|
||||
@ -4,23 +4,43 @@
|
||||
<el-card class="tree-card">
|
||||
<!-- 用了行列布局 -->
|
||||
<!-- 1. 第一行 公司信息-->
|
||||
<tree-tools :tree-node="company" :is-root="true" />
|
||||
<tree-tools
|
||||
:tree-node="company"
|
||||
:is-root="true"
|
||||
@addDeparts="addDeparts"
|
||||
/>
|
||||
<!-- 2. 树型控件 -->
|
||||
<el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
|
||||
<el-tree
|
||||
:data="departs"
|
||||
:props="defaultProps"
|
||||
:default-expand-all="true"
|
||||
>
|
||||
<!-- 作用域插槽 -->
|
||||
<tree-tools slot-scope="{data}" :tree-node="data" @delDeparts="getDeparts" /><!-- 父传子-->
|
||||
<tree-tools
|
||||
slot-scope="{data}"
|
||||
:tree-node="data"
|
||||
@delDeparts="getDeparts"
|
||||
@addDeparts="addDeparts"
|
||||
/><!-- 父传子-->
|
||||
</el-tree>
|
||||
</el-card>
|
||||
<!-- 新增部门弹窗 -->
|
||||
<add-depart
|
||||
:show-dialog.sync="showDialog"
|
||||
:tree-node="node"
|
||||
@addDepartOK="getDeparts"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import treeTools from './componets/tree-tools.vue'
|
||||
import TreeTools from './componets/tree-tools.vue'
|
||||
import AddDepart from './componets/add-depart.vue'
|
||||
import { getDepartments } from '@/api/departments'
|
||||
import { listToTreeData } from '@/utils/list-to-treedata'
|
||||
export default {
|
||||
components: { treeTools },
|
||||
components: { TreeTools, AddDepart },
|
||||
data() {
|
||||
return {
|
||||
company: {},
|
||||
@ -28,7 +48,9 @@ export default {
|
||||
defaultProps: {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
}
|
||||
},
|
||||
showDialog: false,
|
||||
node: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -43,22 +65,31 @@ export default {
|
||||
// console.log(this.departs)
|
||||
this.company = {
|
||||
name: 'xx股份有限公司' || res.companyName,
|
||||
manager: '负责人'
|
||||
manager: '负责人',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
|
||||
// 新增部门
|
||||
addDeparts(data) {
|
||||
// 显示弹窗
|
||||
this.showDialog = true
|
||||
// 接收树形组件的数据, 主要是父部门节点
|
||||
this.node = data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tree-card {
|
||||
padding: 30px 140px;
|
||||
font-size:14px;
|
||||
}
|
||||
.is-leaf{
|
||||
visibility:hidden;
|
||||
}
|
||||
.el-icon-arrow-down{
|
||||
display: none;
|
||||
}
|
||||
.tree-card {
|
||||
padding: 30px 140px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.is-leaf {
|
||||
visibility: hidden;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user