前端实习D23

新增、修改、详情共用同一表单

跳转路由带id   ? 标识可有可无，可以传id也可以选择不传，页面都能正确显示

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

   @click="$router.push(`/employee/detail/${row.id}`)"

<el-button type="text" size="mini" @click="$router.push(`/employee/detail/${row.id}`)" >查看</el-button>

获取路由参数的中id      if (this.$route.params.id)

    getEmployeeDetail(){
      getEmployeeDetail(this.$route.params.id).then((res)=>{
        this.userInfo=res
        console.log(res)
      })
    }

          if(this.$route.params.id){
            await updateEmployee(this.userInfo)
            this.$message.success('更新员工成功')
          }else{
             await addEmployee(this.userInfo)
            this.$message.success('新增成功')
            this.$router.push('/empolyee')
          }

上传文件

• 调接口

export function uploadExcel(data) {
  return request({
    url: '/sys/user/import',
    method: 'post',
    data // form-data类型 因为要上传文件类型
  })
}

• 点击上传-弹出文件选择框

<el-button type="text" @click="handleUpload">点击上传</el-button>
handleUpload() {
      this.$refs['excel-upload-input'].click() // this.$refs.属性名 和 this.$refs[属性名] 等价
},

监听文件改变-上传excel-关闭弹层

 <input
          ref="excel-upload-input"
          class="excel-upload-input"
          type="file"
          accept=".xlsx, .xls"
          @change="uploadChange"
  >
  async uploadChange(event) {
      console.log(event.target.files)
      // 调用上传接口
      // uploadExcel() // 参数  form-data 需要文件file
      const files = event.target.files // input的文件列表
      if (files.length > 0) {
        // 大于0 说明有文件要上传
        const data = new FormData()
        // file: file类型
        data.append('file', files[0]) // 将文件参数加入到formData中
        try {
          await uploadExcel(data)
          // 成功
          this.$emit('uploadSuccess') // 通知父组件 我上传成功
          this.$emit('update:showExcelDialog', false) // 关闭弹层
          // this.$refs['excel-upload-input'].value = ''
        } catch (error) {
          // 捕获失败
          // this.$refs['excel-upload-input'].value = ''
        } finally {
          // 不论成功或者失败都会执行finally
          this.$refs['excel-upload-input'].value = ''
        }
      }
}

父组件需要监听上传成功的事件

<import-excel :show-excel-dialog.sync="showExcelDialog" @uploadSuccess="getEmployeeList" />

 正则校验

两位小数

 pattern:/^-?(0|([1-9]\d*))(\.\d{2})$/,message:"请输入两位小数", trigger: "blur" 

正整数

{pattern:/^\+?[1-9][0-9]*$/,message:"请输入正整数", trigger: "blur" }