146 lines
4.8 KiB
Vue
146 lines
4.8 KiB
Vue
<template>
|
||
<div class="app-container customer-control">
|
||
<div class="customer-box">
|
||
<el-form ref="searchForm" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
|
||
<el-form-item label="商品名称" prop="goodName">
|
||
<el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" style="width: 800px" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="商品分类" required>
|
||
<el-col :span="6">
|
||
<el-form-item prop="categoryId">
|
||
<el-select v-model="formInline.categoryId" placeholder="请选择" class="my-el-select">
|
||
<el-option v-for="item in categoryList" :key="item.id" :value="item.id" :label="item.name" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item prop="categoryId2">
|
||
<el-select v-model="formInline.categoryId2" placeholder="请选择" class="my-el-select">
|
||
<el-option v-for="item in categoryList2" :key="item.id" :value="item.id" :label="item.name" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item prop="categoryId3">
|
||
<el-select v-model="formInline.categoryId3" placeholder="请选择" class="my-el-select">
|
||
<el-option v-for="item in categoryList3" :key="item.id" :value="item.id" :label="item.name" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ca } from "element-plus/es/locales.mjs";
|
||
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
|
||
|
||
const formInline = reactive({
|
||
goodName: "高质量水稻",
|
||
categoryId: "", //一级
|
||
categoryId2: "", //二级
|
||
categoryId3: "", //三级
|
||
goodUrl:
|
||
"https://image.cnhnb.com/image/jpg/head/2021/12/23/d304172c6f8f45a1aa11d9d1b51de309.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg,https://image.cnhnb.com/image/jpg/head/2021/12/25/d345dde8938240afb9e59b16f77f8b50.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg",
|
||
netWeight: { "100元": "1kg", "200元": "10kg", "300元": "100kg" },
|
||
stock: 6500,
|
||
attribute: {
|
||
品牌: "童涵春堂",
|
||
型号: "种子种苗",
|
||
储存条件: "15~25℃(避免高温或冷冻)",
|
||
系列: "农用百货",
|
||
产地: "耿马县",
|
||
},
|
||
sendAddress: "云南省昆明市",
|
||
safeguard: "七天无理由退货",
|
||
detailUrl:
|
||
"https://image.cnhnb.com/image/jpg/head/2021/12/23/d304172c6f8f45a1aa11d9d1b51de309.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg,https://image.cnhnb.com/image/jpg/head/2021/12/25/d345dde8938240afb9e59b16f77f8b50.jpg?x-tos-process=image/resize,m_fill,w_525,h_525/interlace,1/quality,q_100/format,jpg",
|
||
brandId: "44552",
|
||
traceCode: "45788",
|
||
videoUrl: "",
|
||
describe:
|
||
"在实际应用中，你可能需要根据具体的业务需求来调整视频字段的表示方式。例如，在数据库设计中，你可能需要为每个字段定义更详细的数据类型、约束条件和索引策略；在API接口定义中，你可能需要为每个字段定义请求和响应的格式、错误码和文档说明等。",
|
||
});
|
||
const rules = reactive({
|
||
goodName: [
|
||
{ required: true, message: '请输入商品名称', trigger: 'blur' },
|
||
],
|
||
region: [
|
||
{
|
||
required: true,
|
||
message: 'Please select Activity zone',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
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',
|
||
},
|
||
],
|
||
desc: [
|
||
{ required: true, message: 'Please input activity form', trigger: 'blur' },
|
||
],
|
||
})
|
||
const categoryList = ref([]);
|
||
const categoryList2 = ref([]);
|
||
const categoryList3 = ref([]);
|
||
const searchForm = ref(null);
|
||
const onSubmit = () => {
|
||
console.log("submit!");
|
||
console.log(formInline);
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.customer-box {
|
||
border-radius: 16px;
|
||
padding: 20px 16px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.my-el-select {
|
||
margin-right: 16px;
|
||
}
|
||
</style>
|