form表单

src/api/mall/product/spu.ts

@@ -58,6 +58,9 @@ export interface Spu {
   stock?: number // 产品库存
   createTime?: Date // 产品创建时间
   status?: number // 产品状态
+  proType?:any
+  phoneNumber?:any
+  qrCodePath?:any
 }
 
 // 获得 Spu 列表

src/views/mall/product/spu/form/InfoForm.vue

@@ -2,52 +2,33 @@
 <template>
   <el-form ref="formRef" :disabled="isDetail" :model="formData" :rules="rules" label-width="120px">
     <el-form-item label="产品名称" prop="name">
-      <el-input
-        v-model="formData.name"
-        :autosize="{ minRows: 2, maxRows: 2 }"
-        :clearable="true"
-        :show-word-limit="true"
-        class="w-80!"
-        maxlength="64"
-        placeholder="请输入产品名称"
-        type="textarea"
-      />
+      <el-input v-model="formData.name" :autosize="{ minRows: 2, maxRows: 2 }" :clearable="true" :show-word-limit="true"
+        class="w-80!" maxlength="64" placeholder="请输入产品名称" type="textarea" />
     </el-form-item>
     <el-form-item label="产品分类" prop="categoryId">
-      <el-cascader
-        v-model="formData.categoryId"
-        :options="categoryList"
-        :props="defaultProps"
-        class="w-80"
-        clearable
-        filterable
-        placeholder="请选择产品分类"
-      />
+      <el-cascader v-model="formData.categoryId" :options="categoryList" :props="defaultProps" class="w-80" clearable
+        filterable placeholder="请选择产品分类" />
     </el-form-item>
-    <el-form-item label="产品品牌" prop="brandId">
-      <el-select v-model="formData.brandId" class="w-80" placeholder="请选择产品品牌">
-        <el-option
-          v-for="item in brandList"
-          :key="item.id"
-          :label="item.name"
-          :value="item.id as number"
-        />
+    <el-form-item label="产品品牌" prop="brandId" class="w-80">
+      <el-select v-model="formData.brandId" placeholder="请选择产品品牌">
+        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id as number" />
       </el-select>
     </el-form-item>
     <el-form-item label="产品关键字" prop="keyword">
       <el-input v-model="formData.keyword" class="w-80!" placeholder="请输入产品关键字" />
     </el-form-item>
     <el-form-item label="产品简介" prop="introduction">
-      <el-input
-        v-model="formData.introduction"
-        :autosize="{ minRows: 2, maxRows: 2 }"
-        :clearable="true"
-        :show-word-limit="true"
-        class="w-80!"
-        maxlength="128"
-        placeholder="请输入产品简介"
-        type="textarea"
-      />
+      <el-input v-model="formData.introduction" :autosize="{ minRows: 2, maxRows: 2 }" :clearable="true"
+        :show-word-limit="true" class="w-80!" maxlength="128" placeholder="请输入产品简介" type="textarea" />
+    </el-form-item>
+    <el-form-item label="产品类型 " prop="proType">
+      <el-select v-model="formData.proType" placeholder="请选择" clearable class="!w-240px">
+        <el-option v-for="dict in getIntDictOptions('proType')" :key="dict.value" :label="dict.label"
+          :value="dict.value" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="联系人手机号" prop="phoneNumber">
+      <el-input v-model="formData.phoneNumber" class="w-80!" placeholder="请输入联系人手机号" />
     </el-form-item>
     <el-form-item label="产品封面图" prop="picUrl">
       <UploadImg v-model="formData.picUrl" :disabled="isDetail" height="80px" />
@@ -55,6 +36,11 @@
     <el-form-item label="产品轮播图" prop="sliderPicUrls">
       <UploadImgs v-model="formData.sliderPicUrls" :disabled="isDetail" />
     </el-form-item>
+
+    <el-form-item label="联系人二维码" prop="qrCodePath">
+      <!-- <el-input v-model="formData.qrCodePath" class="w-80!" placeholder="请上传联系人二维码" /> -->
+      <UploadImgs v-model="formData.qrCodePath" :disabled="isDetail" />
+    </el-form-item>
   </el-form>
 </template>
 <script lang="ts" setup>
@@ -67,12 +53,12 @@ import * as ProductCategoryApi from '@/api/mall/product/category'
 import { CategoryVO } from '@/api/mall/product/category'
 import * as ProductBrandApi from '@/api/mall/product/brand'
 import { BrandVO } from '@/api/mall/product/brand'
-
+import { getIntDictOptions } from '@/utils/dict'
 defineOptions({ name: 'ProductSpuInfoForm' })
 const props = defineProps({
   propFormData: {
     type: Object as PropType<Spu>,
-    default: () => {}
+    default: () => { }
   },
   isDetail: propTypes.bool.def(false) // 是否作为详情组件
 })
@@ -87,7 +73,10 @@ const formData = reactive<Spu>({
   picUrl: '', // 产品封面图
   sliderPicUrls: [], // 产品轮播图
   introduction: '', // 产品简介
-  brandId: undefined // 产品品牌
+  brandId: undefined, // 产品品牌
+  proType: undefined,
+  phoneNumber: undefined,
+  qrCodePath: undefined,
 })
 const rules = reactive({
   name: [required],
@@ -96,7 +85,10 @@ const rules = reactive({
   introduction: [required],
   picUrl: [required],
   sliderPicUrls: [required],
-  brandId: [required]
+  brandId: [required],
+  proType: [required],
+  phoneNumber: [required],
+  qrCodePath: [required],
 })
 
 /** 将传进来的值赋值给 formData */