商品管理: fix:根据商品属性动态生成表格值

2025-11-04 04:08:44 +08:00 · 2023-04-30 02:26:35 +08:00
parent 7a64eb5198
commit 538d1e0b6c
5 changed files with 140 additions and 36 deletions
--- a/src/views/mall/product/management/components/BasicInfoForm.vue
+++ b/src/views/mall/product/management/components/BasicInfoForm.vue
@@ -60,7 +60,7 @@
      </el-col>
      <el-col :span="12">
        <el-form-item label="商品规格" props="specType">
-          <el-radio-group v-model="formData.specType" @change="changeSpecType(formData.specType)">
+          <el-radio-group v-model="formData.specType">
            <el-radio :label="false" class="radio">单规格</el-radio>
            <el-radio :label="true">多规格</el-radio>
          </el-radio-group>
@@ -76,12 +76,17 @@
      </el-col>
      <!-- 多规格添加-->
      <el-col :span="24">
-        <el-form-item v-if="formData.specType" label="商品属性" prop="">
-          <el-button class="mr-15px" @click="AttributesAddFormRef.open()">添加规格</el-button>
+        <el-form-item v-if="formData.specType" label="商品属性">
+          <el-button class="mr-15px mb-10px" @click="AttributesAddFormRef.open()"
+            >添加规格
+          </el-button>
          <ProductAttributes :attribute-data="attributeList" />
        </el-form-item>
+        <el-form-item v-if="formData.specType" label="批量设置">
+          <SkuList :attributeList="attributeList" :is-batch="true" :prop-form-data="formData" />
+        </el-form-item>
        <el-form-item>
-          <SkuList :sku-data="formData.skus" :subCommissionType="formData.subCommissionType" />
+          <SkuList :attributeList="attributeList" :prop-form-data="formData" />
        </el-form-item>
      </el-col>
    </el-row>
@@ -110,14 +115,8 @@ const props = defineProps({
 })
 const AttributesAddFormRef = ref() // 添加商品属性表单
 const ProductManagementBasicInfoRef = ref() // 表单Ref
-// 属性列表
-const attributeList = ref([
-  {
-    id: 1,
-    name: '颜色',
-    values: [{ id: 1, name: '白色' }]
-  }
-])
+const attributeList = ref([]) // 商品属性列表
+/** 添加商品属性 */
 const addAttribute = (property: any) => {
  attributeList.value.push(property)
 }
