上传

src/views/MiniMall/Product/add.vue

@@ -33,6 +33,38 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col
+            :span="8"
+            :offset="0"
+            v-for="fieldItem in diyFieldList"
+            :key="fieldItem.clueParamId"
+          >
+            <el-form-item :label="fieldItem.label" :prop="fieldItem.field">
+              <component :is="componentMap[fieldItem.component]" v-model="form[fieldItem.field]">
+                <template v-if="fieldItem.component == 'Select'">
+                  <el-option
+                    v-for="item in fieldItem.options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </template>
+                <template v-else-if="fieldItem.component == 'Radio'">
+                  <el-radio v-for="item in fieldItem.options" :key="item.id" :label="item.id">
+                    {{ item.name }}
+                  </el-radio>
+                </template>
+                <template v-else-if="fieldItem.component == 'Checkbox'">
+                  <el-checkbox
+                    v-for="item in fieldItem.options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </template>
+              </component>
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :span="12" :offset="0">
@@ -51,7 +83,7 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row :gutter="20">
+        <el-row :gutter="20" v-if="!formLoading">
           <el-col :span="24" :offset="0">
             <el-form-item label="轮播图" prop="carouselImages">
               <UploadImgs v-model="form.carouselImages" height="100px" width="100px" />
@@ -143,21 +175,25 @@
   </el-tabs>
   <div class="mt-20px flex justify-center">
     <el-button type="primary" @click="onSubmit">保存</el-button>
-    <el-button plain>重置</el-button>
+    <el-button plain @click="router.replace('/MiniMall/product')">返回列表</el-button>
   </div>
   <ProductAttributesAddForm ref="attributesAddFormRef" :propertyList="form.productSpecList" />
 </template>
 
 <script setup>
 import { cloneDeep } from 'lodash-es'
+import { getDiyFieldList } from '@/api/mall/product/productField'
 import * as PropertyApi from '@/api/mall/product/property'
 import * as ProductApi from '@/api/mall/product/index'
 import ProductAttributesAddForm from './Comp/ProductAttributesAddForm.vue'
 import * as BrandApi from '@/api/mall/product/brand'
 import * as CategoryApi from '@/api/mall/product/category'
 import { handleTree } from '@/utils/tree'
+import { isObject } from '@/utils/is.ts'
+import { componentMap } from '@/components/Form/src/componentMap'
 
 const route = useRoute()
+const router = useRouter()
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -184,7 +220,11 @@ const opts = ref({
   category: []
 })
 
