elementui实现复杂表单的实践

简介

文章主要讲述在vue3项目中使用elementui框架实现复杂表单的方式。表单中涉及动态组件的生成、文件上传富文本编辑器的使用,只会将在实现过程中较复杂的部分进行分享,然后提供一份完整的前端代码。

表单效果演示

基础信息

spu属性

sku详情

关键点

动态组件的处理

在spu属性步骤中,CPU型号、操作系统和生物解锁三个属性都是动态生成的。

实现原理

组件动态生成和删除的原理是通过操作v-for组件的数据源实现的。向数据源添加数据会动态生成组件,将数据源的数据减少就会删除对应的组件。

所以在点击添加属性时,只要向v-for的数据源中添加属性配置,就能实现动态生成组件的效果。

组件的类型、可选值都是提前定义的。

分析JD、淘宝等各类商城关于spu属性的展示,可以发现基本可以用自定义、单选和多选属性把所有spu属性覆盖。

因此就可以提前将商品可用的属性按类型和可选值完成定义,在页面选择对应属性添加到页面即可。

动态添加spu属性的代码

只需要重点关注 addSpuItemrmAttr 方法和 v-for="(dynamicSpu, dspuK) in state.auxiliaries.optional.attr.spu.dynamicItems"

<el-form-item label="选择属性">
        <el-select filterable v-model="state.auxiliaries.optional.attr.spu.dynamic"
            style="display: inline-block;width: 198px">
            <el-option label="请选择" :value="0"></el-option>
            <el-option v-for="(spuAttr, spuK) in state.auxiliaries.optional.attr.list" :key="spuK" :label="spuAttr.name"
                :value="spuAttr.attrId"></el-option>
        </el-select>
        <el-divider direction="vertical" border-style="none" />
        <el-button type="primary" @click="addSpuItem">添加规格属性</el-button>
    </el-form-item>
    <el-form-item v-for="(dynamicSpu, dspuK) in state.auxiliaries.optional.attr.spu.dynamicItems" :key="dspuK"
        :label="dynamicSpu.name">
        <el-input v-model="dynamicSpu.selectedValue" v-if="dynamicSpu.type === 'CUSTOM'"
            style="max-width: 40%"></el-input>
        <el-radio-group v-model="dynamicSpu.selectedValue" v-else-if="dynamicSpu.type === 'SINGLE'">
            <el-radio v-for="(dspuAttr, dspuaK) in dynamicSpu.value" :key="dspuaK" :label="dspuAttr">{{ dspuAttr
                }}</el-radio>
        </el-radio-group>
        <el-checkbox-group v-model="dynamicSpu.selectedValue" v-else-if="dynamicSpu.type === 'MULTIPLE'">
            <el-checkbox v-for="(dspumAttr, dspumK) in dynamicSpu.value" :key="dspumK" :label="dspumAttr"
                :value="dspumAttr"></el-checkbox>
        </el-checkbox-group>
        <el-divider direction="vertical"></el-divider>
        <el-button type="danger" @click="rmAttr('spu', dspuK)" size="small">删除</el-button>
    </el-form-item>

向spu数据源添加元素

主要是向 state.auxiliaries.optional.attr.spu.dynamicItems 这个数组中追加元素

// 动态生成SPU条目
const addSpuItem = () => {
    if (state.value.auxiliaries.optional.attr.spu.dynamic === 0) {
        ElMessage.error("请选择一个属性")
        return
    }
    // 已选择的SPU属性
    for (let i = 0; i < state.value.auxiliaries.optional.attr.list.length; i++) {
        if (state.value.auxiliaries.optional.attr.list[i].attrId === state.value.auxiliaries.optional.attr.spu.dynamic) {
            // 利用JSON实现简单对象的深拷贝
            let dynamicItem = JSON.parse(JSON.stringify(state.value.auxiliaries.optional.attr.list[i]))
            dynamicItem.selectedValue = []

            state.value.auxiliaries.optional.attr.spu.dynamicItems.push(dynamicItem)
        }
    }
}

删除动态组件

将对应数据源的元素删除,就可以实现动态删除生成的组件

const rmAttr = (type: string, idx: number) => {
    if (type === "spu") {
        // 删除动态添加的SPU属性
        state.value.auxiliaries.optional.attr.spu.dynamicItems.splice(idx, 1)
        return
    }
    if (type === "sku") {
        state.value.auxiliaries.optional.attr.sku.dynamicItems.splice(idx, 1)
    }
}

文件上传组件的使用

在sku部分有上传组件的使用。

