operation-system/src/views/goods/addGoods.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>