<template>
<el-form ref="ruleFormRef" style="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="shippingCity">
<el-input v-model="ruleForm.shippingCity" />
</el-form-item>
<el-form-item label="产地:" prop="origin" style="width: 100%;">
<template #label>
<span style="color: #ff4d4f;">*</span> 产地:
</template>
<div class="location-selectors">
<el-select v-model="ruleForm.originProvince" placeholder="省"style="flex: 1; margin-right: 10px" @change="handleProvinceChange">
<el-option v-for="item in originProvinces" :key="item.id":label="item.name":value="item.id" />
</el-select>
<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>
</div>
<el-form-item label="发货地:" prop="shippingArea" style="width: 100%;">
<template #label>
<span style="color: #ff4d4f;">*</span> 发货地:
</template>
<div class="location-selectors">
<el-select v-model="ruleForm.originProvince" placeholder="省"style="flex: 1;width: 200px; margin-right: 10px" @change="handleProvinceChange">
<el-option v-for="item in originProvinces" :key="item.id":label="item.name":value="item.id" />
</el-select>
<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>
</div>
</el-form-item>
</el-form-item>
<el-form-item label="Activity time" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker
v-model="ruleForm.date1"
type="date"
aria-label="Pick a date"
placeholder="Pick a date"
style="width: 100%"
/>
</el-form-item>
</el-col>
<el-col class="text-center" :span="2">
<span class="text-gray-500">-</span>
</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker
v-model="ruleForm.date2"
aria-label="Pick a time"
placeholder="Pick a time"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="Instant delivery" prop="delivery">
<el-switch v-model="ruleForm.delivery" />
</el-form-item>
<el-form-item label="Activity location" prop="location">
<el-segmented v-model="ruleForm.location" :options="locationOptions" />
</el-form-item>
<el-form-item label="Activity type" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox value="Online activities" name="type">
Online activities
</el-checkbox>
<el-checkbox value="Promotion activities" name="type">
Promotion activities
</el-checkbox>
<el-checkbox value="Offline activities" name="type">
Offline activities
</el-checkbox>
<el-checkbox value="Simple brand exposure" name="type">
Simple brand exposure
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio value="Sponsorship">Sponsorship</el-radio>
<el-radio value="Venue">Venue</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">
Create
</el-button>
<el-button @click="resetForm(ruleFormRef)">Reset</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'
const ruleFormRef = ref()
const ruleForm = reactive({
name: '',
description:'',
category:'',
price: '',
stock: '',
shippingCity:'',
originProvince: '', // 省
originCity: '', // 市
date1: '',
date2: '',
delivery: false,
location: '',
type: [],
resource: '',
})
const locationOptions = ['Home', 'Company', 'School']
const categorys = ref([])
// 添加省市区数据
const originProvinces = ref([]) // 省份数据
const originCitys = ref([]) // 城市数据
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' },
{ min: 0, message: '单价不能小于0', trigger: 'blur' },
{ max: 10000, message: '单价不能大于10000', trigger: 'blur' },
],
stock: [
{ required: true, message: '请输入商品库存', trigger: 'blur' },
{ min: 0, message: '库存不能小于0', trigger: 'blur' },
{ max: 10000, message: '库存不能大于10000', trigger: 'blur' },
],
shippingCity: [
{ required: true, message: '请输入生产厂家', trigger: 'blur' },
],
origin:
{
validator: (rule, value, callback) => {
// 使用正确的字段名 originProvince 和 originCity
if (!ruleForm.originProvince) {
callback(new Error('请选择省份'))
} else if (!ruleForm.originCity) {
callback(new Error('请选择城市'))
} else {
callback()
}
},
trigger: 'change'
},
date1: [
{
type: 'date',
required: true,
message: 'Please pick a date',
trigger: 'change',
},
],
date2: [
{
type: 'date',
required: true,
message: 'Please pick a time',
trigger: 'change',
},
],
location: [
{
required: true,
message: 'Please select a location',
trigger: 'change',
},
],
type: [
{
type: 'array',
required: true,
message: 'Please select at least one activity type',
trigger: 'change',
},
],
resource: [
{
required: true,
message: 'Please select activity resource',
trigger: 'change',
},
],
})
const submitForm = async (formEl) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
console.log('submit!')
} else {
console.log('error submit!', fields)
}
})
}
const resetForm = (formEl) => {
if (!formEl) return
formEl.resetFields()
}
const options = Array.from({ length: 10000 }).map((_, idx) => ({
value: `${idx + 1}`,
label: `${idx + 1}`,
}))
//产品分类
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 handleProvinceChange(provinceId) {
ruleForm.originCity = '' // 重置城市选择
if (provinceId) {
placeApi.getCity(provinceId).then(res => {
originCitys.value = res.data
}).catch(error => {
console.error('获取城市失败:', error)
originCitys.value = []
})
} else {
originCitys.value = []
}
}
onMounted(() => {
getCategory()
getProvinces()
})
</script>
<style>
.location-selectors {
display: flex;
justify-content: space-between;
width: 100%;
}
</style> 为什么产地和发货地样式不一致
最新发布