北京网站建立公司宁波seo行者seo09
背景：之前ruoyi生成的vue2代码，
<el-form ref=“form”，后面我改成vue3的写法，没有实例化form，
在vue3中是需要定义const form= ref();
导致点击了修改后，页面弹框显示出来，数据没有回显。
一直在怀疑是reactive的响应丢失了，还是toRefs的问题。
找了好久，终于排除出问题所在。
<!-- 添加或修改商品管理对话框 --><el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body><el-form ref="goodsFormRef" :model="form" :rules="rules" label-width="80px"><el-form-item label="商品名称" prop="name"><el-input v-model="form.name" placeholder="请输入商品名称" /></el-form-item><el-form-item label="商品图片地址" prop="image"><image-upload v-model="form.image"/></el-form-item><el-form-item label="商品编号" prop="number"><el-input v-model="form.goodsNum" placeholder="请输入商品编号" /></el-form-item><!-- <el-form-item label="单位名称" prop="unitName">--><!-- <el-input v-model="form.unitName" placeholder="请输入单位名称" />--><!-- </el-form-item>--><el-form-item label="商品分类" prop="categoryId"><!-- <el-input v-model="form.categoryId" placeholder="请输入商品分类ID" />--><treeselect :options="categoryTree" placeholder="请选择上级菜单" v-model="form.categoryId" style="width: 230px;"/></el-form-item><!-- <el-form-item label="条码" prop="barCode">--><!-- <el-input v-model="form.barCode" placeholder="请输入条码" />--><!-- </el-form-item>--><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /></el-form-item><!-- <el-form-item label="衣长/裙长/裤长" prop="length">--><!-- <el-input v-model="form.length" placeholder="请输入衣长/裙长/裤长" />--><!-- </el-form-item>--><!-- <el-form-item label="高度/袖长" prop="height">--><!-- <el-input v-model="form.height" placeholder="请输入高度/袖长" />--><!-- </el-form-item>--><!-- <el-form-item label="宽度/胸阔(围)" prop="width">--><!-- <el-input v-model="form.width" placeholder="请输入宽度/胸阔(围)" />--><!-- </el-form-item>--><!-- <el-form-item label="肩阔" prop="width1">--><!-- <el-input v-model="form.width1" placeholder="请输入肩阔" />--><!-- </el-form-item>--><!-- <el-form-item label="腰阔" prop="width2">--><!-- <el-input v-model="form.width2" placeholder="请输入腰阔" />--><!-- </el-form-item>--><!-- <el-form-item label="臀阔" prop="width3">--><!-- <el-input v-model="form.width3" placeholder="请输入臀阔" />--><!-- </el-form-item>--><!-- <el-form-item label="重量" prop="weight">--><!-- <el-input v-model="form.weight" placeholder="请输入重量" />--><!-- </el-form-item>--><!-- <el-form-item label="0启用 1禁用" prop="disable">--><!-- <el-input v-model="form.disable" placeholder="请输入0启用 1禁用" />--><!-- </el-form-item>--><!-- <el-form-item label="保质期" prop="period">--><!-- <el-input v-model="form.period" placeholder="请输入保质期" />--><!-- </el-form-item>--><el-form-item label="预计采购价格" prop="purPrice"><el-input v-model="form.purPrice" placeholder="请输入预计采购价格" /></el-form-item><el-form-item label="建议批发价" prop="wholePrice"><el-input v-model="form.wholePrice" placeholder="请输入建议批发价" /></el-form-item><el-form-item label="建议零售价" prop="retailPrice"><el-input v-model="form.retailPrice" placeholder="请输入建议零售价" /></el-form-item><!-- <el-form-item label="单位成本" prop="unitCost">--><!-- <el-input v-model="form.unitCost" placeholder="请输入单位成本" />--><!-- </el-form-item>--><el-form-item label="供应商" prop="supplierId"><!-- <el-input v-model="form.supplierId" placeholder="请输入供应商id" />--><el-select v-model="form.supplierId" filterable placeholder="请选择供应商名称"><el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select></el-form-item><el-form-item label="状态" prop="status"><el-select v-model="form.status" placeholder="状态"><el-option label="销售中" :value="1"></el-option><el-option label="已下架" :value="2"></el-option></el-select></el-form-item><!-- <el-form-item label="品牌" prop="brandId">--><!-- <el-input v-model="form.brandId" placeholder="请输入品牌id" />--><!-- </el-form-item>--><!-- <el-form-item label="属性1：季节" prop="attr1">--><!-- <el-input v-model="form.attr1" placeholder="请输入属性1：季节" />--><!-- </el-form-item>--><!-- <el-form-item label="属性2：分类" prop="attr2">--><!-- <el-input v-model="form.attr2" placeholder="请输入属性2：分类" />--><!-- </el-form-item>--><!-- <el-form-item label="属性3：风格" prop="attr3">--><!-- <el-input v-model="form.attr3" placeholder="请输入属性3：风格" />--><!-- </el-form-item>--><!-- <el-form-item label="属性4：年份" prop="attr4">--><!-- <el-input v-model="form.attr4" placeholder="请输入属性4：年份" />--><!-- </el-form-item>--><!-- <el-form-item label="属性5：面料" prop="attr5">--><!-- <el-input v-model="form.attr5" placeholder="请输入属性5：面料" />--><!-- </el-form-item>--><!-- <el-form-item label="外链url" prop="linkUrl">--><!-- <el-input v-model="form.linkUrl" type="textarea" placeholder="请输入内容" />--><!-- </el-form-item>--><!-- <el-form-item label="最低库存" prop="lowQty">--><!-- <el-input v-model="form.lowQty" placeholder="请输入最低库存" />--><!-- </el-form-item>--><!-- <el-form-item label="最高库存" prop="highQty">--><!-- <el-input v-model="form.highQty" placeholder="请输入最高库存" />--><!-- </el-form-item>--></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>
<script setup name="Goods" lang="ts">
import { ref, onMounted } from 'vue'
const goodsFormRef = ref<ElFormInstance>();
const initFormData: GoodsForm = {id: undefined,name: undefined,image: undefined,outerErpGoodsId: undefined,goodsNum: undefined,unitName: undefined,categoryId: undefined,barCode: undefined,remark: undefined,status: undefined,length: undefined,height: undefined,width: undefined,width1: undefined,width2: undefined,width3: undefined,weight: undefined,disable: undefined,period: undefined,purPrice: undefined,wholePrice: undefined,retailPrice: undefined,unitCost: undefined,supplierId: undefined,brandId: undefined,attr1: undefined,attr2: undefined,attr3: undefined,attr4: undefined,attr5: undefined,linkUrl: undefined,lowQty: undefined,highQty: undefined,province: undefined,city: undefined,town: undefined,synchronousId: undefined,declareCnName: undefined,declareEnName: undefined,declarePrice: undefined,declarePriceUnit: undefined,productBrand: undefined,manufacturer: undefined,customsCode: undefined,specificationModel: undefined,productAttribute: undefined,productLength: undefined,productWidth: undefined,productHeight: undefined,productWeight: undefined,purLink: undefined,purLink2: undefined,supplierId2: undefined,purPrice2: undefined
}
const data = reactive<PageData<GoodsForm, GoodsQuery>>({form: {...initFormData},queryParams: {pageNum: 1,pageSize: 10,name: undefined,image: undefined,outerErpGoodsId: undefined,goodsNum: undefined,unitName: undefined,categoryId: undefined,barCode: undefined,status: undefined,length: undefined,height: undefined,width: undefined,width1: undefined,width2: undefined,width3: undefined,weight: undefined,disable: undefined,period: undefined,purPrice: undefined,wholePrice: undefined,retailPrice: undefined,unitCost: undefined,supplierId: undefined,brandId: undefined,attr1: undefined,attr2: undefined,attr3: undefined,attr4: undefined,attr5: undefined,linkUrl: undefined,lowQty: undefined,highQty: undefined,province: undefined,city: undefined,town: undefined,synchronousId: undefined,declareCnName: undefined,declareEnName: undefined,declarePrice: undefined,declarePriceUnit: undefined,productBrand: undefined,manufacturer: undefined,customsCode: undefined,specificationModel: undefined,productAttribute: undefined,productLength: undefined,productWidth: undefined,productHeight: undefined,productWeight: undefined,purLink: undefined,purLink2: undefined,supplierId2: undefined,purPrice2: undefined,params: {}},rules: {id: [{ required: true, message: "主键id不能为空", trigger: "blur" }],name: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],image: [{ required: true, message: "商品图片地址不能为空", trigger: "blur" }],outerErpGoodsId: [{ required: true, message: "商品唯一ID不能为空", trigger: "blur" }],goodsNum: [{ required: true, message: "商品编号不能为空", trigger: "blur" }],unitName: [{ required: true, message: "申报单位不能为空", trigger: "blur" }],categoryId: [{ required: true, message: "商品分类ID不能为空", trigger: "blur" }],barCode: [{ required: true, message: "条码不能为空", trigger: "blur" }],remark: [{ required: true, message: "备注不能为空", trigger: "blur" }],status: [{ required: true, message: "状态1销售中2已下架不能为空", trigger: "change" }],length: [{ required: true, message: "衣长/裙长/裤长不能为空", trigger: "blur" }],height: [{ required: true, message: "高度/袖长不能为空", trigger: "blur" }],width: [{ required: true, message: "宽度/胸阔(围)不能为空", trigger: "blur" }],width1: [{ required: true, message: "肩阔不能为空", trigger: "blur" }],width2: [{ required: true, message: "腰阔不能为空", trigger: "blur" }],width3: [{ required: true, message: "臀阔不能为空", trigger: "blur" }],weight: [{ required: true, message: "重量不能为空", trigger: "blur" }],disable: [{ required: true, message: "0启用 1禁用不能为空", trigger: "blur" }],period: [{ required: true, message: "保质期不能为空", trigger: "blur" }],purPrice: [{ required: true, message: "预计采购价格不能为空", trigger: "blur" }],wholePrice: [{ required: true, message: "建议批发价不能为空", trigger: "blur" }],retailPrice: [{ required: true, message: "建议零售价不能为空", trigger: "blur" }],unitCost: [{ required: true, message: "单位成本不能为空", trigger: "blur" }],supplierId: [{ required: true, message: "供应商id不能为空", trigger: "blur" }],brandId: [{ required: true, message: "品牌id不能为空", trigger: "blur" }],attr1: [{ required: true, message: "属性1：季节不能为空", trigger: "blur" }],attr2: [{ required: true, message: "属性2：分类不能为空", trigger: "blur" }],attr3: [{ required: true, message: "属性3：风格不能为空", trigger: "blur" }],attr4: [{ required: true, message: "属性4：年份不能为空", trigger: "blur" }],attr5: [{ required: true, message: "属性5：面料不能为空", trigger: "blur" }],linkUrl: [{ required: true, message: "外链url不能为空", trigger: "blur" }],lowQty: [{ required: true, message: "最低库存不能为空", trigger: "blur" }],highQty: [{ required: true, message: "最高库存不能为空", trigger: "blur" }],province: [{ required: true, message: "发货地省不能为空", trigger: "blur" }],city: [{ required: true, message: "发货地市不能为空", trigger: "blur" }],town: [{ required: true, message: "发货地区不能为空", trigger: "blur" }],synchronousId: [{ required: true, message: "同步编号不能为空", trigger: "blur" }],declareCnName: [{ required: true, message: "申报中文名不能为空", trigger: "blur" }],declareEnName: [{ required: true, message: "申报英文名不能为空", trigger: "blur" }],declarePrice: [{ required: true, message: "申报价格不能为空", trigger: "blur" }],declarePriceUnit: [{ required: true, message: "申报价格单位：日元，美元不能为空", trigger: "blur" }],productBrand: [{ required: true, message: "产品品牌不能为空", trigger: "blur" }],manufacturer: [{ required: true, message: "制造商不能为空", trigger: "blur" }],customsCode: [{ required: true, message: "海关编码不能为空", trigger: "blur" }],specificationModel: [{ required: true, message: "规格型号不能为空", trigger: "blur" }],productAttribute: [{ required: true, message: "产品属性：如普货，含电池不能为空", trigger: "blur" }],productLength: [{ required: true, message: "产品尺寸：长不能为空", trigger: "blur" }],productWidth: [{ required: true, message: "产品尺寸：宽不能为空", trigger: "blur" }],productHeight: [{ required: true, message: "产品尺寸：高不能为空", trigger: "blur" }],productWeight: [{ required: true, message: "产品重量不能为空", trigger: "blur" }],purLink: [{ required: true, message: "采购链接不能为空", trigger: "blur" }],purLink2: [{ required: true, message: "采购链接2不能为空", trigger: "blur" }],supplierId2: [{ required: true, message: "备选供应商不能为空", trigger: "blur" }],purPrice2: [{ required: true, message: "采购价2不能为空", trigger: "blur" }]}
});const { queryParams, form, rules } = toRefs(data);/** 表单重置 */
const reset = () => {form.value = {...initFormData};goodsFormRef.value?.resetFields();
}/** 修改按钮操作 */
const handleUpdate = async (row?: GoodsVO) => {reset();const _id = row?.id || ids.value[0]const res = await getGoods(_id);Object.assign(form.value, res.data);dialog.visible = true;dialog.title = "修改OMS商品";}
数据就回显出来了
