新增员工

src/api/employees.js

@@ -25,3 +25,14 @@ export function delEmployee(id) {
     method: 'delete'
   })
 }
+
+/** **
+ *  新增员工的接口
+ * **/
+export function addEmployee(data) {
+  return request({
+    method: 'post',
+    url: '/sys/user',
+    data
+  })
+}

src/views/employees/components/add-employee.vue

@@ -0,0 +1,136 @@
+<template>
+  <el-dialog title="新增员工" :visible="showDialog" @close="btnCancel">
+    <!-- 表单 -->
+    <el-form ref="addEmployee" label-width="120px" :model="formData" :rules="rules">
+      <el-form-item label="姓名" prop="username">
+        <el-input v-model="formData.username" style="width:50%" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item label="手机" prop="mobile">
+        <el-input v-model="formData.mobile" style="width:50%" placeholder="请输入手机号" />
+      </el-form-item>
+      <el-form-item label="入职时间" prop="timeOfEntry">
+        <el-date-picker v-model="formData.timeOfEntry" style="width:50%" placeholder="请选择入职时间" />
+      </el-form-item>
+      <el-form-item label="聘用形式" prop="formOfEmployment">
+        <el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="请选择">
+          <!-- 遍历枚举类型 -->
+          <el-option v-for="item in EmployeeEnum.hireType" :key="item.id" :label="item.value" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工号" prop="workNumber">
+        <el-input v-model="formData.workNumber" style="width:50%" placeholder="请输入工号" />
+      </el-form-item>
+      <el-form-item label="部门" prop="departmentName">
+        <el-input v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" @focus="getDepartments" />
+        <!-- 树形控件 -->
+        <el-tree v-if="treeData.length > 0 " :data="treeData" :props="{ label: 'name' }" :default-expand-all="true" @node-click="selectNode" />
+      </el-form-item>
+      <el-form-item label="转正时间" prop="correctionTime">
+        <el-date-picker v-model="formData.correctionTime" style="width:50%" placeholder="请选择转正时间" />
+      </el-form-item>
+    </el-form>
+    <!-- footer插槽 -->
+    <template v-slot:footer>
+      <el-row type="flex" justify="center">
+        <el-col :span="6">
+          <el-button size="small" @click="btnCancel">取消</el-button>
+          <el-button type="primary" size="small" @click="btnOK">确定</el-button>
+        </el-col>
+      </el-row>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { addEmployee } from '@/api/employees'
+import { getDepartments } from '@/api/departments'
+import { listToTreeData } from '@/utils/list-to-treedata'
+import EmployeeEnum from '@/api/constant/employees'
+
+export default {
+  props: {
+    showDialog: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      EmployeeEnum, // 聘用形式枚举
+      loading: false,
+      formData: {
+        username: '',
+        mobile: '',
+        formOfEmployment: '',
+        workNumber: '',
+        departmentName: '',
+        timeOfEntry: '',
+        correctionTime: ''
+      },
+      treeData: [], // 部门树形数据
+      rules: {
+        username: [
+          { required: true, message: '用户姓名不能为空', trigger: 'blur' },
+          { min: 1, max: 4, message: '用户姓名为1-4位' }
+        ],
+        mobile: [
+          { required: true, message: '手机号不能为空', trigger: 'blur' },
+          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
+        ],
+        formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'blur' }],
+        workNumber: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
+        departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
+        timeOfEntry: [{ required: true, message: '入职时间', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    async getDepartments() {
+      this.showTree = true
+      this.loading = true
+      const { depts } = await getDepartments()
+      this.treeData = listToTreeData(depts, '')
+      this.loading = false
+    },
+    // 选择部门事件回调
+    selectNode(node) {
+      this.formData.departmentName = node.name
+      this.treeData = {}
+    },
+    // 点击确定
+    async btnOK() {
+      try {
+        await this.$refs.addEmployee.validate()
+        // 调用新增接口
+        await addEmployee(this.formData) // 新增员工
+        // 告诉父组件更新数据
+        // this.$parent 可以直接调用到父组件的实例 实际上就是父组件this
+        // this.$emit
+        this.$parent.getEmployeeList()
+        this.$parent.showDialog = false
+        this.$message.success('添加员工成功')
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    btnCancel() {
+      // 重置原来的数据
+      this.formData = {
+        username: '',
+        mobile: '',
+        formOfEmployment: '',
+        workNumber: '',
+        departmentName: '',
+        timeOfEntry: '',
+        correctionTime: ''
+      }
+      this.$refs.addEmployee.resetFields() // 重置校验结果
+      this.$emit('update:showDialog', false)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/employees/index.vue

@@ -6,7 +6,7 @@
         <template slot="after">
           <el-button size="small" type="warning">导入</el-button>
           <el-button size="small" type="danger">导出</el-button>
-          <el-button size="small" type="primary">新增员工</el-button>
+          <el-button size="small" type="primary" @click="showDialog = true">新增员工</el-button>
         </template>
       </page-tools>
       <!-- 放置表格和分页 -->
@@ -45,13 +45,17 @@
         </el-row>
       </el-card>
     </div>
+    <!-- 新增/编辑 弹窗 -->
+    <add-employee :show-dialog.sync="showDialog" />
   </div>
 </template>
 
 <script>
 import { getEmployeeList, delEmployee } from '@/api/employees'
 import EmployeeEnum from '@/api/constant/employees'
+import AddEmployee from './components/add-employee'
 export default {
+  components: { AddEmployee },
   data() {
     return {
       list: [], // 员工列表
@@ -59,7 +63,8 @@ export default {
         page: 1, // 当前页码
         size: 10, // 每页条数
         total: 0 // 总数
-      }
+      },
+      showDialog: false // 弹窗
     }
   },
   created() {
@@ -81,7 +86,6 @@ export default {
     },
     // 格式化聘用形式
     formatEmployment(row, column, cellValue, index) {
-      console.log(column)
       // 要去找1所对应的值
       const obj = EmployeeEnum.hireType.find(item => item.id === cellValue)
       // 把需要的格式return出去
@@ -92,6 +96,10 @@ export default {
       try {
         await this.$confirm('确定删除该员工吗?')
         await delEmployee(id)
+        // 如果是不是第一页并且只有一条, 向前翻页
+        if (this.list.length === 1 && this.page.page > 1) {
+          this.page.page -= 1
+        }
         this.getEmployeeList()
         this.$message.success('删除员工成功')
       } catch (err) {