vue-admin-template员工详情（vue admin template）

1.detail.vue

<template>
<div class="dashboard-container">
<div class="app-container">
<div class="edit-form">
<el-form ref="userForm" label-width="220px">
<!-- 姓名 部门 -->
<el-row>
<el-col :span="12">
<el-form-item label="姓名" prop="username">
<el-input size="mini" class="inputW" />
</el-form-item>
</el-col>

</el-row>
<!-- 工号 入职时间 -->
<el-row>
<el-col :span="12">
<el-form-item label="工号" prop="workNumber">
<el-input size="mini" class="inputW" />
</el-form-item>
</el-col>
</el-row>
<!--手机 聘用形式  -->
<el-row>
<el-col :span="12">
<el-form-item label="手机" prop="mobile">
<el-input
        size="mini"
class="inputW"
        />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="部门" prop="departmentId">
<!-- 放置及联部门组件 -->
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="聘用形式" prop="formOfEmployment">
<el-select size="mini" class="inputW" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="入职时间" prop="timeOfEntry">
<el-date-picker
        size="mini"
        type="date"
        value-format="yyyy-MM-dd"
class="inputW"
        />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="转正时间">
<el-date-picker
        size="mini"
        type="date"
class="inputW"
        />
</el-form-item>
</el-col>
</el-row>
<!-- 员工照片 -->
<el-row>
<el-col :span="12">
<el-form-item label="员工头像">
<!-- 放置上传图片 -->
</el-form-item>
</el-col>
</el-row>
<!-- 保存个人信息 -->
<el-row type="flex">
<el-col :span="12" style="margin-left:220px">
<el-button size="mini" type="primary">保存更新</el-button>
</el-col>
</el-row>
</el-form>
</div>

</div>
</div>
</template>

<script>

export default {

        }
</script>

<style scoped lang="scss">
        .edit-form {
        background: #fff;
        padding: 20px;
        .inputW {
        width: 380px
        }
        }

</style>

2.在员工管理路由下建立二级子路由

import layout from '@/layout'
        export default {
        path: '/employee',
        component: layout,
        children: [{
        path: '',
        name: 'employee',
        component: () => import('@/views/employee'),
        meta: {
        title: '员工',
        icon: 'people'
        }
        }, {
        path: '/employee/detail/:id?', // 员工详情的地址
        component: () => import('@/views/employee/detail.vue'),
        hidden: true, // 表示隐藏在左侧菜单
        meta: {
        title: '员工详情' // 显示在导航的文本
        }
        }]
        }

3.添加员工按钮进行跳转

<el-button size="mini" type="primary" @click="$router.push('/employee/detail')">添加员工</el-button>

4.员工详情校验

添加数据绑定及校验

<template>
<div class="dashboard-container">
<div class="app-container">
<div class="edit-form">
<el-form ref="userForm" :model="userInfo" :rules="rules" label-width="220px">
<!-- 姓名 -->
<el-row>
<el-col :span="12">
<el-form-item label="姓名" prop="username">
<el-input v-model="userInfo.username" size="mini" class="inputW" />
</el-form-item>
</el-col>

</el-row>
<!-- 工号 -->
<el-row>
<el-col :span="12">
<el-form-item label="工号" prop="workNumber">
<!-- 工号是系统生成的  禁用这个组件-->
<el-input v-model="userInfo.workNumber" disabled size="mini" class="inputW" />
</el-form-item>
</el-col>
</el-row>
<!--手机  -->
<el-row>
<el-col :span="12">
<el-form-item label="手机" prop="mobile">
<el-input
        v-model="userInfo.mobile"
        :disabled="!!$route.params.id"
        size="mini"
class="inputW"
        />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="部门" prop="departmentId">
<!-- 放置及联部门组件 会单独封装-->
<!-- inputW样式会给到selectTree中 template第一层的组件 -->
<select-tree v-model="userInfo.departmentId" class="inputW" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="聘用形式" prop="formOfEmployment">
<el-select v-model="userInfo.formOfEmployment" size="mini" class="inputW">
<el-option label="正式" :value="1" />
<el-option label="非正式" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="入职时间" prop="timeOfEntry">
<el-date-picker
        v-model="userInfo.timeOfEntry"
        size="mini"
        type="date"
        value-format="yyyy-MM-dd"
class="inputW"
        />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="转正时间" prop="correctionTime">
<el-date-picker
        v-model="userInfo.correctionTime"
        size="mini"
        type="date"
class="inputW"
        />
