From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mall/product/spu/form/SkuForm.vue | 194 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 194 insertions(+), 0 deletions(-)
diff --git a/src/views/mall/product/spu/form/SkuForm.vue b/src/views/mall/product/spu/form/SkuForm.vue
new file mode 100644
index 0000000..18cd029
--- /dev/null
+++ b/src/views/mall/product/spu/form/SkuForm.vue
@@ -0,0 +1,194 @@
+<!-- 鍟嗗搧鍙戝竷 - 搴撳瓨浠锋牸 -->
+<template>
+ <el-form
+ ref="formRef"
+ v-loading="formLoading"
+ :disabled="isDetail"
+ :model="formData"
+ :rules="rules"
+ label-width="120px"
+ >
+ <el-form-item label="鍒嗛攢绫诲瀷" prop="subCommissionType">
+ <el-radio-group
+ v-model="formData.subCommissionType"
+ class="w-80"
+ @change="changeSubCommissionType"
+ >
+ <el-radio :value="false">榛樿璁剧疆</el-radio>
+ <el-radio :value="true" class="radio">鍗曠嫭璁剧疆</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="鍟嗗搧瑙勬牸" prop="specType">
+ <el-radio-group v-model="formData.specType" class="w-80" @change="onChangeSpec">
+ <el-radio :value="false" class="radio">鍗曡鏍�</el-radio>
+ <el-radio :value="true">澶氳鏍�</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <!-- 澶氳鏍兼坊鍔�-->
+ <el-form-item v-if="!formData.specType">
+ <SkuList
+ ref="skuListRef"
+ :prop-form-data="formData"
+ :property-list="propertyList"
+ :rule-config="ruleConfig"
+ />
+ </el-form-item>
+ <el-form-item v-if="formData.specType" label="鍟嗗搧灞炴��">
+ <el-button class="mb-10px mr-15px" @click="attributesAddFormRef.open">娣诲姞灞炴��</el-button>
+ <ProductAttributes
+ :is-detail="isDetail"
+ :property-list="propertyList"
+ @success="generateSkus"
+ />
+ </el-form-item>
+ <template v-if="formData.specType && propertyList.length > 0">
+ <el-form-item v-if="!isDetail" label="鎵归噺璁剧疆">
+ <SkuList :is-batch="true" :prop-form-data="formData" :property-list="propertyList" />
+ </el-form-item>
+ <el-form-item label="瑙勬牸鍒楄〃">
+ <SkuList
+ ref="skuListRef"
+ :is-detail="isDetail"
+ :prop-form-data="formData"
+ :property-list="propertyList"
+ :rule-config="ruleConfig"
+ />
+ </el-form-item>
+ </template>
+ </el-form>
+
+ <!-- 鍟嗗搧灞炴�ф坊鍔� Form 琛ㄥ崟 -->
+ <ProductPropertyAddForm ref="attributesAddFormRef" :propertyList="propertyList" />
+</template>
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { copyValueToTarget } from '@/utils'
+import { propTypes } from '@/utils/propTypes'
+import {
+ getPropertyList,
+ PropertyAndValues,
+ RuleConfig,
+ SkuList
+} from '@/views/mall/product/spu/components/index'
+import ProductAttributes from './ProductAttributes.vue'
+import ProductPropertyAddForm from './ProductPropertyAddForm.vue'
+import type { Spu } from '@/api/mall/product/spu'
+
+defineOptions({ name: 'ProductSpuSkuForm' })
+
+// sku 鐩稿叧灞炴�ф牎楠岃鍒�
+const ruleConfig: RuleConfig[] = [
+ {
+ name: 'stock',
+ rule: (arg) => arg >= 0,
+ message: '鍟嗗搧搴撳瓨蹇呴』澶т簬绛変簬 1 锛侊紒锛�'
+ },
+ {
+ name: 'price',
+ rule: (arg) => arg >= 0.01,
+ message: '鍟嗗搧閿�鍞环鏍煎繀椤诲ぇ浜庣瓑浜� 0.01 鍏冿紒锛侊紒'
+ },
+ {
+ name: 'marketPrice',
+ rule: (arg) => arg >= 0.01,
+ message: '鍟嗗搧甯傚満浠锋牸蹇呴』澶т簬绛変簬 0.01 鍏冿紒锛侊紒'
+ },
+ {
+ name: 'costPrice',
+ rule: (arg) => arg >= 0.01,
+ message: '鍟嗗搧鎴愭湰浠锋牸蹇呴』澶т簬绛変簬 0.00 鍏冿紒锛侊紒'
+ }
+]
+
+const message = useMessage() // 娑堟伅寮圭獥
+const formLoading = ref(false)
+const props = defineProps({
+ propFormData: {
+ type: Object as PropType<Spu>,
+ default: () => {}
+ },
+ isDetail: propTypes.bool.def(false) // 鏄惁浣滀负璇︽儏缁勪欢
+})
+const attributesAddFormRef = ref() // 娣诲姞鍟嗗搧灞炴�ц〃鍗�
+const formRef = ref() // 琛ㄥ崟 Ref
+const propertyList = ref<PropertyAndValues[]>([]) // 鍟嗗搧灞炴�у垪琛�
+const skuListRef = ref() // 鍟嗗搧灞炴�у垪琛� Ref
+const formData = reactive<Spu>({
+ specType: false, // 鍟嗗搧瑙勬牸
+ subCommissionType: false, // 鍒嗛攢绫诲瀷
+ skus: []
+})
+const rules = reactive({
+ specType: [required],
+ subCommissionType: [required]
+})
+
+/** 灏嗕紶杩涙潵鐨勫�艰祴鍊肩粰 formData */
+watch(
+ () => props.propFormData,
+ (data) => {
+ if (!data) {
+ return
+ }
+ copyValueToTarget(formData, data)
+ // 灏� SKU 鐨勫睘鎬э紝鏁寸悊鎴� PropertyAndValues 鏁扮粍
+ propertyList.value = getPropertyList(data)
+ },
+ {
+ immediate: true
+ }
+)
+
+/** 琛ㄥ崟鏍￠獙 */
+const emit = defineEmits(['update:activeName'])
+const validate = async () => {
+ if (!formRef) return
+ try {
+ // 鏍￠獙 sku
+ skuListRef.value.validateSku()
+ await unref(formRef).validate()
+ // 鏍￠獙閫氳繃鏇存柊鏁版嵁
+ Object.assign(props.propFormData, formData)
+ } catch (e) {
+ message.error('銆愬簱瀛樹环鏍笺�戜笉瀹屽杽锛岃濉啓鐩稿叧淇℃伅')
+ emit('update:activeName', 'sku')
+ throw e // 鐩殑鎴柇涔嬪悗鐨勬牎楠�
+ }
+}
+defineExpose({ validate })
+
+/** 鍒嗛攢绫诲瀷 */
+const changeSubCommissionType = () => {
+ // 榛樿涓洪浂锛岀被鍨嬪垏鎹㈠悗涔熻閲嶇疆涓洪浂
+ for (const item of formData.skus!) {
+ item.firstBrokeragePrice = 0
+ item.secondBrokeragePrice = 0
+ }
+}
+
+/** 閫夋嫨瑙勬牸 */
+const onChangeSpec = () => {
+ // 閲嶇疆鍟嗗搧灞炴�у垪琛�
+ propertyList.value = []
+ // 閲嶇疆sku鍒楄〃
+ formData.skus = [
+ {
+ price: 0,
+ marketPrice: 0,
+ costPrice: 0,
+ barCode: '',
+ picUrl: '',
+ stock: 0,
+ weight: 0,
+ volume: 0,
+ firstBrokeragePrice: 0,
+ secondBrokeragePrice: 0
+ }
+ ]
+}
+
+/** 璋冪敤 SkuList generateTableData 鏂规硶*/
+const generateSkus = (propertyList: any[]) => {
+ skuListRef.value.generateTableData(propertyList)
+}
+</script>
--
Gitblit v1.8.0