利用elementUI提供的组件实现,相对来说没有什么难度。由于是动态组件,每个上传文件的组件要设置一个单独的参数接收数据,避免出现数据覆盖的情况

    <!-- 商品轮播图 -->
    <el-form-item label="商品轮播图" label-width="120">
        <el-upload v-model:file-list="state.auxiliaries.configs.upload.coversForm[dDetailItemK].covers"
            action="http://localhost:9900/upload/cover" multiple :headers="state.auxiliaries.configs.upload.headers"
            :on-success="handleUploadCoverSuccess" :on-error="handleUploadCoverFailed" method="post"
            list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <el-icon>
                <Plus />
            </el-icon>
        </el-upload>
    </el-form-item>

主要用到了组件的action、headers属性。action设置上传文件的接口、headers设置调用接口时必要的请求头

定义headers

一般项目都是前后端分离的,headers通常设置调用接口的token等身份认证信息。

const state = ref({
    auxiliaries: {
        configs: {
            upload: {
                headers: {
                    Authorization: "Bearer " + Session.get('token')
                },
                coversForm: [] as Array<any>
            }
        }
    }
})

动态使用富文本编辑器

富文本编辑器使用的是tinymce,特点就是轻量、简洁。具体使用教程可以看这里。

动态的富文本编辑器实现原理与上传组件一样,区别就是在获取富文本编辑器中的内容的方式有所不同。

在vue3中富文本编辑器的组件需要设置ref属性,在获取编辑器的内容时需要通过ref获取到编辑器的实例,然后再获取内容

<template>
    <!-- 商详 -->
    <el-form-item v-for="(dynamicSku, dskuK) in state.auxiliaries.optional.attr.sku.dynamicItems"
                                :key="dskuK" label="商品详情" label-width="120">
        <!-- 用tinymce富文本编辑器 -->
        <Editor ref="skuDetailRef" :init="state.auxiliaries.configs.editor.configs" initial-value="Welcome to TinyMCE!">
        </Editor>
    </el-form-item>
</template>
<script setup lang="ts">
import Editor from '@tinymce/tinymce-vue'
</script>

在vue3中当页面有多个Editor实例时,对应ref的值会是数组。

获取多富文本编辑器的内容

<script setup lang="ts">

import {ref} from 'vue'
const skuDetailRef = ref()
const submitForm = () => {
    // 将sku的详情追加到form
    for (let skuIdx = 0; skuIdx < skuDetailRef.value.length; skuIdx++) {
        skuDetailRef.value[skuIdx].getEditor().getContent()
    }
}
</script>

相关的完整代码

运行的依赖有Vue3、element-plus和tinymce

