<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="ruleForm.price" type="textarea" /> -->
<el-input v-model="ruleForm.price" style="width: 240px" maxlength="10" placeholder="Please input" show-word-limit type="text"/>
</el-form-item>
<el-form-item label="Activity count" prop="count">
<el-select-v2
v-model="ruleForm.count"
placeholder="Activity count"
:options="options"
/>
</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 } from 'vue';
import productApi from '@/api/products'
const ruleFormRef = ref()
const ruleForm = reactive({
name: '',
description:'',
category:'',
price: null,
count: '',
date1: '',
date2: '',
delivery: false,
location: '',
type: [],
resource: '',
})
const locationOptions = ['Home', 'Company', 'School']
const categorys = 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', max: 200, message: '长度超过1000', trigger: 'blur' },
],
count: [
{
required: true,
message: 'Please select Activity count',
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;
})
}
onMounted(() => {
getCategory();
});
</script> 想要产品单价不小于0
Vue中特定元素触发事件的解决办法
扫一扫
3309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
