index---------主页面（图1）
form-----------子页面（图2）
index.vue
/** 重点！！！！
* 获取表单组件传递的信息，传给后端接口
* @param {从form表单传递的数据} datas
* Files_Operation 接口名
*/
GetCondition(datas) {
const param = datas;
this.test = datas.FileUrl; //cs
//获取表单组件后，判断是新增/修改
if (this.dialogTitle.search("上传") != -1) {
//调用新增方法
const formData = new FormData();
formData.append("ID", param.ID);
formData.append("FileName", param.FileName); //视频名称
formData.append("FileType", param.FileType); //车辆类型
formData.append("FileUrl", param.FileUrl); //序号
formData.append("SortID", param.SortID); //序号
console.log("给接口传参==", formData);
this.$luleApi.Files_Operation(formData).then((res) => {
console.log("res==", res);
if (res.data.code == 200) {
this.$message({
message: "上传成功",
type: "success",
});
} else {
return;
}
this.$nextTick(() => {
this.dialogVisible = false; //弹框关闭
let param = { EquipmentType: this.EquipmentType };
this.getTabledata(param); //刷新页面刷新数据
});
});
}
},
form.vue
<template> <div class="DictForm"> <el-form ref="newFrom" :form="form" :model="newFrom" :rules="rules" label-width="100px" style="padding-left: 7px" > <el-form-item label="装备类型"> <el-radio-group v-model="newFrom.FileType"> <el-radio label="1" v-model="newFrom.EquipmentType" >油泵车</el-radio> <el-radio label="2" v-model="newFrom.EquipmentType" >电源车</el-radio> </el-radio-group> </el-form-item> <el-form-item label="文件名称" prop="FileName" > <el-input v-model="newFrom.FileName" placeholder="请上传文件" readonly ></el-input> </el-form-item> <el-form-item label="上传文件"> <!-- accept 限制上传类型 --> <el-upload ref="fileUpload" class="upload-demo" action="" :on-change="handleChange" :file-list="fileListUpload" accept=".csv,.txt" :on-exceed="handleExceedVisio" :auto-upload="false" > <el-button size="small" type="primary" >点击上传</el-button> </el-upload> </el-form-item> <el-form-item label="排序" prop="SortID" > <el-input v-model="newFrom.SortID" type="number" min="0" placeholder="请输入序号" @input="changeInput(newFrom.SortID)" ></el-input> </el-form-item> <el-form-item style="width: 100%;margin:0"> <div class="footer-btn"> <el-button @click="onclose()"><el-icon> <FolderRemove /> </el-icon>  清 空</el-button> <el-button type="primary" @click="onSubmit('newFrom')" ><el-icon> <Search /> </el-icon> 提 交</el-button> </div> </el-form-item> </el-form> </div> </template> <script> export default { props: ["form", "formID", "partend"], data() { return { fileListUpload: [], newFrom: { ID: "", ParentId: "", FileName: "1", FileType: "", FileUrl: "", FullName: "", FullPath: "", SortID: "", }, rules: { FileName: [ { required: true, message: "请上传文件", trigger: ["blur", "change"], }, ], SortID: [ { required: true, message: "请输入序号", trigger: ["blur", "change"], }, ], }, }; }, created() { if (JSON.stringify(this.form) == "{}") { this.newFrom = {}; } else { this.newFrom = this.form; } }, watch: { form(newVal, oldVal) { if (newVal && newVal.length == 0) { this.newFrom = {}; } else { this.newFrom = newVal; } }, partend: { deep: true, immediate: true, handler(n, o) { this.partendData = n; }, }, }, mounted() {}, methods: { //正则表达，判断数字 changeInput(value) { this.newFrom.SortID = value.replace(/^[0]+[0-9]{1,}|[^\d]/g, ""); }, //#region 上传文件 //文件上传成功时的钩子 onSuccess(response, file, fileList) { this.$message.success("上传成功"); // 处理上传成功后的逻辑，例如更新UI或者处理其他数据 }, //文件上传失败时的钩子 onError(err, file, fileList) { console.log(err, file); this.$message.error("上传失败"); // 处理上传失败后的逻辑 }, //改变 handleChange(file, fileLists) { this.newFrom.FileUrl = file.raw; //文件流 if (this.newFrom.FileUrl) { if ( this.newFrom.FileUrl.type == ".csv" || this.newFrom.FileUrl.type == "application/vnd.ms-excel" || this.newFrom.FileUrl.type == "text/plain" ) { //名称回显 this.newFrom.FileName = this.newFrom.FileUrl.name.split(".")[0]; } else { this.$message({ type: "warning", message: "附件格式错误，请删除后重新上传！", }); } } else { this.$message({ type: "warning", message: "请上传附件！", }); } }, //上传限制 handleExceedVisio() { this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传！`); }, //#endregion //保存 onSubmit(newFrom) { this.$refs[newFrom].validate((valid) => { if (valid) { this.$emit("fathernewFrom", this.newFrom); //把this.newFrom指传给父组件 } else { return false; } }); }, //清空 onclose() { (this.newFrom = { ID: "", ParentId: "", FileName: "", FileType: "", FileUrl: "", FullName: "", FullPath: "", SortID: "", }), this.$refs.newFrom.resetFields(); // this.$emit("formClose", false); }, }, }; </script> <style scoped> </style>