<template>
    <el-row style="margin-top: 20px;">
        <el-col :span="22" :offset="1">
            <el-card>
                <el-steps style="width: 100%" :active="state.auxiliaries.configs.step.active" finish-status="success">
                    <el-step title="基础信息" />
                    <el-step title="设置规格" />
                    <el-step title="设置SKU" />
                </el-steps>
                <el-divider border-style="none"></el-divider>
                <el-form v-model="state.form">
                    <el-tabs v-model="state.auxiliaries.configs.step.stepTabActive" class="demo-tabs"
                        @tab-change="handleTabChange">
                        <el-tab-pane label="基础信息" name="product-base">
                            <el-form-item label="商品名称">
                                <el-input v-model="state.form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="选择品牌">
                                <el-select v-model="state.form.brandId">
                                    <el-option :value=0 label="请选择"></el-option>
                                    <el-option v-for="(brand, bk) in state.auxiliaries.optional.brandList" :key="bk"
                                        :label="brand.label" :value="brand.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所属分类">
                                <el-cascader v-model="state.form.categoryId" clearable
                                    :props="state.auxiliaries.optional.categories.props"
                                    :options="state.auxiliaries.optional.categories.list"></el-cascader>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="nextStep">下一步</el-button>
                            </el-form-item>
                        </el-tab-pane>
                        <el-tab-pane label="设置规格" name="set-spu">
                            <el-form-item label="选择属性">
                                <el-select filterable v-model="state.auxiliaries.optional.attr.spu.dynamic"
                                    style="display: inline-block;width: 198px">
                                    <el-option label="请选择" :value="0"></el-option>
                                    <el-option v-for="(spuAttr, spuK) in state.auxiliaries.optional.attr.list"
                                        :key="spuK" :label="spuAttr.name" :value="spuAttr.attrId"></el-option>
                                </el-select>
                                <el-divider direction="vertical" border-style="none" />
                                <el-button type="primary" @click="addSpuItem">添加规格属性</el-button>
                            </el-form-item>
                            <el-form-item
                                v-for="(dynamicSpu, dspuK) in state.auxiliaries.optional.attr.spu.dynamicItems"
                                :key="dspuK" :label="dynamicSpu.name">
                                <el-input v-model="dynamicSpu.selectedValue" v-if="dynamicSpu.type === 'CUSTOM'"
                                    style="max-width: 40%"></el-input>
                                <el-radio-group v-model="dynamicSpu.selectedValue" v-else-if="dynamicSpu.type === 'SINGLE'">
                                    <el-radio v-for="(dspuAttr, dspuaK) in dynamicSpu.value" :key="dspuaK"
                                        :label="dspuAttr">{{ dspuAttr }}</el-radio>
                                </el-radio-group>
                                <el-checkbox-group v-model="dynamicSpu.selectedValue" v-else-if="dynamicSpu.type === 'MULTIPLE'">
                                    <el-checkbox v-for="(dspumAttr, dspumK) in dynamicSpu.value" :key="dspumK"
                                        :label="dspumAttr" :value="dspumAttr"></el-checkbox>
                                </el-checkbox-group>
                                <el-divider direction="vertical"></el-divider>
                                <el-button type="danger" @click="rmAttr('spu', dspuK)" size="small">删除</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="nextStep">下一步</el-button>
                            </el-form-item>
                        </el-tab-pane>
                        <el-tab-pane label="设置SKU" name="set-sku">
                            <el-form-item label="选择属性">
                                <el-select filterable v-model="state.auxiliaries.optional.attr.sku.dynamic"
                                    style="display: inline-block;width: 198px">
                                    <el-option label="请选择" :value="0"></el-option>
                                    <el-option v-for="(skuAttr, skuK) in state.auxiliaries.optional.attr.list"
                                        :key="skuK" :label="skuAttr.name" :value="skuAttr.attrId"></el-option>
                                </el-select>
                                <el-divider direction="vertical" border-style="none" />
                                <el-button type="primary" @click="addSkuItem">添加规格属性</el-button>
                                <el-divider border-style="none" direction="vertical"></el-divider>
                                <el-button type="success" @click="genSkuItems">生成SKU条目</el-button>
                            </el-form-item>
                            <el-form-item
                                v-for="(dynamicSku, dskuK) in state.auxiliaries.optional.attr.sku.dynamicItems"
                                :key="dskuK" :label="dynamicSku.name">
                                <el-checkbox-group v-model="dynamicSku.selectedValue">
                                    <el-checkbox v-for="(dskumAttr, dskumK) in dynamicSku.value" :key="dskumK"
                                        :label="dskumAttr" :value="dskumAttr"></el-checkbox>
                                </el-checkbox-group>
                                <el-divider direction="vertical"></el-divider>
                                <el-button type="danger" @click="rmAttr('sku', dskuK)" size="small">删除</el-button>
                            </el-form-item>
                            <el-form-item v-if="state.auxiliaries.optional.attr.sku.dynamicDetailItems.length > 0">
                                <el-divider content-position="left">设置具体的SKU信息</el-divider>
                                <el-button-group style="margin-bottom: 15px">
                                    <el-button type="primary" @click="initSkuInfo('title')">初始化标题</el-button>
                                    <el-button type="primary" @click="initSkuInfo('summary')">初始化简介</el-button>
                                    <el-button type="primary" @click="initSkuInfo('stock')">初始化库存</el-button>
                                    <el-button type="primary" @click="initSkuInfo('price')">初始化价格</el-button>
                                </el-button-group>
                                <!-- 用折叠面板显示各种SKU的数据 -->
                                <el-collapse style="width: 100%"
                                    v-model="state.auxiliaries.optional.attr.sku.dynamicDetailCollapaseActiveNames">
                                    <el-collapse-item :title="genCollapseTitle(dDetailItemV)"
                                        :name="genCollapseTitle(dDetailItemV)"
                                        v-for="(dDetailItemV, dDetailItemK) in state.auxiliaries.optional.attr.sku.dynamicDetailItems"
                                        :key="dDetailItemK">
                                        <!-- 销售标题 -->
                                        <el-form-item label="销售标题" label-width="120">
                                            <el-input v-model="state.form.skuDetails[dDetailItemK].title"></el-input>
                                        </el-form-item>
                                        <el-divider border-style="none"></el-divider>
                                        <el-form-item label="SKU简介" label-width="120">
                                            <el-input v-model="state.form.skuDetails[dDetailItemK].summary"></el-input>
                                        </el-form-item>
                                        <el-divider border-style="none"></el-divider>
                                        <!-- 商品轮播图 -->
                                        <el-form-item label="商品轮播图" label-width="120">
                                            <el-upload
                                                v-model:file-list="state.auxiliaries.configs.upload.coversForm[dDetailItemK].covers"
                                                action="http://localhost:9900/upload/cover" multiple
                                                :headers="state.auxiliaries.configs.upload.headers"
                                                :on-success="handleUploadCoverSuccess"
                                                :on-error="handleUploadCoverFailed" method="post"
                                                list-type="picture-card" :on-preview="handlePictureCardPreview"
                                                :on-remove="handleRemove">
                                                <el-icon>
                                                    <Plus />
                                                </el-icon>
                                            </el-upload>
                                        </el-form-item>
                                        <el-divider border-style="none"></el-divider>
                                        <!-- 价格 -->
                                        <el-form-item label="价格" label-width="120">
                                            <el-input type="number"
                                                v-model="state.form.skuDetails[dDetailItemK].price"></el-input>
                                        </el-form-item>
                                        <el-divider border-style="none"></el-divider>
                                        <!-- 库存 -->
                                        <el-form-item label="库存" label-width="120">
                                            <el-input type="number"
                                                v-model="state.form.skuDetails[dDetailItemK].stock"></el-input>
                                        </el-form-item>
                                        <el-divider border-style="none"></el-divider>
                                        <!-- 商详 -->
                                        <el-form-item label="商品详情" label-width="120">
                                            <!-- 用tinymce富文本编辑器 -->
                                            <Editor ref="skuDetailRef" :init="state.auxiliaries.configs.editor.configs"
                                                initial-value="Welcome to TinyMCE!">
                                            </Editor>
                                        </el-form-item>
                                        <el-divider border-style="none"></el-divider>
                                    </el-collapse-item>
                                </el-collapse>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm">提交</el-button>
                                <el-button>重置</el-button>
                            </el-form-item>
                        </el-tab-pane>
                    </el-tabs>

                </el-form>
                <el-dialog v-model="state.auxiliaries.optional.attr.sku.imgDialog.visiable">
                    <img w-full :src="state.auxiliaries.optional.attr.sku.imgDialog.url" alt="Preview Image" />
                </el-dialog>
            </el-card>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import Editor from '@tinymce/tinymce-vue'
