<template>
<el-form ref="ruleFormRef" style="margin-top: 20px;max-width: 600px" :model="ruleForm" :rules="rules"
label-width="auto">
<el-form-item label="产品名称：" prop="name">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="产品描述：" prop="description">
<el-input v-model="ruleForm.description" type="textarea"/>
</el-form-item>
<el-form-item label="产品分类：" prop="category" style="width: 50%;">
<el-select v-model="ruleForm.category" placeholder="请选择分类">
<el-option v-for="item in categorys" :label="item.name" :value="item.id" :key="item.id" />
</el-select>
</el-form-item>
<el-form-item label="产品单价：" prop="price">
<el-input v-model.number="ruleForm.price" type="number" style="width: 240px" />
</el-form-item>
<el-form-item label="产品库存：" prop="stock">
<el-input v-model.number="ruleForm.stock" type="number" style="width: 240px" />
</el-form-item>
<el-form-item label="生产厂家：" prop="manufacturer">
<el-input v-model="ruleForm.manufacturer" />
</el-form-item>
<el-form-item label="产地：" required>
<el-col :span="12">
<el-form-item prop="originProvince">
<el-select v-model="ruleForm.originProvince" placeholder="省" style="flex: 1; margin-right: 10px">
<el-option v-for="item in originProvinces" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="originCity">
<el-select v-model="ruleForm.originCity" placeholder="市" style="flex: 1 "
:disabled="!ruleForm.originProvince">
<el-option v-for="item in originCitys" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="发货地：" required>
<el-col :span="12">
<el-form-item prop="shippingProvince">
<el-select v-model="ruleForm.shippingProvince" placeholder="省" style="flex: 1; margin-right: 10px">
<el-option v-for="item in originProvinces" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="shippingCity">
<el-select v-model="ruleForm.shippingCity" placeholder="市" style="flex: 1"
:disabled="!ruleForm.shippingProvince">
<el-option v-for="item in shippingCities" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="生产日期" required>
<el-col :span="11">
<el-form-item prop="createAt">
<el-date-picker v-model="ruleForm.createAt" type="date" aria-label="Pick a date" placeholder="Pick a date"
style="width: 100%" />
</el-form-item>
</el-col>
</el-form-item>
<el-form-item>
<!-- 登录按钮：仅在默认模式下显示 -->
<el-button v-if="pageMode === 'default'" style="margin-left: 18px;" type="primary" @click="submitForm(ruleFormRef, ruleForm)">
登录
</el-button>
<!-- 更新按钮：仅在编辑模式下显示 -->
<el-button v-if="pageMode === 'edit'" style="margin-left: 30px;" type="primary" @click="updateForm(ruleFormRef)">
更新
</el-button>
<!-- 重置按钮：在编辑或默认模式下都显示 -->
<el-button v-if="pageMode === 'edit' || pageMode === 'default'" style="margin-left: 30px;" type="primary" @click="resetForm(ruleFormRef)">
重置
</el-button>
</el-form-item>
</el-form>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import productApi from '@/api/products'
import placeApi from '@/api/place'
import { useRouter } from 'vue-router'
import { ElLoading, ElMessage } from 'element-plus'
const pageMode = ref('') // 可选值: 'view', 'edit', 'default'
const router = useRouter();
const ruleFormRef = ref()
const categorys = ref([])// 产品分类
const originProvinces = ref([]) // 省份数据
const originCitys = ref([]) // 城市数据
const shippingCities = ref([]) // 发货地城市数据
const ruleForm = reactive({
name: '',
description: '',
category: '',
price: '',
stock: '',
manufacturer: '',
originProvince: '',
originCity: '',
shippingProvince: '',
shippingCity: '',
createAt: '',
user: 'aaa',
delivery: false,
type: [],
})
const rules = reactive({
name: [
{ required: true, message: '请输入商品名称', trigger: 'blur' },
{ max: 10, message: '长度超过10位', trigger: 'blur' },
],
description: [
{ required: true, message: '请输入商品描述', trigger: 'blur' },
{ max: 200, message: '长度超过200位', trigger: 'blur' },
],
category: [
{
required: true,
message: '请选择分类',
trigger: 'change',
},
],
price: [
{
required: true,
message: '请输入商品单价',
trigger: ['blur', 'change']
},
{
type: 'number',
message: '请输入有效的数字',
trigger: ['blur', 'change']
},
{
validator: (rule, value, callback) => {
if (value === null || value === '') {
callback(new Error('请输入商品单价'))
} else if (value <= 0) {
callback(new Error('单价必须大于 0'))
} else if (value > 10000) {
callback(new Error('单价不能大于 10000'))
} else {
callback()
}
},
trigger: ['blur', 'change']
}
],
stock: [
{
required: true,
message: '请输入商品单价',
trigger: ['blur', 'change']
},
{
type: 'number',
message: '请输入有效的数字',
trigger: ['blur', 'change']
},
{
validator: (rule, value, callback) => {
if (value === null || value === '') {
callback(new Error('请输入商品单价'))
} else if (value <= 0) {
callback(new Error('单价必须大于 0'))
} else if (value > 10000) {
callback(new Error('单价不能大于 10000'))
} else {
callback()
}
},
trigger: ['blur', 'change']
}
],
manufacturer: [
{ required: true, message: '请输入生产厂家', trigger: 'blur' },
],
shippingProvince: {
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('请选择发货省份'))
} else {
callback()
}
},
trigger: 'change'
},
shippingCity:{
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('请选择发货城市'))
} else {
callback()
}
},
trigger: 'change'
},
originProvince: {
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('请选择发货省份'))
} else {
callback()
}
},
trigger: 'change'
},
originCity:{
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('请选择发货城市'))
} else {
callback()
}
},
trigger: 'change'
},
createAt: [
{
type: 'date',
required: true,
message: 'Please pick a date',
trigger: 'change',
},
],
type: [
{
type: 'array',
required: true,
message: 'Please select at least one activity type',
trigger: 'change',
},
],
})
// 表单操作
const resetForm = (formEl) => {
if (!formEl) return
formEl.resetFields()
}
//产品分类
function getCategory() {
productApi.getCategory().then(res => {
categorys.value = res.data;
})
}
// 获取省份
function getProvinces() {
placeApi.getProvince().then(res => {
originProvinces.value = res.data
}).catch(error => {
console.error('获取省份失败:', error)
})
}
// 获取商品详情
function getProductDetail(productId) {
productApi.getById(productId).then(res => {
const data = res.data
// 先赋值整个对象
Object.assign(ruleForm, data)
}).catch(error => {
console.error('获取商品详情失败:', error);
});
}
// 监听产地省份变化，加载城市
watch(
() => ruleForm.originProvince,
(newVal) => {
if (newVal) {
placeApi.getCity(newVal).then(res => {
originCitys.value = res.data
}).catch(() => {
originCitys.value = []
})
} else {
originCitys.value = []
ruleForm.originCity = ''
}
}
)
// 监听发货地省份变化，加载城市
watch(
() => ruleForm.shippingProvince,
(newVal) => {
if (newVal) {
placeApi.getCity(newVal).then(res => {
shippingCities.value = res.data
}).catch(() => {
shippingCities.value = []
})
} else {
shippingCities.value = []
ruleForm.shippingCity = ''
}
}
)
// 更新操作
const updateForm = async (formEl) => {
if (!formEl) return
const loading = ElLoading.service({ fullscreen: true })
await formEl.validate((valid, fields) => {
if (valid) {
console.log('开始提交...')
// 调用 API 更新商品信息
productApi.update(ruleForm).then(res => {
ElMessage.success('更新成功')
router.push('/home/test1') // 可选跳转回列表页
}).catch(error => {
ElMessage.error('更新失败，请重试')
}).finally(() => {
loading.close()
})
} else {
console.log('表单验证失败:', fields)
ElMessage.error('请检查输入内容')
loading.close()
return false
}
})
}
// 登录操作
const submitForm = async (formEl, ruleForm) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
console.log('开始提交商品...')
const loading = ElLoading.service({ fullscreen: true })
productApi.addProduct(ruleForm).then(res => {
ElMessage.success('保存成功')
router.push('/home/test1')
}).catch(error => {
ElMessage.error('保存失败，请重试')
}).finally(() => {
loading.close()
})
} else {
console.log('表单验证失败:', fields)
ElMessage.error('请检查输入内容')
loading.close()
return false
}
})
}
onMounted(() => {
getCategory()
getProvinces()
const route = router.currentRoute.value
const type = route.query.type
const productId = route.params.id || route.query.id
if (type === 'view') {
pageMode.value = 'view' // 查看模式：不显示按钮
} else if (type === 'edit') {
pageMode.value = 'edit' // 编辑模式：显示“更新”、“重置”
} else {
pageMode.value = 'default' // 默认模式：显示“登录”、“重置”
}
if (productId) {
getProductDetail(productId)
}
})
</script>
<style>
.location-selectors {
display: flex;
justify-content: space-between;
width: 100%;
}
</style>
最新发布
本文介绍mx.validators包中的Validator类及其子类的应用，包括StringValidator、NumberValidator和EmailValidator等，通过实例展示了如何设置自定义错误信息及使用不同验证器。
扫一扫
1744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
