为SKU图片字段添加必填验证规则,并在图片上传和删除时触发验证
This commit is contained in:
@@ -110,7 +110,7 @@
|
|||||||
<el-input-number v-model="skuForm.sort" :min="0" controls-position="right" />
|
<el-input-number v-model="skuForm.sort" :min="0" controls-position="right" />
|
||||||
<span style="margin-left: 8px; color: #909399; font-size: 12px">数值越小越靠前</span>
|
<span style="margin-left: 8px; color: #909399; font-size: 12px">数值越小越靠前</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="图片">
|
<el-form-item label="图片" prop="imageUrl" required>
|
||||||
<el-upload
|
<el-upload
|
||||||
class="sku-image-uploader"
|
class="sku-image-uploader"
|
||||||
:show-file-list="false"
|
:show-file-list="false"
|
||||||
@@ -193,6 +193,8 @@ const skuRules: FormRules = {
|
|||||||
skuName: [{ required: true, message: '请输入SKU名称', trigger: 'blur' }],
|
skuName: [{ required: true, message: '请输入SKU名称', trigger: 'blur' }],
|
||||||
price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
|
price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
|
||||||
stock: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
|
stock: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
|
||||||
|
imageUrl: [{ required: true, message: '请上传SKU图片', trigger: 'change' }],
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 打开弹窗
|
// 打开弹窗
|
||||||
@@ -394,6 +396,7 @@ const handleSkuImageUpload = async (options: UploadRequestOptions) => {
|
|||||||
if (url) {
|
if (url) {
|
||||||
skuForm.imageUrl = url;
|
skuForm.imageUrl = url;
|
||||||
skuImagePreview.value = formatImageUrl(url);
|
skuImagePreview.value = formatImageUrl(url);
|
||||||
|
skuFormRef.value?.validateField('imageUrl');
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ElMessage.error('图片上传失败');
|
ElMessage.error('图片上传失败');
|
||||||
@@ -404,6 +407,7 @@ const handleSkuImageUpload = async (options: UploadRequestOptions) => {
|
|||||||
const removeSkuImage = () => {
|
const removeSkuImage = () => {
|
||||||
skuForm.imageUrl = '';
|
skuForm.imageUrl = '';
|
||||||
skuImagePreview.value = '';
|
skuImagePreview.value = '';
|
||||||
|
skuFormRef.value?.validateField('imageUrl');
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取属性的可选值
|
// 获取属性的可选值
|
||||||
|
|||||||
Reference in New Issue
Block a user