1、级联组件双向绑定

逐字稿：首先我们需要知道v-model是:value="userInfo.departmentId" @input="userInfo.departmentId = $event" 的简写形式；然后我们在封装好的级联组件中使用props进行value接收。并将其赋值给级联组件自带的value属性中。

2、新增员工

逐字稿：点击新增员工按钮，先需要通过表单校验，通过后调用新增接口，调用接口的时候需要配合await，当调用接口成功后，也就是await + 调用接口返回ture情况下，执行this.$message.success('新增员工信息')提示信息，然后跳转到列表页。

this.$refs.userForm.validate()
await addEmployee(this.userInfo)
// 3. 提示用户
this.$message.success('新增员工成功')
// 4. 回到列表页
this.$router.push('/employee')

3、查看员工(保存更新新的员工信息)

涉及到的知识点
- 查看员工、新增员工共用组件detail，所以需要在路由设置可选id
- 通过路由信息获取的id判断是新增员工还是查看员工，通过双重否定 => 布尔
- 逻辑与实现简写

4、图像上传

逐字稿：图像上传功能用到了elementui提供的upload上传组件，为便于复用，我们可以将其放入一个子组件对这个功能进行一个封装，我们在这里使用v-model双向绑定知识点；我们将里面的value绑定到后端提供的图像属性staffPhoto,子组件通过props接收value并将其绑定在显示图片的src里面。这样就实现了图片上传值的双向数据绑定。接下来，我们将分两步进行介绍：1、上传图片前：我们通过文档提供的before-upload属性，可以点击添加图片前对图片的信息进行获取并过滤，然后将图片返回。2、上传图片时，这里我们使用到了el-upload提供的http-request属性进行操作，它对默认的上传行为进行了覆盖。我们通过这个属性能获取到用户上传的图片信息，配合腾讯云服务器提供的存储以及COS插件最终获取到了上传图片的路径并通过$emit将这个路径值派发给父组件以此达到图片数据的展示和更新。

// 图片上传前干嘛
beforeAvatarUpload(file) {
  const imgList = ['image/jpeg', 'image/png', 'image/bmp', 'image/jpg']
  const isJPG = imgList.includes(file.type)
  console.log(file.type, isJPG)
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isJPG) {
    this.$message.error('上传头像图片只能是 JPG 格式!')
  }
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

5、使用cos-sdk上传图片至腾讯云

逐字稿：

注册腾讯云
点击云产品里面的对象存储
创建存储桶获取存储桶名称：dgqb-1301660135；
打开链接console.cloud.tencent.com/cam/capi 获取应用标识和密钥
- 标识：AKID6FG7pV0QGrEPM4WkncCmNlupWt1uYx97
- 密钥：mJemgL5mHYjhSzUxMeliUPBk5CHMOEC6
- 地域：ap-nanjing
下载插件：cos-sdk npm i cos-js-sdk-v5 或者 yarn add cos-js-sdk-v5；
引入下载的插件：import COS from 'cos-js-sdk-v5'；

// 上传图片
  httpRequest(params) {
      const cos = new COS({
        SecretId: 'AKID6FG7pV0QGrEPM4WkncCmNlupWt1uYx97',
        SecretKey: 'mJemgL5mHYjhSzUxMeliUPBk5CHMOEC6'
      })

      // 上传方法
      cos.putObject({
        Bucket: 'dgqb-1301660135',
        Region: 'ap-nanjing',
        Key: params.file.name,
        StorageClass: 'STANDARD',
        Body: params.file
      }, (err, data) => {
        console.log(err, data.Location)
        if (data.statusCode === 200 && data.Location) {
          this.$message.success('上传图像成功')
          this.$emit('input', `https://${data.Location}`)
        } else {
          this.$message.error('图片上传失败')
        }
     })
   }

今天涉及到的知识点：

关于路由传参：在实现新增员工和更新员工信息的时候，因为共用个组件，所以我们需要对这个组件的功能做相应的区分。在点击查看员工信息进行跳转的时候，我们需要传递这个员工的id，由于新增员工不需要这个id，所以在路由配置这个id的时候我们设置为可选（下图所示），这样我们就能很好的处理这两个需求。
!!this.$route.params.id：Javascript中，!表示运算符“非"，如果变量不是布尔类型，会将变量自动转化为布尔类型，再取非，那么用两个!!就可以将变量转化为对应布尔值。这里表达的意思是：若路由传来的id为真，则这个输入框禁止输入。
利用逻辑与简化代码

第八天学习总结—员工模块2