import { Session } from '/@/utils/storage';
import { UploadAjaxError } from 'element-plus/es/components/upload/src/ajax'
import { useFiletApi } from '/@/api/file'


const skuDetailRef = ref()
const fileApi = useFiletApi()

const state = ref({
    form: {
        id: null,
        name: "",
        brandId: 0,
        categoryId: [],
        spu: [] as ProductAttrType[],
        sku: [] as ProductAttrType[],
        skuDetails: [] as ProductSkuFormType[],
    } as ProductFormType,
    rawForm: {
        id: null,
        name: "",
        brandId: 0,
        categoryId: [],
        spu: [] as ProductAttrType[],
        sku: [] as ProductAttrType[],
        skuDetails: [] as ProductSkuFormType[]
    } as ProductFormType,
    auxiliaries: {
        configs: {
            step: {
                active: 1, // 步骤条
                stepTab: [
                    { name: "product-base", step: 1 },
                    { name: "set-spu", step: 2 },
                    { name: "set-sku", step: 3 },
                ],
                stepTabActive: "product-base",
            },
            editor: {
                configs: {
                    width: '100%',
                    resize: 'both',
                    min_height: 300,
                    plugins: "image fullscreen",
                    // 实现上传逻辑
                    images_upload_handler: async (blobInfo: any, success: any) => {
                        console.log("upload image ", blobInfo, success)
                        const formData = new FormData();
                        formData.append('file', blobInfo.blob());
                        // 上传
                        const uploadRs = await uploadImg(formData)
                        // success("https://cdn3-banquan.ituchong.com/weili/image/l/1517224685217251339.jpeg")
                        success(uploadRs.data)
                    }
                }
            },
            upload: {
                headers: {
                    Authorization: "Bearer " + Session.get('token')
                },
                coversForm: [] as Array<any>
            }
        },
        optional: {
            brandList: [
                { label: "华为", value: 1 }, { label: "苹果", value: 2 },
            ],
            categories: {
                list: [
                    {
                        label: "手机品类", value: 1, children: [
                            { label: "手机", value: 3 },
                            { label: "手机配件", value: 4 }
                        ]
                    },
                    {
                        label: "电脑", value: 2, children: [
                            { label: "电脑配件", value: 5 },
                            {
                                label: "外设产品", value: 6, children: [
                                    { label: "鼠标", value: 7 },
                                    { label: "键盘", value: 8 }
                                ]
                            }
                        ]
                    }
                ],
                props: {
                    expandTrigger: 'hover' as const
                }
            },
            attr: {
                list: [
                    { attrId: 1, name: "颜色", value: ["雅川青", "雅丹黑", "南糯紫", "白沙银", "red"], type: "SINGLE" },
                    { attrId: 2, name: "版本", value: ["12GB+512GB", "12GB+1TB", "16GB+1TB"], type: "SINGLE" },
                    { attrId: 3, name: "CPU型号", value: [], type: "CUSTOM" },
                    { attrId: 4, name: "操作系统", value: ["HarmonyOS", "IOS", "Android"], type: "SINGLE" },
                    { attrId: 5, name: "生物解锁", value: ["指纹", "面部", "视网膜"], type: "MULTIPLE" },
                ],
                spu: {
                    dynamic: 0, // 动态选择的SPU属性组
                    dynamicItems: [] as any[], // 动态选择并生成的SPU属性表单项
                },
                sku: {
                    dynamic: 0, // 动态选择的SPU属性组
                    dynamicItems: [] as any[], // 动态选择并生成的SPU属性表单项
                    dynamicDetailItems: [] as any[], // 根据选择的SKU属性排列组合生成的SKU具体条目
                    dynamicDetailCollapaseActiveNames: [], // 激活状态的折叠面板
                    imgDialog: {
                        visiable: false,
                        url: ""
                    }
                }
            }
        }
    }
})

