编辑部门功能

src/api/departments.js

@@ -7,6 +7,13 @@ export function getDepartments() {
   })
 }
 
+// 获取部门详情
+export function getDepartDetail(id) {
+  return request({
+    url: `/company/department/${id}`
+  })
+}
+
 // 删除部门
 export function delDepartments(id) {
   return request({
@@ -23,3 +30,12 @@ export function addDepartments(data) {
     data
   })
 }
+
+// 编辑部门
+export function updateDepartments(data) {
+  return request({
+    url: `/company/department/${data.id}`,
+    method: 'put',
+    data
+  })
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="新增部门" :visible="showDialog" @close="btnCancel">
+  <el-dialog :title="title" :visible="showDialog" @close="btnCancel">
     <!-- 表单组件  el-form   label-width设置label的宽度   -->
     <!-- 匿名插槽 -->
     <el-form ref="departForm" label-width="120px" :model="formData" :rules="rules">
@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import { getDepartments, addDepartments } from '@/api/departments'
+import { getDepartments, addDepartments, getDepartDetail, updateDepartments } from '@/api/departments'
 import { getEmployeeSimple } from '@/api/employees'
 export default {
   props: {
@@ -48,13 +48,27 @@ export default {
     const checkNameRepeat = async(rule, value, callback) => {
       // 成功调用callback
       // 失败调用callback(new Error('错误原因'))
+      let isRepeat
       const { depts } = await getDepartments()
-      const isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
+      // 编辑场景
+      if (this.formData.id) {
+        isRepeat = depts.filter(item => item.id !== this.treeNode.id && item.pid === this.treeNode.pid).some(item => item.name === value)
+      } else {
+        // 新增场景
+        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) => {
+      let isRepeat
       const { depts } = await getDepartments()
-      const isRepeat = depts.some(item => item.code === value && value) // 编码不能为空, 因为预设部门有可能为空
+      if (this.formData.id) {
+        // 编辑场景
+        isRepeat = depts.some(item => item.id !== this.treeNode.id && item.code === value && value)
+      } else {
+        // 新增场景
+        isRepeat = depts.some(item => item.code === value && value) // 编码不能为空, 因为预设部门有可能为空
+      }
       isRepeat ? callback(new Error(`已经有部门使用了${value}编码`)) : callback()
     }
     return {
@@ -91,23 +105,34 @@ export default {
 
     }
   },
+  computed: {
+    title() {
+      return this.formData.id ? '编辑部门' : '新增部门'
+    }
+  },
   methods: {
     async getEmployeeSimple() {
       const res = await getEmployeeSimple()
-      console.log(res)
+      // console.log(res)
       this.simpleUserInfo = [...res]
     },
     // 确定提交按钮
     async btnOK() {
       try {
         await this.$refs.departForm.validate()
-        // 接口要求拼接一个pid
+        // 编辑场景
-        await addDepartments({ ...this.formData, pid: this.treeNode.id })
+        if (this.formData.id) {
+          await updateDepartments(this.formData)
+        } else {
+          // 新增场景
+          // 接口要求拼接一个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('添加成功')
+        this.$message.success(this.formData.id ? '编辑成功' : '添加成功')
       } catch (error) {
         console.log('捕获错误')
         console.log(error)
@@ -115,10 +140,21 @@ export default {
     },
     // 取消按钮
     btnCancel() {
+      // 兼容编辑功能, 强制重置
+      this.formData = {
+        name: '',
+        code: '',
+        manager: '',
+        introduce: ''
+      }
       // resetFields, 重置校验字段 和校验错误信息
       this.$refs.departForm.resetFields()
       // 关闭弹窗
       this.$emit('update:showDialog', false)
+    },
+    // 获取部门详情
+    async getDepartDetail(id) {
+      this.formData = await getDepartDetail(id)
     }
   }
 }

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

@@ -47,6 +47,7 @@ export default {
           this.$emit('addDeparts', this.treeNode)
           break
         case 'edit':
+          this.$emit('editDeparts', this.treeNode)
           break
         case 'del':
           await delDepartments(this.treeNode.id)

src/views/departments/index.vue

@@ -21,11 +21,13 @@
             :tree-node="data"
             @delDeparts="getDeparts"
             @addDeparts="addDeparts"
+            @editDeparts="editDeparts"
           /><!-- 父传子-->
         </el-tree>
       </el-card>
       <!-- 新增部门弹窗 -->
       <add-depart
+        ref="addForm"
         :show-dialog.sync="showDialog"
         :tree-node="node"
         @addDepartOK="getDeparts"
@@ -50,6 +52,7 @@ export default {
         children: 'children'
       },
       showDialog: false,
+      // 父组件传递给弹窗
       node: {}
     }
   },
@@ -76,6 +79,14 @@ export default {
       this.showDialog = true
       // 接收树形组件的数据, 主要是父部门节点
       this.node = data
+    },
+
+    // 编辑部门
+    editDeparts(data) {
+      this.showDialog = true
+      this.node = data
+      // 直接通过ref获取子组件并调用它的方法
+      this.$refs.addForm.getDepartDetail(this.node.id)
     }
   }
 }