@@ -176,10 +175,10 @@ const rules = reactive({
  unit: [required],
  introduction: [required],
  picUrl: [required],
-  sliderPicUrls: [required]
+  sliderPicUrls: [required],
  // deliveryTemplateId: [required],
-  // specType: [required],
-  // subCommissionType: [required],
+  specType: [required],
+  subCommissionType: [required]
 })
 /**
 * 将传进来的值赋值给formData
@@ -215,10 +214,7 @@ const validate = async () => {
  })
 }
 defineExpose({ validate })
-// 选择规格
-const changeSpecType = (specType) => {
-  console.log(specType)
-}
+
 // 分销类型
 const changeSubCommissionType = () => {
  // 默认为零，类型切换后也要重置为零
@@ -227,10 +223,7 @@ const changeSubCommissionType = () => {
    item.subCommissionSecondPrice = 0
  }
 }
-// 选择属性确认
-// const confirm = () => {}
-// 添加规格
-// const addRule = () => {}
+
 const categoryList = ref() // 分类树
 onMounted(async () => {
  // 获得分类树
--- a/src/views/mall/product/management/components/ProductAttributes.vue
+++ b/src/views/mall/product/management/components/ProductAttributes.vue
@@ -49,10 +49,10 @@ const inputVisible = computed(() => (index) => {
  if (attributeIndex.value === index) return true
 })
 const InputRef = ref() //标签输入框Ref
-const attributeList = ref([])
+const attributeList = ref([]) // 商品属性列表
 const props = defineProps({
  attributeData: {
-    type: Object,
+    type: Array,
    default: () => {}
  }
 })
--- a/src/views/mall/product/management/components/ProductAttributesAddForm.vue
+++ b/src/views/mall/product/management/components/ProductAttributesAddForm.vue
@@ -62,6 +62,9 @@ const submitForm = async () => {
      const propertyId = await PropertyApi.createProperty(data)
      emit('success', { id: propertyId, ...formData.value, values: [] })
    } else {
+      if (res[0].values === null) {
+        res[0].values = []
+      }
      emit('success', res[0]) // 因为只用一个
    }
    message.success(t('common.createSuccess'))
--- a/src/views/mall/product/management/components/SkuList/index.vue
+++ b/src/views/mall/product/management/components/SkuList/index.vue
@@ -1,10 +1,21 @@
 <template>
-  <el-table :data="SkuData" border class="tabNumWidth" size="small">
+  <el-table :data="isBatch ? SkuData : formData.skus" border class="tabNumWidth" size="small">
    <el-table-column align="center" fixed="left" label="图片" min-width="100">
      <template #default="{ row }">
        <UploadImg v-model="row.picUrl" height="80px" width="100%" />
      </template>
    </el-table-column>
+    <template v-if="formData.specType">
+      <!--  根据商品属性动态添加  -->
+      <el-table-column
+        v-for="(item, index) in tableHeaderList"
+        :key="index"
+        :label="item.label"
+        :prop="item.prop"
+        align="center"
+        min-width="120"
+      />
+    </template>
    <el-table-column align="center" label="商品条码" min-width="120">
      <template #default="{ row }">
        <el-input v-model="row.barCode" :min="0" class="w-100%" />
@@ -40,7 +51,7 @@
        <el-input v-model="row.volume" :min="0" class="w-100%" type="number" />
      </template>
    </el-table-column>
-    <template v-if="subCommissionType">
+    <template v-if="formData.subCommissionType">
      <el-table-column align="center" label="一级返佣(分)" min-width="120">
        <template #default="{ row }">
          <el-input v-model="row.subCommissionFirstPrice" :min="0" class="w-100%" type="number" />
@@ -52,35 +63,133 @@
        </template>
      </el-table-column>
    </template>
+    <el-table-column v-if="formData.specType" align="center" fixed="right" label="操作" width="80">
+      <template #default>
+        <el-button v-if="isBatch" link size="small" type="primary">批量添加</el-button>
+        <el-button v-else link size="small" type="primary">删除</el-button>
+      </template>
+    </el-table-column>
  </el-table>
 </template>

 <script lang="ts" name="index" setup>
-import { propTypes } from '@/utils/propTypes'
 import { UploadImg } from '@/components/UploadFile'
 import { PropType } from 'vue'
-import type { SkuType } from '@/api/mall/product/management/type/skuType'
+import { SpuType } from '@/api/mall/product/management/type/spuType'
+import { propTypes } from '@/utils/propTypes'
+import { SkuType } from '@/api/mall/product/management/type/skuType'

 const props = defineProps({
-  skuData: {
-    type: Array as PropType<SkuType>,
+  propFormData: {
+    type: Object as PropType<SpuType>,
+    default: () => {}
+  },
+  attributeList: {
+    type: Array,
    default: () => []
  },
-  subCommissionType: propTypes.bool.def(false) // 分销类型
+  isBatch: propTypes.bool.def(false) // 是否批量操作
 })
-const SkuData = ref<SkuType[]>([])
+const formData = ref<SpuType>() // 表单数据
+// 批量添加时的零时数据
+const SkuData = ref<SkuType[]>([
+  {
+    /**
+     * 商品价格，单位：分
+     */
+    price: 0,
+    /**
+     * 市场价，单位：分
+     */
+    marketPrice: 0,
+    /**
+     * 成本价，单位：分
+     */
+    costPrice: 0,
+    /**
+     * 商品条码
+     */
+    barCode: '',
+    /**
+     * 图片地址
+     */
+    picUrl: '',
+    /**
+     * 库存
+     */
+    stock: 0,
+    /**
+     * 商品重量，单位：kg 千克
+     */
+    weight: 0,
+    /**
+     * 商品体积，单位：m^3 平米
+     */
+    volume: 0
+  }
+])
+const tableHeaderList = ref<{ prop: string; label: string }[]>([])
 /**
 * 将传进来的值赋值给SkuData
 */
 watch(
-  () => props.skuData,
+  () => props.propFormData,
  (data) => {
    if (!data) return
-    SkuData.value = data
+    formData.value = data
  },
  {
    deep: true,
    immediate: true
  }
 )
+/** 监听属性列表生成相关参数和表头 */
+watch(
+  () => props.attributeList,
+  (data) => {
+    // 判断代理对象是否为空
+    if (JSON.stringify(data) === '[]') return
+    // 重置表头
+    tableHeaderList.value = []
+    // 重置表数据
+    formData.value!.skus = []
+    SkuData.value = []
+    // 生成表头
+    data.forEach((item, index) => {
+      // name加属性项index区分属性值
+      tableHeaderList.value.push({ prop: `name${index}`, label: item.name })
+    })
+    generateTableData(data)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+/** 生成表数据 */
+const generateTableData = (data: any[]) => {
+  // const row = {
+  //   price: 0,
+  //   marketPrice: 0,
+  //   costPrice: 0,
+  //   barCode: '',
+  //   picUrl: '',
+  //   stock: 0,
+  //   weight: 0,
+  //   volume: 0
+  // }
+  // 先把所有的属性值取出来
+  const newDataList: any[] = []
+  for (const index in data) {
+    newDataList.push(data[index].values)
+  }
+  console.log(newDataList)
+}
+// const buildRow = (list: any[]) => {
+//   for (const index in data) {
+//     for (const index1 of data[index].values) {
+//       row[`name${index1}`] = data[index].values[index1]
+//     }
+//   }
+// }
 </script>