const nextStep = () => {
    state.value.auxiliaries.configs.step.stepTabActive = state.value.auxiliaries.configs.step.stepTab[state.value.auxiliaries.configs.step.active].name
    state.value.auxiliaries.configs.step.active += 1
}

const handleTabChange = (currentTabName: string) => {
    for (let i = 0; i < state.value.auxiliaries.configs.step.stepTab.length; i++) {
        if (state.value.auxiliaries.configs.step.stepTab[i].name === currentTabName) {
            state.value.auxiliaries.configs.step.active = state.value.auxiliaries.configs.step.stepTab[i].step
        }
    }
}
// 动态生成SPU条目
const addSpuItem = () => {
    if (state.value.auxiliaries.optional.attr.spu.dynamic === 0) {
        ElMessage.error("请选择一个属性")
        return
    }
    // 已选择的SPU属性
    for (let i = 0; i < state.value.auxiliaries.optional.attr.list.length; i++) {
        if (state.value.auxiliaries.optional.attr.list[i].attrId === state.value.auxiliaries.optional.attr.spu.dynamic) {
            let dynamicItem = JSON.parse(JSON.stringify(state.value.auxiliaries.optional.attr.list[i]))
            dynamicItem.selectedValue = []

            state.value.auxiliaries.optional.attr.spu.dynamicItems.push(dynamicItem)
        }
    }
}

const rmAttr = (type: string, idx: number) => {
    if (type === "spu") {
        // 删除动态添加的SPU属性
        state.value.auxiliaries.optional.attr.spu.dynamicItems.splice(idx, 1)
        return
    }
    if (type === "sku") {
        state.value.auxiliaries.optional.attr.sku.dynamicItems.splice(idx, 1)
    }
}

// 动态生成SKU条目
const addSkuItem = () => {
    if (state.value.auxiliaries.optional.attr.sku.dynamic === 0) {
        ElMessage.error("请选择一个属性")
        return
    }
    // 已选择的sku属性
    for (let i = 0; i < state.value.auxiliaries.optional.attr.list.length; i++) {
        if (state.value.auxiliaries.optional.attr.list[i].attrId === state.value.auxiliaries.optional.attr.sku.dynamic) {
            let dynamicItem = JSON.parse(JSON.stringify(state.value.auxiliaries.optional.attr.list[i]))
            // SKU的值全部多选,然后做排列组合
            dynamicItem.selectedValue = []

            state.value.auxiliaries.optional.attr.sku.dynamicItems.push(dynamicItem)
        }
    }
}

// 根据选择的SKU属性值,按排列组合生成SKU条目
// 递归比较适合处理这种问题
const genSkuItems = () => {
    // 清空已有的SKU信息
    state.value.form.skuDetails = [] as ProductSkuFormType[]
    state.value.auxiliaries.configs.upload.coversForm = [] as any[]
    // 获取所有SKU属性和选择的值
    const skus = state.value.auxiliaries.optional.attr.sku.dynamicItems
    // 遍历属性数
    let tempSkuItems = [] // 排列组合临时状态
    for (let i = 0; i < skus.length; i++) {
        // 遍历属性选择的值
        if (tempSkuItems.length <= 0) {
            for (let j = 0; j < skus[i].selectedValue.length; j++) {
                tempSkuItems.push([{
                    attrId: skus[i].attrId,
                    name: skus[i].name,
                    selectedValue: [skus[i].selectedValue[j]]
                }])
            }
        } else {
            let iterTempSkuItems = []
            for (let j = 0; j < skus[i].selectedValue.length; j++) {
                // 判断临时组合是否存在
                for (let k = 0; k < tempSkuItems.length; k++) {
                    let iterTempSkuItem = JSON.parse(JSON.stringify(tempSkuItems[k]))
                    iterTempSkuItem.push({
                        attrId: skus[i].attrId,
                        name: skus[i].name,
                        selectedValue: [skus[i].selectedValue[j]]
                    })
                    iterTempSkuItems.push(iterTempSkuItem)
                }
            }
            // 让最终的排列组合临时变量接管,遍历中的临时变量
            tempSkuItems = JSON.parse(JSON.stringify(iterTempSkuItems))
        }
    }
    // 为表单的SKU生成对应数量的SKU表单字段
    console.log("covers form ", state.value.auxiliaries.configs.upload.coversForm)
    for (let k = 0; k < tempSkuItems.length; k++) {
        state.value.form.skuDetails.push({
            id: null,
            sku: JSON.parse(JSON.stringify(tempSkuItems[k])),
            title: "",
            summary: "",
            price: 0,
            stock: 0,
            covers: [],
            detail: ""
        })
        state.value.auxiliaries.configs.upload.coversForm.push({
            covers: []
        })
    }

    state.value.auxiliaries.optional.attr.sku.dynamicDetailItems = JSON.parse(JSON.stringify(tempSkuItems))
    console.log("covers form ", state.value.auxiliaries.configs.upload.coversForm)
    console.log("sku detail form ", state.value.form.skuDetails)
}

