增加部门

src/api/employees.js

@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+// 获取员工简单信息
+export function getEmployeeSimple() {
+  return request({
+    url: '/sys/user/simple'
+  })
+}

src/views/departments/componets/add-depart.vue

@@ -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>

src/views/departments/componets/tree-tools.vue

@@ -40,9 +40,11 @@ export default {
     }
   },
   methods: {
+    // 操作部门信息
     async operateDeparts(type) {
       switch (type) {
         case 'add':
+          this.$emit('addDeparts', this.treeNode)
           break
         case 'edit':
           break

src/views/departments/index.vue

@@ -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 {
+  .tree-card {
-  padding: 30px  140px;
+    padding: 30px 140px;
-  font-size:14px;
+    font-size: 14px;
-}
+  }
-.is-leaf{
+  .is-leaf {
-  visibility:hidden;
+    visibility: hidden;
-}
+  }
-.el-icon-arrow-down{
+  .el-icon-arrow-down {
-  display: none;
+    display: none;
-}
+  }
 </style>