+const diyFieldList = ref([])
 async function getOptions() {
+  getDiyFieldList().then((data) => {
+    diyFieldList.value = data
+  })
   BrandApi.getSimpleBrandList().then((data) => {
     opts.value.brand = data || []
   })
@@ -329,24 +369,35 @@ const spuForm = ref()
 
 function onSubmit() {
   spuForm.value.validate(async (valid) => {
-    if (valid && validateSku()) {
-      // 深拷贝一份, 这样最终 server 端不满足，不需要影响原始数据
-      const deepCopyFormData = cloneDeep(unref(form.value))
-      deepCopyFormData.productSpecList = deepCopyFormData.skuList
-      if (deepCopyFormData.productCategory && deepCopyFormData.productCategory.length) {
-        deepCopyFormData.productCategory = deepCopyFormData.productCategory.at(-1)
-      }
-      delete deepCopyFormData.skuList
-      // 校验都通过后提交表单
-      const data = deepCopyFormData
-      const id = route.query.id
-      if (!id) {
-        await ProductApi.createProduct(data)
-        message.success(t('common.createSuccess'))
-      } else {
-        await ProductApi.updateProduct(data)
-        message.success(t('common.updateSuccess'))
+    try {
+      if (valid && validateSku()) {
+        // 深拷贝一份, 这样最终 server 端不满足，不需要影响原始数据
+        const deepCopyFormData = cloneDeep(unref(form.value))
+        deepCopyFormData.productSpecList = deepCopyFormData.skuList
+        if (deepCopyFormData.productCategory && deepCopyFormData.productCategory.length) {
+          deepCopyFormData.productCategory = deepCopyFormData.productCategory.at(-1)
+        }
+        delete deepCopyFormData.skuList
+        // 校验都通过后提交表单
+        let data = {
+          ...deepCopyFormData,
+          diyParams: {}
+        }
+        for (let i = 0; i < diyFieldList.value.length; i++) {
+          const element = diyFieldList.value[i]
+          data.diyParams[element.field] = data[element.field]
+        }
+        const id = route.query.id
+        if (!id) {
+          await ProductApi.createProduct(data)
+          message.success(t('common.createSuccess'))
+        } else {
+          await ProductApi.updateProduct(data)
+          message.success(t('common.updateSuccess'))
+        }
       }
+    } catch (error) {
+      console.log(error)
     }
   })
 }
@@ -414,10 +465,15 @@ const getDetail = async () => {
     formLoading.value = true
     try {
       const res = await ProductApi.getProduct(route.query.id)
-      const propList = getPropertyList(res.productSpecList)
+      let diyField = {}
+      if (res.diyParams) {
+        diyField = isObject(res.diyParams) ? res.diyParams : JSON.parse(res.diyParams)
+      }
+      const propList = getPropertyList(res?.productSpecList || [])
       form.value = {
         ...res,
-        skuList: res.productSpecList,
+        ...diyField,
+        skuList: res?.productSpecList || [],
         productSpecList: propList
       }
     } finally {

src/views/MiniMall/Product/index.vue

@@ -81,7 +81,15 @@
     </el-table-column>
     <el-table-column label="简介" min-width="70" prop="productIntro" />
     <el-table-column :formatter="dateFormatter" label="创建时间" prop="createTime" width="180" />
-    <el-table-column fixed="right" label="操作" min-width="80">
+    <el-table-column v-for="item in diyFieldList" :key="item.clueParamId" :label="item.label">
+      <template #default="{ row }">
+        <div v-if="item.component == 'DatePicker'">
+          {{ formatDate(row[item.field]) }}
+        </div>
+        <div v-else>{{ row[item.field] }}</div>
+      </template>
+    </el-table-column>
+    <el-table-column fixed="right" label="操作" min-width="100">
       <template #default="{ row }">
         <!-- TODO：【详情】，可以后面点做哈 -->
         <el-button
@@ -113,12 +121,14 @@
 </template>
 
 <script setup name="Product">
-import { dateFormatter } from '@/utils/formatTime'
+import { getDiyFieldList } from '@/api/mall/product/productField'
+import { dateFormatter, formatDate } from '@/utils/formatTime'
 import { createImageViewer } from '@/components/ImageViewer'
 import * as ProductApi from '@/api/mall/product'
 import * as BrandApi from '@/api/mall/product/brand'
 import * as CategoryApi from '@/api/mall/product/category'
 import { handleTree } from '@/utils/tree'
+import { isObject } from '@/utils/is.ts'
 
 const { currentRoute, push } = useRouter()
 const message = useMessage() // 消息弹窗
@@ -162,13 +172,20 @@ async function getList() {
       params.productCategory = params.productCategory.at(-1)
     }
     const data = await ProductApi.getProductPage(params)
-    tableList.value = data.list.map((prod) => ({
-      ...prod,
-      properties: prod.productSpecList[0].properties.map((item) => ({
-        propertyId: item.propertyId,
-        label: item.propertyName
-      }))
-    }))
+    tableList.value = data.list.map((prod) => {
+      let diyField = {}
+      if (prod.diyParams) {
+        diyField = isObject(prod.diyParams) ? prod.diyParams : JSON.parse(prod.diyParams)
+      }
+      return {
+        ...prod,
+        ...diyField,
+        properties: prod.productSpecList[0].properties.map((item) => ({
+          propertyId: item.propertyId,
+          label: item.propertyName
+        }))
+      }
+    })
     total.value = data.total
   } finally {
     loading.value = false
@@ -187,7 +204,12 @@ function handleQuery() {
   getList()
 }
 
+const diyFieldList = ref([])
+
 async function getOptions() {
+  getDiyFieldList().then((data) => {
+    diyFieldList.value = data
+  })
   BrandApi.getSimpleBrandList().then((data) => {
     opts.value.brand = data || []
   })