const initSkuInfo = (type: string) => {
    // 用确认框的方式进行交互
    let msgBoxTitle = ""
    switch (type) {
        case "title":
            msgBoxTitle = "初始化销售标题"
            break
        case "summary":
            msgBoxTitle = "初始化SKU简介"
            break
        case "stock":
            msgBoxTitle = "初始化库存"
            break
        case "price":
            msgBoxTitle = "初始化价格"
            break
        default:
            msgBoxTitle = "-"
    }
    ElMessageBox.prompt(msgBoxTitle, '初始化sku数据', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
    })
        .then(({ value }) => {
            // 将sku的对应信息初始化
            if (type === 'title') {
                initTitle(value)
                return
            }
            if (type === 'summary') {
                initSummary(value)
                return
            }
            if (type === 'stock') {
                initStock(parseInt(value))
                return
            }
            if (type === 'price') {
                initPrice(parseFloat(value))
                return
            }
        })
}
// 初始化sku的销售标题
const initTitle = (titlePrefix: string) => {
    // 自定义的标题加设置的sku属性名
    for (let i = 0; i < state.value.form.skuDetails.length; i++) {
        let skuTitle = ""
        for (let j = 0; j < state.value.form.skuDetails[i].sku.length; j++) {
            skuTitle += " " + state.value.form.skuDetails[i].sku[j].selectedValue.join("")
        }
        state.value.form.skuDetails[i].title = titlePrefix + skuTitle
    }
}

const initSummary = (summary: string) => {
    for (let i = 0; i < state.value.form.skuDetails.length; i++) {
        state.value.form.skuDetails[i].summary = summary
    }
}

const initStock = (stock: number) => {
    for (let i = 0; i < state.value.form.skuDetails.length; i++) {
        state.value.form.skuDetails[i].stock = stock
    }
}

const initPrice = (price: number) => {
    for (let i = 0; i < state.value.form.skuDetails.length; i++) {
        state.value.form.skuDetails[i].price = price
    }
}

const uploadImg = (uploadForm: FormData) => {
    console.log("调用上传文件的接口", uploadForm.get('rawFilename'))
    return fileApi.uploadCover(uploadForm)
}

const handleUploadCoverSuccess = (response: any) => {
    console.log("upload success ", response)
}

const handleUploadCoverFailed = (error: UploadAjaxError) => {
    let rs = JSON.parse(error.message)
    ElMessage.error(rs.msg)
}

const genCollapseTitle = (tempSkuItems: Array<any>): string => {
    let tempTitle = ""
    for (let n = 0; n < tempSkuItems.length; n++) {
        tempTitle += " " + tempSkuItems[n].selectedValue[0]
    }
    return tempTitle
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    state.value.auxiliaries.optional.attr.sku.imgDialog.url = uploadFile.url!
    state.value.auxiliaries.optional.attr.sku.imgDialog.visiable = true
}

