新增、修改、详情共用同一表单
跳转路由带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" }