</el-form-item>
</el-col>
</el-row>
<!-- 员工照片 -->
<el-row>
<el-col :span="12">
<el-form-item label="员工头像">
<!-- 放置上传图片 -->
</el-form-item>
</el-col>
</el-row>
<!-- 保存个人信息 -->
<el-row type="flex">
<el-col :span="12" style="margin-left:220px">
<el-button size="mini" type="primary" @click="saveData">保存更新</el-button>
</el-col>
</el-row>
</el-form>
</div>

</div>
</div>
</template>

<script>

export default {
        data() {
        return {
        userInfo: {
        username: '', // 用户名
        mobile: '', // 手机号
        workNumber: '', // 工号
        formOfEmployment: null, // 聘用形式
        departmentId: null, // 部门id
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
        },
        rules: {
        username: [{ required: true, message: '请输入姓名', trigger: 'blur' }, {
        min: 1, max: 4, message: '姓名为1-4位'
        }],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }, {
        //   pattern 正则表达式
        pattern: /^1[3-9]\d{9}$/,
        message: '手机号格式不正确',
        trigger: 'blur'
        }],
        formOfEmployment: [{ required: true, message: '请选择聘用形式', trigger: 'blur' }],
        departmentId: [{ required: true, message: '请选择部门', trigger: 'blur' }],
        timeOfEntry: [{ required: true, message: '请选择入职时间', trigger: 'blur' }],
        correctionTime: [{ required: true, message: '请选择转正时间', trigger: 'blur' }, {
        validator: (rule, value, callback) => {
        if (this.userInfo.timeOfEntry) {
        if (new Date(this.userInfo.timeOfEntry) > new Date(value)) {
        callback(new Error('转正时间不能小于入职时间'))
        return
        }
        }
        callback()
        }
        }]
        }

        }
        }
        }
</script>

<style scoped lang="scss">
        .edit-form {
        background: #fff;
        padding: 20px;
        .inputW {
        width: 380px
        }
        }

</style>

4.api.js

    /**
     * 更新员工
     * **/

    export function updateEmployee(id) {
    return request({
            method: 'put',
            url: `/employee`
  })
}
    /**
     * 新增员工
     * **/

    export function addEmployee(id) {
    return request({
            method: 'post',
            url: `/employee`
  })
}

    /**
     *  获取员工详情
     * **/

    export function getEmployeeDetail(id) {
    return request({
            url: `/employee/${id}`
  })
}

5.select-tree.vue封装部门级联组件

其中通过props: {

label: 'name', // 要展示的字段

value: 'id' // 要存储的字段

}，可以设置级联组件需要的lable,value.

<template>
<!-- element-ui级联组件 -->
<el-cascader
        :value="value"
        size="mini"
        :options="treeData"
        :props="props"
        separator="-"
@change="changeValue"
        />
</template>
<script>
import { getDepartment } from '@/api/department'
        import { transListToTreeData } from '@/utils'
        export default {
        props: {
        value: {
        type: Number, // 存储的是部门的id  3 4 5
default: null
        }
        },
        data() {
        return {
        treeData: [], // 赋值给 级联组件的options
        props: {
        label: 'name', // 要展示的字段
        value: 'id' // 要存储的字段
        }
        }
        },
        created() {
        this.getDepartment()
        },
        methods: {
        async getDepartment() {
        this.treeData = transListToTreeData(await getDepartment(), 0) // 将组织架构的数据 转化树形赋值给treeData
        console.log('tree-data')
        console.log(this.treeData)
        },
        changeValue(list) {
        // 取到数组的最后一次
        if (list.length > 0) {
        this.$emit('input', list[list.length - 1]) // 将最后一位的id取出来 传出去
        } else {
        this.$emit('input', null) // 如果长度为0 说明值为空
        }
        }
        }
        }
</script>

6.列表转化树形

其中if (children.length) item.children = children，表示只有保含子数组才去添加子数组。

    /**
     *
     * 列表型数据转化树形
     */

    export function transListToTreeData(list, rootValue) {
  const arr = []
    list.forEach(item => {
    if (item.pid.toString() === rootValue.toString()) {
        // 找到了匹配的节点
        arr.push(item)
        // 当前节点的id 和 当前节点的子节点的pid是想等的
      const children = transListToTreeData(list, item.id) // 找到的节点的子节点
        if (children.length) item.children = children // 将子节点赋值给当前节点
    }
  })
    return arr
}

7.通过v-modal方法绑定了数据

<!-- inputW样式会给到selectTree中 template第一层的组件 -->
<select-tree v-model="userInfo.departmentId" class="inputW" />

select-tree组件

<template>
<!-- element-ui级联组件 -->
<el-cascader
        :value="value"
        size="mini"
        :options="treeData"
        :props="props"
        separator="-"
@change="changeValue"
        />
</template>

  props: {
          value: {
          type: Number, // 存储的是部门的id  3 4 5
default: null
        }
        },