const submitForm = () => {
    console.log("upload covers: ", state.value.auxiliaries.configs.upload.coversForm)
    // 从临时保存轮播图数据的变量中提取轮播图的url
    // 遍历sku
    for (let i = 0; i < state.value.auxiliaries.configs.upload.coversForm.length; i++) {
        // 遍历sku的轮播图
        let skuCovers = []
        for (let j = 0; j < state.value.auxiliaries.configs.upload.coversForm[i].covers.length; j++) {
            // 提取轮播图url
            let coverRs = JSON.parse(JSON.stringify(state.value.auxiliaries.configs.upload.coversForm[i].covers[j].response))
            skuCovers.push(coverRs.data)
        }
        // 赋值到对应的sku的covers
        state.value.form.skuDetails[i].covers = JSON.parse(JSON.stringify(skuCovers))
    }
    // 将sku的详情追加到form
    for (let skuIdx = 0; skuIdx < skuDetailRef.value.length; skuIdx++) {
        state.value.form.skuDetails[skuIdx].detail = skuDetailRef.value[skuIdx].getEditor().getContent()
    }
    // 将sku选择的值追加到form
    state.value.form.sku = JSON.parse(JSON.stringify(state.value.auxiliaries.optional.attr.sku.dynamicItems))
    // 将SPU选择的值追加到form
    state.value.form.spu = JSON.parse(JSON.stringify(state.value.auxiliaries.optional.attr.spu.dynamicItems))
    // 特殊处理spu的值,值都认为是多选的
    for (let b = 0; b < state.value.form.spu.length; b++) {
        if (!(state.value.form.spu[b].selectedValue instanceof Object)) {
            state.value.form.spu[b].selectedValue = [state.value.form.spu[b].selectedValue]
        }
    }

    console.log("submit form: ", state.value.form)
    afterSubmit()
}

