/*

            <script> 一. 表单验证部分 </script>

|-- el-form     绑定 model 和 rules 规则
|---- el-form-item    绑定 prop 属性
|------ el-input  绑定 v-model

项目代码
<template>
  <div class="login-container">
    <!-- model： 表单绑定的数据 -->
    <!-- rules： 表单校验规则 -->
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
      <!-- prop： 表单校验字段 -->
      <el-form-item prop="mobile">
        <!-- v-model： 绑定数据同时实现双向数据绑定 -->
        <el-input v-model="loginForm.mobile" placeholder="手机号" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" placeholder = "密码" />
      </el-form-item>
    </el-form>
  </div>
</template>

// 验证方法 1 正则 (pattern)
{ pattern: /^1[3-9]\d{9}$/, trigger: 'blur', message: '请输入正确的手机号' }

// 验证方法 2 自定义验证函数
export function validMobile(value) {
  return /^1[3-9]\d{9}$/.test(value)
} 导出函数  登录页引入validMobile

{ validator: validateMobile, trigger: 'blur' } 校验规则中定义
验证
const validateMobile = (rule, value, callback) => {
      if (!validMobile(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }

             <script>  二. 跨域问题*** </script>

    1.什么是跨域
      前端项目地址和接口地址
      端口、域名、协议有一个不一样就是跨域

    2.什么是同源
      端口、域名、协议完全一致就是同源

    3.跨域产生的原因
      浏览器的同源策略
      发起的请求必须是 AJAX 请求

    4.跨域的解决方案
      JSONP {
        ① (script的src属性可以请求外部的js文件，这个请求不是ajax，它没有跨域问题。)
        ② (借助 `script` 标签src请求服务端上的接口。`<script src="http://localhost:3000/get"`)
        ③ (服务端的接口返回JavaScript 脚本，并附上要返回的数据。`res.end("fn(数据)")`)
           }

      CORS  (服务端响应的时候添加一个 `Access-Control-Allow-Origin` 的响应头)

      代理转发 {
        ① (服务器与服务器之间不存在跨域问题)
        ② (前端项目和目标服务器之间架设一个中间(代理)服务器即可)
        ③ (代理服务器和前端项目需要同源)
              }

      vue-cli解决跨域
      moudel.exports = {
        devServer: {
          // 代理配置
          proxy:{
            // 这里的 api 表示如果我们的请求地址以 /dev_api 开头的时候，就出触发代理机制
            '/dev_api':{
              target:'url' // 需要代理的地址，就是后端服务器地址
              changeOrigin: true // 允许跨域
              // 如果设置的基准地址和接口前缀不一致，需要路径重写 (如果没有接口前缀，用 '/')
              pathRewrite:{
                '^/dev_api': '/'
              }
            }
          }
        }
      }

                 <script> 三.前置守卫的判断流程 </script>

      // 先创建白名单
      const whiteList = ['/login', '/404']

      // 前置守卫
      router.beforeEach((to, from, next) => {
      //  先获取 token
      const token = store.state.user.token
      // 判断 token 是否存在
      if (token) {
        // 存在 token 判断是否去登录页
        if (to.path === '/login') {
          // 直接回主页
          next('/')
        } else {
          // 存在 token 直接发行
          next()
        }
      } else {
        // 无 token 判断是否去白名单
        if (whiteList.includes(to.path)) {
          // 发行
          next()
        } else {
          // 直接回登录页
          next('/login')
        }
      }
      })

                <script>  三. 验证编码*** </script>

      先在父组件返回一个精简的数据，传递到子组件(map方法)
      先声明自定义验证函数
      使用 validator 绑定声明的自定义验证函数
      需要用 map 方法将 code 组成一个数组
      如果是编辑时，则必须要在不能使用的部门编号中排除当前正在编辑的部门编码{
        使用 filter 筛选出 id 和 parentId 不一样的
      }
      includes 判断输入的值在不在 code 组成的数组中

                <script>  四. 验证名称*** </script>

      先在父组件返回一个精简的数据，传递到子组件(map方法)
      先声明自定义验证函数
      使用 validator 绑定声明的自定义验证函数
      filter筛选出同级部门(item.pid === parentId)
      map把同级部门的 name 组成新数组
      判断是否是编辑 {
         1.先获取本身(find)
         2.获取到本身以后，才能获取 pid
         3.根据 pid 找到同级，并将自身排除 使用 map 将同级 name 组成数组
         4.使用 filter 方法获取到同级，需要将本身去除
         5.使用 map 将同级 name 组成数组
      }
      使用 includes 方法验证

                <script>  五. 员工模块-使用Vue.use封装全局组件*** </script>

      语法：
         Vue.use({
          当我们在 Vue.use 方法中创建了一个 install 方法
          方法会被自动调用，在调用的过程中，会将 Vue 作为参数（形参）传递给 install 方法
          install(Vue) {
            // 全局注册
          Vue.component()
        }
      })

                <script>  六. 员工详情-Excel导入、导出*** </script>

    Excel 导入：
      1. 在src/components/UploadExcel/index.vue 定义组件 粘贴导入功能的组件代码 并在 index.js 文件中注册成为全局组件
      2. 下载 XLSX 等包，需要包支持
          {npm install xlsx file-saver -S 和 npm install script-loader -S -D}
      3. 在src/views/excel/index.vue 创建文件 导入 UploadExcel 子组件 并挂载到路由上
      **4. 在src/views/excel/index.vue 中格式化内容，将编辑的excel内容转换成后端需要的形式 调接口发请求

    Excel 导出：
      1. 导入src/vendor/export2Excel插件
      **2. 在src/views/employees/index.vue中格式化转换数据

                <script>  七. 员工详情-将头像上传到第三方（腾讯云）*** </script>

      1.创建src/components/UploadImg/index.vue 进行upload二次封装，并在index.js中注册全局
      2.在src\views\employees\components\user-info.vue组件中使用
      3.在src/components/UploadImg/index.vue中粘贴腾讯云上传步骤的代码，并配置存储桶名称和地段等信息
      4.将腾讯云传递回来的图片地址传递给父组件（通过 ref 获取到子组件实例）父组件中调接口渲染数据
      5.最后封装全局图片组件，创建src/components/ImageHolder/head.jpg，并注册成全局组件
*/