const afterSubmit = () => {
    // 重置表单
    state.value.form = JSON.parse(JSON.stringify(state.value.rawForm))
    // 重置sku、spu的动态数据
    state.value.auxiliaries.optional.attr.sku.dynamicItems = []
    state.value.auxiliaries.optional.attr.sku.dynamicDetailItems = []
    state.value.auxiliaries.optional.attr.spu.dynamicItems = []
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/791681.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【机器学习】初学者经典案例(随记)

&#x1f388;边走、边悟&#x1f388;迟早会好 一、概念 机器学习是一种利用数据来改进模型性能的计算方法&#xff0c;属于人工智能的一个分支。它旨在让计算机系统通过经验自动改进&#xff0c;而不需要明确编程。 类型 监督学习&#xff1a;使用带标签的数据进行训练&…

【游戏客户端】大话slg玩法架构(二)背景地图

【游戏客户端】大话slg玩法架构&#xff08;二&#xff09;背景地图 大家好&#xff0c;我是Lampard家杰~~ 今天我们继续给大家分享SLG玩法的实现架构&#xff0c;关于SLG玩法的介绍可以参考这篇上一篇文章&#xff1a;【游戏客户端】制作率土之滨Like玩法 PS&#xff1a;和之前…

仕考网:公务员如何备考申论

在备战公务员考试的申论部分时&#xff0c;掌握一定的技巧&#xff0c;遵循特定的步骤是至关重要的。以下是一些备考策略&#xff0c;希望能帮助到大家&#xff1a; 1. 掌握考试大纲和命题趋势 在考试大纲中明确了题目的类型和可能涉及的主题范围&#xff0c;考生可以聚焦到关…

批量提取Word文档中表格内容

1 背景 有一个word文件&#xff0c;其中包含多个格式一致的表格&#xff08;如下图&#xff09;&#xff0c;需要将其内容进行提取&#xff0c;填写到excel中 2 实现代码 ## 导入工具包 from docx import Document import pandas as pd## 读取 Word 文件 document Document(…

MySQL实现数据备份的方式可以基于哪几种?

MySQL 数据库实现数据备份的方式主要有以下几种&#xff1a; 物理备份 (Physical Backup)&#xff1a; 冷备份 (Cold Backup)&#xff1a;在数据库关闭的情况下&#xff0c;直接复制数据库文件&#xff08;数据文件、日志文件等&#xff09;。这种方式操作简单&#xff0c;但是…

UML类图的建立过程

1. 概念层类图 概念层的类图描述的是现实世界中对问题领域的概念理解&#xff0c;类图中表达的类与现实世界的问题领域中的实际事物有着明显的对应关系&#xff0c;类之间的关系也与问题领域中实际事物之间的关系有着明显的对应关系。在概念层类图阶段很少考虑或者几乎不需要考…

应急响应-ELK日志分析系统

&#x1f3bc;个人主页&#xff1a;金灰 &#x1f60e;作者简介:一名简单的大一学生;易编橙终身成长社群的嘉宾.✨ 专注网络空间安全服务,期待与您的交流分享~ 感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持&#xff01;❤️ &#x1f34a;易编橙终身成长社群&#…

3、视图和模板

续上一篇&#xff0c;这一篇 着重于创建公共接口——“视图” 第三部分——3、视图和模板 1、概述2、编写更多视图原理——django依次访问了什么文件 3、写一个真正有用的视图一个快捷函数 render() render——渲染 4、抛出404错误一个快捷函数 get_object_or_404() 5、使用模…

kvm图形化管理工具virt-manager安装

1、Virt-manager简介 Virt-manager是一个桌面用户界面&#xff0c;用于通过libvirt管理虚拟机。它主要针对KVM虚拟机&#xff0c;但也管理Xen和LXC&#xff08;linux容器&#xff09;。它提供了运行域、它们的实时性能和资源利用率统计信息的摘要视图。向导可以创建新域&#…

MFC扩展库BCGControlBar Pro v35.0 - 可视化管理主题等全新升级

BCGControlBar库拥有500多个经过全面设计、测试和充分记录的MFC扩展类。 我们的组件可以轻松地集成到您的应用程序中&#xff0c;并为您节省数百个开发和调试时间。 BCGControlBar专业版 v35.0已全新发布了&#xff0c;这个版本改进类Visual Studio 2022的视觉主题、增强对多个…

camera-qsc-crosstalk校准数据XTALK回写

问题背景 手机越做越紧凑&#xff0c;需要模组和芯片尺寸越做越小&#xff0c;在尺寸一定的基础上&#xff0c;高像素和大像素&#xff0c;对于手机摄像头来说&#xff0c;一直是一对矛盾的存在。 高像素&#xff1a;带来高分辨率画质大像素&#xff1a;带来暗态下高感光度和…

【MyBatis】——入门基础知识必会内容

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…

Covalent Network(CXT)通过社区投票将代币迁移并更名为 CXT,以推动人工智能更深层次的创新

专注于人工智能和 Web3 的模块化数据基础设施 Covalent Network&#xff08;CXT&#xff09;宣布&#xff0c;其治理提案已通过社区投票并顺利实施&#xff0c;即将原生代币 CQT 迁移为新的 CXT 代币&#xff0c;并部署至新的合约。这一关键性转变标志着 Covalent Network&…

Android焦点之InputWindows的更新(一)

找到焦点窗口后&#xff0c;回到DisplayContent的updateFocusedWindowLocked方法中继续往下走 执行到此处会进行InputWindows的更新 InputMonitor#setInputFocusLw&#xff1a;以上过程伴随日志&#xff1a;WindowManager: Input focus has changed to Window{a44139a u0 Noti…

linux系统中SPI驱动框架以及代码的详解

大家好,今天给大家分享一下,如何使用SPI子系统,详细实现以及具体的操作方法。 第一:SPI驱动框架模板 参考内核头文件:include\linux\spi\spi.h。 1、SPI平台总线设备驱动模型 Linux驱动程序开始基于“平台总线设备驱动模型”,将驱动程序分为两块: * 左边注册一个platfo…

算法力扣刷题记录 四十一【N叉树遍历】

前言 依然是遍历问题。由二叉树扩展到N叉树遍历。 记录 四十一【N叉树遍历】 一、【589. N叉树的前序遍历】 题目 给定一个 n 叉树的根节点 root &#xff0c;返回 其节点值的 前序遍历 。 n 叉树 在输入中按层序遍历进行序列化表示&#xff0c;每组子节点由空值 null 分隔…

FLinkCDC引起的生产事故(二)

背景&#xff1a; 最近在做实时数据的抽取工作&#xff0c;利用FLinkCDC实时抽取目标库Oracle的数据到Doris中&#xff0c;但是在抽取的过程中&#xff0c;会导致目标库的生产库数据库非常卡顿&#xff0c;为了避免对生产环境的数据库造成影响&#xff0c;对生产环境的数据库利…

Android 自定义Edittext 和TextView 提示文字和填入内容不同的粗细组件

近期项目中又EditText 以及TextView 这两个组件需要用到提示文字 以及 填入文字要保持不同的粗细程度,所以记录一下 首先 是EditText 组件的自定义 BLEditText 继承的这个组件是一个三方的组件,可以在很大程度上减少drawable的编写,有兴趣的可以去相关的Git去看一下 点击查看,…

Redis 主从复制,集群与高可用

虽然Redis可以实现单机的数据持久化&#xff0c;但无论是RDB也好或者AOF也好&#xff0c;都解决不了单点宕机问题&#xff0c;即一旦单台 redis服务器本身出现系统故障、硬件故障等问题后&#xff0c;就会直接造成数据的丢失 此外,单机的性能也是有极限的,因此需要使用另外的技…

合合信息大模型加速器亮相WAIC大会:文档解析与文本识别新突破

合合信息大模型加速器亮相WAIC大会&#xff1a;文档解析与文本识别新突破 文章目录 合合信息大模型加速器亮相WAIC大会&#xff1a;文档解析与文本识别新突破前言合合信息TextIn平台&#xff1a;智能文档处理的领军者文档解析引擎&#xff1a;百页文档秒级处理大模型的发展背景…