1906 lines
63 KiB
Vue
1906 lines
63 KiB
Vue
<template>
|
||
<div>
|
||
<div class="content-goods-publish">
|
||
<Form
|
||
ref="baseInfoForm"
|
||
:model="baseInfoForm"
|
||
:label-width="120"
|
||
:rules="baseInfoFormRule"
|
||
>
|
||
<div class="base-info-item">
|
||
<h4>基本信息</h4>
|
||
<div class="form-item-view">
|
||
<FormItem label="商品分类">
|
||
<span class="goods-category-name">{{
|
||
this.baseInfoForm.categoryName[0]
|
||
}}</span>
|
||
<span> > {{ this.baseInfoForm.categoryName[1] }}</span>
|
||
<span> > {{ this.baseInfoForm.categoryName[2] }}</span>
|
||
</FormItem>
|
||
<FormItem label="商品名称" prop="goodsName">
|
||
<Input
|
||
type="text"
|
||
v-model="baseInfoForm.goodsName"
|
||
placeholder="商品名称"
|
||
clearable
|
||
style="width: 260px"
|
||
/>
|
||
</FormItem>
|
||
|
||
<FormItem label="商品价格" prop="price">
|
||
<Input
|
||
type="text"
|
||
v-model="baseInfoForm.price"
|
||
placeholder="商品价格"
|
||
clearable
|
||
style="width: 260px"
|
||
/>
|
||
</FormItem>
|
||
<FormItem label="商品卖点" prop="sellingPoint">
|
||
<Input
|
||
v-model="baseInfoForm.sellingPoint"
|
||
type="textarea"
|
||
:rows="4"
|
||
style="width: 260px"
|
||
/>
|
||
</FormItem>
|
||
<FormItem label="商品品牌" prop="brandId">
|
||
<Select
|
||
v-model="baseInfoForm.brandId"
|
||
filterable
|
||
style="width: 200px"
|
||
>
|
||
<Option
|
||
v-for="item in brandList"
|
||
:value="item.id"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
></Option>
|
||
</Select>
|
||
</FormItem>
|
||
</div>
|
||
<h4>商品交易信息</h4>
|
||
<div class="form-item-view">
|
||
<FormItem
|
||
class="form-item-view-el"
|
||
label="计量单位"
|
||
prop="goodsUnit"
|
||
>
|
||
<Select v-model="baseInfoForm.goodsUnit" style="width: 100px">
|
||
<Scroll :on-reach-bottom="handleReachBottom">
|
||
<Option
|
||
v-for="(item, index) in goodsUnitList"
|
||
:key="index"
|
||
:value="item"
|
||
>{{ item }}
|
||
</Option>
|
||
</Scroll>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem
|
||
class="form-item-view-el"
|
||
label="销售模式"
|
||
prop="salesModel"
|
||
>
|
||
<RadioGroup
|
||
type="button"
|
||
v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'"
|
||
button-style="solid"
|
||
@on-change="renderTableData(skuTableData)"
|
||
v-model="baseInfoForm.salesModel"
|
||
>
|
||
<Radio title="零售型" label="RETAIL">零售型</Radio>
|
||
<Radio title="批发型" label="WHOLESALE">批发型</Radio>
|
||
</RadioGroup>
|
||
<RadioGroup
|
||
type="button"
|
||
v-else
|
||
button-style="solid"
|
||
v-model="baseInfoForm.salesModel"
|
||
>
|
||
<Radio title="零售型" label="RETAIL">
|
||
<span>虚拟型</span>
|
||
</Radio>
|
||
</RadioGroup>
|
||
</FormItem>
|
||
<FormItem
|
||
class="form-item-view-el"
|
||
label="销售规则"
|
||
prop="wholesaleRule"
|
||
v-if="baseInfoForm.salesModel == 'WHOLESALE'"
|
||
>
|
||
<div class="form-item-view-wholesale">
|
||
<div>
|
||
<Table
|
||
border
|
||
:columns="wholesaleColumns"
|
||
:data="wholesaleData"
|
||
>
|
||
<template slot-scope="{ row, index }" slot="wholesaleNum">
|
||
<div>
|
||
<Input
|
||
v-model="wholesaleData[index].num"
|
||
type="number"
|
||
min="1"
|
||
number
|
||
@on-blur="checkWholesaleNum(index)"
|
||
>
|
||
<span slot="append">{{
|
||
baseInfoForm.goodsUnit || ""
|
||
}}</span>
|
||
</Input>
|
||
</div>
|
||
</template>
|
||
<template slot-scope="{ row, index }" slot="wholesalePrice">
|
||
<div
|
||
style="
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<Input
|
||
v-model="wholesaleData[index].price"
|
||
type="number"
|
||
number
|
||
style="width: 190px"
|
||
min="1"
|
||
@on-blur="checkWholesalePrice(index)"
|
||
>
|
||
<span slot="append">元</span>
|
||
</Input>
|
||
<Button
|
||
type="error"
|
||
size="small"
|
||
style="margin-left: 5px"
|
||
v-if="index > 0"
|
||
@click="handleDeleteWholesaleData(index)"
|
||
>删除</Button
|
||
>
|
||
</div>
|
||
</template>
|
||
</Table>
|
||
|
||
<Button
|
||
v-if="wholesaleData.length < 3"
|
||
style="margin-top: 10px"
|
||
icon="md-add"
|
||
@click="handleAddWholesaleData()"
|
||
>
|
||
添加价格区间
|
||
</Button>
|
||
</div>
|
||
<div class="form-item-view-wholesale-preview">
|
||
<Table
|
||
border
|
||
:columns="wholesalePreviewColumns"
|
||
:data="wholesaleData"
|
||
></Table>
|
||
</div>
|
||
</div>
|
||
</FormItem>
|
||
</div>
|
||
<h4>商品规格及图片</h4>
|
||
<div class="form-item-view">
|
||
<FormItem
|
||
class="form-item-view-el required"
|
||
label="商品图片"
|
||
prop="goodsGalleryFiles"
|
||
>
|
||
<div style="display: flex; flex-wrap: flex-start">
|
||
<vuedraggable
|
||
:list="baseInfoForm.goodsGalleryFiles"
|
||
:animation="200"
|
||
>
|
||
<div
|
||
class="demo-upload-list"
|
||
v-for="(item, __index) in baseInfoForm.goodsGalleryFiles"
|
||
:key="__index"
|
||
>
|
||
<template>
|
||
<img :src="item.url" />
|
||
<div class="demo-upload-list-cover">
|
||
<div>
|
||
<Icon
|
||
type="md-search"
|
||
size="30"
|
||
@click.native="handleViewGoodsPicture(item.url)"
|
||
></Icon>
|
||
<Icon
|
||
type="md-trash"
|
||
size="30"
|
||
@click.native="handleRemoveGoodsPicture(item)"
|
||
></Icon>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</vuedraggable>
|
||
|
||
<Upload
|
||
ref="upload"
|
||
:show-upload-list="false"
|
||
:on-success="handleSuccessGoodsPicture"
|
||
:format="['jpg', 'jpeg', 'png']"
|
||
:on-format-error="handleFormatError"
|
||
:on-exceeded-size="handleMaxSize"
|
||
:max-size="1024"
|
||
:before-upload="handleBeforeUploadGoodsPicture"
|
||
multiple
|
||
type="drag"
|
||
:action="uploadFileUrl"
|
||
:headers="{ ...accessToken }"
|
||
style="margin-left: 10px"
|
||
>
|
||
<div style="width: 148px; height: 148px; line-height: 148px">
|
||
<Icon type="md-add" size="20"></Icon>
|
||
</div>
|
||
</Upload>
|
||
</div>
|
||
<Modal title="View Image" v-model="goodsPictureVisible">
|
||
<img
|
||
:src="previewGoodsPicture"
|
||
v-if="goodsPictureVisible"
|
||
style="width: 100%"
|
||
/>
|
||
</Modal>
|
||
</FormItem>
|
||
<div class="layout" style="width: 100%">
|
||
<Collapse v-model="open_panel">
|
||
<Panel name="1">
|
||
自定义规格项
|
||
<div slot="content">
|
||
<Form>
|
||
<div
|
||
v-for="(item, $index) in skuInfo"
|
||
:key="$index"
|
||
class="sku-item-content"
|
||
>
|
||
<Card :bordered="true" class="ivu-card-body">
|
||
<Button
|
||
type="primary"
|
||
slot="extra"
|
||
@click="handleCloseSkuItem($index, item)"
|
||
>
|
||
删除规格
|
||
</Button>
|
||
<div>
|
||
<FormItem
|
||
label="规格名"
|
||
class="sku-item-content-val flex"
|
||
>
|
||
<AutoComplete
|
||
style="width: 150px"
|
||
v-model="item.name"
|
||
:maxlength="30"
|
||
placeholder="请输入规格名称"
|
||
:filter-method="filterMethod"
|
||
:data="skuData"
|
||
@on-change="editSkuItem"
|
||
>
|
||
</AutoComplete>
|
||
</FormItem>
|
||
</div>
|
||
<div class="flex sku-val">
|
||
<Form :model="item" class="flex">
|
||
<!--规格值文本列表-->
|
||
<FormItem
|
||
v-for="(val, index) in item.spec_values"
|
||
:key="index"
|
||
class="sku-item-content-val flex"
|
||
label="规格项"
|
||
:prop="'spec_values.' + index + '.value'"
|
||
:rules="[regular.REQUIRED, regular.VARCHAR60]"
|
||
>
|
||
<AutoComplete
|
||
v-model="val.value"
|
||
style="width: 150px"
|
||
:maxlength="30"
|
||
placeholder="请输入规格项"
|
||
:filter-method="filterMethod"
|
||
:data="skuVal"
|
||
@on-focus="changeSkuVals(item.name)"
|
||
@on-change="
|
||
skuValueChange(val.value, index, item)
|
||
"
|
||
>
|
||
</AutoComplete>
|
||
<Button
|
||
type="primary"
|
||
size="small"
|
||
style="margin-left: 10px"
|
||
@click="handleCloseSkuValue(val, index)"
|
||
>
|
||
删除
|
||
</Button>
|
||
</FormItem>
|
||
</Form>
|
||
</div>
|
||
<div>
|
||
<Button @click="addSpec($index, item)"
|
||
>添加规格值</Button
|
||
>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</Form>
|
||
<Button
|
||
class="add-sku-btn"
|
||
type="primary"
|
||
size="small"
|
||
@click="addSkuItem"
|
||
>添加规格项</Button
|
||
>
|
||
|
||
<Button
|
||
class="add-sku-btn"
|
||
type="warning"
|
||
size="small"
|
||
@click="handleClearSku"
|
||
>清空规格项</Button
|
||
>
|
||
</div>
|
||
</Panel>
|
||
<Panel name="2">
|
||
规格详细
|
||
<div slot="content">
|
||
<div slot="content">
|
||
<Table
|
||
class="mt_10"
|
||
:columns="skuTableColumn"
|
||
:data="skuTableData"
|
||
style="
|
||
width: 100%;
|
||
.ivu-table-overflowX {
|
||
overflow-x: hidden;
|
||
}
|
||
"
|
||
>
|
||
<template slot-scope="{ row }" slot="sn">
|
||
<Input
|
||
clearable
|
||
v-model="row.sn"
|
||
placeholder="请输入货号"
|
||
@on-change="updateSkuTable(row, 'sn')"
|
||
/>
|
||
</template>
|
||
<div
|
||
slot-scope="{ row }"
|
||
slot="weight"
|
||
v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'"
|
||
>
|
||
<Input
|
||
clearable
|
||
v-model="row.weight"
|
||
placeholder="请输入重量"
|
||
@on-change="updateSkuTable(row, 'weight')"
|
||
>
|
||
<span slot="append">kg</span>
|
||
</Input>
|
||
</div>
|
||
<template slot-scope="{ row }" slot="quantity">
|
||
<Input
|
||
clearable
|
||
v-model="row.quantity"
|
||
placeholder="请输入库存"
|
||
@on-change="updateSkuTable(row, 'quantity')"
|
||
>
|
||
<span slot="append">{{
|
||
baseInfoForm.goodsUnit || ""
|
||
}}</span>
|
||
</Input>
|
||
</template>
|
||
<template slot-scope="{ row }" slot="cost">
|
||
<Input
|
||
clearable
|
||
v-model="row.cost"
|
||
placeholder="请输入成本价"
|
||
@on-change="updateSkuTable(row, 'cost')"
|
||
>
|
||
<span slot="append">元</span>
|
||
</Input>
|
||
</template>
|
||
<template slot-scope="{ row }" slot="price">
|
||
<Input
|
||
clearable
|
||
v-model="row.price"
|
||
placeholder="请输入价格"
|
||
@on-change="updateSkuTable(row, 'price')"
|
||
>
|
||
<span slot="append">元</span>
|
||
</Input>
|
||
</template>
|
||
<template slot-scope="{ row }" slot="wholePrice0">
|
||
<Input
|
||
v-if="wholesaleData[0]"
|
||
clearable
|
||
disabled
|
||
v-model="wholesaleData[0].price"
|
||
>
|
||
<span slot="append">元</span>
|
||
</Input>
|
||
</template>
|
||
<template slot-scope="{ row }" slot="wholePrice1">
|
||
<Input
|
||
v-if="wholesaleData[1]"
|
||
clearable
|
||
disabled
|
||
v-model="wholesaleData[1].price"
|
||
>
|
||
<span slot="append">元</span>
|
||
</Input>
|
||
</template>
|
||
<template slot-scope="{ row }" slot="wholePrice2">
|
||
<Input
|
||
v-if="wholesaleData[2]"
|
||
clearable
|
||
disabled
|
||
v-model="wholesaleData[2].price"
|
||
>
|
||
<span slot="append">元</span>
|
||
</Input>
|
||
</template>
|
||
<template slot-scope="{ row }" slot="images">
|
||
<Button @click="editSkuPicture(row)">编辑图片</Button>
|
||
<Modal
|
||
v-model="showSkuPicture"
|
||
:styles="{ top: '30px' }"
|
||
class-name="sku-preview-modal"
|
||
title="编辑图片"
|
||
ok-text="结束编辑"
|
||
@on-ok="updateSkuPicture()"
|
||
cancel-text="取消"
|
||
>
|
||
<div class="preview-picture">
|
||
<img
|
||
v-if="previewPicture !== ''"
|
||
:src="previewPicture"
|
||
/>
|
||
</div>
|
||
<Divider />
|
||
<vuedraggable
|
||
:list="selectedSku.images"
|
||
:animation="200"
|
||
style="display: inline-block"
|
||
>
|
||
<div
|
||
class="sku-upload-list"
|
||
v-for="(img, __index) in selectedSku.images"
|
||
:key="__index"
|
||
>
|
||
<template>
|
||
<img :src="img.url" />
|
||
<div class="sku-upload-list-cover">
|
||
<Icon
|
||
type="md-search"
|
||
@click="handleView(img.url)"
|
||
></Icon>
|
||
<Icon
|
||
type="md-trash"
|
||
@click="handleRemove(img, __index)"
|
||
></Icon>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</vuedraggable>
|
||
<Upload
|
||
ref="uploadSku"
|
||
:show-upload-list="false"
|
||
:on-success="handleSuccess"
|
||
:format="['jpg', 'jpeg', 'png']"
|
||
:on-format-error="handleFormatError"
|
||
:on-exceeded-size="handleMaxSize"
|
||
:max-size="1024"
|
||
:before-upload="handleBeforeUpload"
|
||
multiple
|
||
type="drag"
|
||
:action="uploadFileUrl"
|
||
:headers="{ ...accessToken }"
|
||
style="display: inline-block; width: 58px"
|
||
>
|
||
<div>
|
||
<Icon type="ios-camera" size="55"></Icon>
|
||
</div>
|
||
</Upload>
|
||
</Modal>
|
||
</template>
|
||
</Table>
|
||
</div>
|
||
</div>
|
||
</Panel>
|
||
</Collapse>
|
||
</div>
|
||
</div>
|
||
<h4>商品详情描述</h4>
|
||
<div class="form-item-view">
|
||
<div class="tree-bar">
|
||
<FormItem
|
||
class="form-item-view-el"
|
||
label="店内分类"
|
||
prop="shopCategory"
|
||
>
|
||
<Tree
|
||
ref="tree"
|
||
style="text-align: left"
|
||
:data="shopCategory"
|
||
show-checkbox
|
||
@on-select-change="selectTree"
|
||
@on-check-change="changeSelect"
|
||
:check-strictly="false"
|
||
></Tree>
|
||
</FormItem>
|
||
</div>
|
||
<FormItem
|
||
style="width: 100%"
|
||
class="form-item-view-el"
|
||
label="商品描述"
|
||
prop="intro"
|
||
>
|
||
<editor
|
||
ref="editor"
|
||
openXss
|
||
v-model="baseInfoForm.intro"
|
||
:init="{ ...initEditor, height: '400px' }"
|
||
></editor>
|
||
</FormItem>
|
||
<FormItem
|
||
style="width: 100%"
|
||
class="form-item-view-el"
|
||
label="移动端描述"
|
||
prop="skuList"
|
||
>
|
||
<editor
|
||
ref="editor"
|
||
openXss
|
||
v-model="baseInfoForm.mobileIntro"
|
||
:init="{ ...initEditor, height: '400px' }"
|
||
></editor>
|
||
</FormItem>
|
||
</div>
|
||
<div v-if="baseInfoForm.goodsType != 'VIRTUAL_GOODS'">
|
||
<h4>商品物流信息</h4>
|
||
<div class="form-item-view">
|
||
<FormItem
|
||
class="form-item-view-el"
|
||
label="物流模板"
|
||
prop="templateId"
|
||
>
|
||
<Select v-model="baseInfoForm.templateId" style="width: 200px">
|
||
<Option
|
||
v-for="item in logisticsTemplate"
|
||
:value="item.id"
|
||
:key="item.id"
|
||
>{{ item.name }}
|
||
</Option>
|
||
</Select>
|
||
</FormItem>
|
||
<FormItem
|
||
v-if="baseInfoForm.salesModel == 'WHOLESALE'"
|
||
class="form-item-view-el"
|
||
label="商品重量"
|
||
prop="weight"
|
||
>
|
||
<Input
|
||
v-model="baseInfoForm.weight"
|
||
placeholder="请输入商品重量"
|
||
>
|
||
<span slot="append">kg</span></Input
|
||
>
|
||
</FormItem>
|
||
</div>
|
||
<h4>其他信息</h4>
|
||
<div class="form-item-view">
|
||
<FormItem
|
||
class="form-item-view-el"
|
||
label="商品发布"
|
||
prop="release"
|
||
>
|
||
<RadioGroup
|
||
type="button"
|
||
button-style="solid"
|
||
v-model="baseInfoForm.release"
|
||
>
|
||
<Radio title="立即发布" :label="1">
|
||
<span>立即发布</span>
|
||
</Radio>
|
||
<Radio title="放入仓库" :label="0">
|
||
<span>放入仓库</span>
|
||
</Radio>
|
||
</RadioGroup>
|
||
</FormItem>
|
||
<FormItem
|
||
class="form-item-view-el"
|
||
label="商品推荐"
|
||
prop="skuList"
|
||
>
|
||
<RadioGroup
|
||
type="button"
|
||
button-style="solid"
|
||
v-model="baseInfoForm.recommend"
|
||
>
|
||
<Radio title="推荐" :label="1">
|
||
<span>推荐</span>
|
||
</Radio>
|
||
<Radio title="不推荐" :label="0">
|
||
<span>不推荐</span>
|
||
</Radio>
|
||
</RadioGroup>
|
||
</FormItem>
|
||
</div>
|
||
<div class="form-item-view-bottom">
|
||
<Collapse
|
||
v-model="params_panel"
|
||
v-for="(paramsGroup, groupIndex) in goodsParams"
|
||
:title="paramsGroup.groupName"
|
||
class="mb_10"
|
||
style="text-align: left"
|
||
:key="paramsGroup.groupName"
|
||
>
|
||
<Panel :name="paramsGroup.groupName">
|
||
{{ paramsGroup.groupName }}
|
||
<p slot="content">
|
||
<FormItem
|
||
v-for="(params, paramsIndex) in paramsGroup.params"
|
||
:key="paramsIndex"
|
||
:label="`${params.paramName}：`"
|
||
>
|
||
<Select
|
||
v-model="params.paramValue"
|
||
placeholder="请选择"
|
||
style="width: 200px"
|
||
clearable
|
||
@on-change="
|
||
selectParams(
|
||
paramsGroup,
|
||
groupIndex,
|
||
params,
|
||
paramsIndex,
|
||
params.paramValue
|
||
)
|
||
"
|
||
>
|
||
<Option
|
||
v-for="option in params.options.split(',')"
|
||
:label="option"
|
||
:value="option"
|
||
:key="option"
|
||
></Option>
|
||
</Select>
|
||
</FormItem>
|
||
</p>
|
||
</Panel>
|
||
</Collapse>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
<!-- 底部按钮 -->
|
||
<div class="footer">
|
||
<ButtonGroup>
|
||
<Button
|
||
type="primary"
|
||
@click="pre"
|
||
v-if="!$route.query.id && !$route.query.draftId"
|
||
>上一步
|
||
</Button>
|
||
<Button type="primary" @click="save" :loading="submitLoading">
|
||
{{ this.$route.query.id ? "保存" : "保存商品" }}
|
||
</Button>
|
||
<Button type="primary" @click="saveToDraft">保存为模版</Button>
|
||
</ButtonGroup>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as API_GOODS from "@/api/goods";
|
||
import * as API_Shop from "@/api/shops";
|
||
import cloneObj from "@/utils/index";
|
||
import vuedraggable from "vuedraggable";
|
||
import Editor from "@tinymce/tinymce-vue";
|
||
import { initEditor } from "@/views/lili-components/editor/config";
|
||
import { uploadFile } from "@/libs/axios";
|
||
import { regular } from "@/utils";
|
||
|
||
export default {
|
||
name: "goodsOperationSec",
|
||
components: {
|
||
editor: Editor,
|
||
vuedraggable,
|
||
},
|
||
props: {
|
||
firstData: {
|
||
default: {},
|
||
type: Object,
|
||
},
|
||
},
|
||
data() {
|
||
// 表单验证项，商品价格
|
||
const checkPrice = (rule, value, callback) => {
|
||
if (!value && value !== 0) {
|
||
return callback(new Error("商品价格不能为空"));
|
||
}
|
||
setTimeout(() => {
|
||
if (!regular.money.test(value)) {
|
||
callback(new Error("请输入正整数或者两位小数"));
|
||
} else if (parseFloat(value) > 99999999) {
|
||
callback(new Error("商品价格设置超过上限值"));
|
||
} else {
|
||
callback();
|
||
}
|
||
}, 1000);
|
||
};
|
||
return {
|
||
regular,
|
||
initEditor,
|
||
total: 0,
|
||
global: 0,
|
||
accessToken: "", //令牌token
|
||
goodsParams: "",
|
||
categoryId: "", // 商品分类第三级id
|
||
//提交状态
|
||
submitLoading: false,
|
||
//上传图片路径
|
||
uploadFileUrl: uploadFile,
|
||
// 预览图片路径
|
||
previewPicture: "",
|
||
//商品图片
|
||
previewGoodsPicture: "",
|
||
//展示图片层
|
||
visible: false,
|
||
//展示商品图片
|
||
goodsPictureVisible: false,
|
||
//展示sku图片
|
||
showSkuPicture: false,
|
||
//选择的sku
|
||
selectedSku: {},
|
||
wholesalePreviewColumns: [
|
||
{
|
||
title: "销售规则",
|
||
width: 300,
|
||
render: (h, params) => {
|
||
let guide =
|
||
"当商品购买数量 ≥" +
|
||
params.row.num +
|
||
" 时，售价为 ￥" +
|
||
params.row.price +
|
||
" /" +
|
||
this.baseInfoForm.goodsUnit;
|
||
return h("div", guide);
|
||
},
|
||
},
|
||
],
|
||
wholesaleColumns: [
|
||
{
|
||
title: "购买数量",
|
||
key: "num",
|
||
align: "center",
|
||
slot: "wholesaleNum",
|
||
},
|
||
{
|
||
title: "商品单价",
|
||
key: "price",
|
||
align: "center",
|
||
width: "280px",
|
||
slot: "wholesalePrice",
|
||
},
|
||
],
|
||
wholesaleData: [
|
||
{
|
||
num: 0,
|
||
price: 0,
|
||
goodsId: this.goodsId,
|
||
},
|
||
],
|
||
/** 发布商品基本参数 */
|
||
baseInfoForm: {
|
||
salesModel: "RETAIL",
|
||
/** 商品相册列表 */
|
||
goodsGalleryFiles: [],
|
||
/** 是否立即发布 true 立即发布 false 放入仓库 */
|
||
release: 1,
|
||
/** 是否为推荐商品 */
|
||
recommend: 1,
|
||
/** 店铺分类 */
|
||
storeCategoryPath: "",
|
||
brandId: 0,
|
||
/** 计量单位 **/
|
||
goodsUnit: "",
|
||
/** 商品类型 **/
|
||
goodsType: "",
|
||
/** 分类路径 **/
|
||
categoryPath: "",
|
||
/** 商品卖点 **/
|
||
sellingPoint: "",
|
||
/** 商品详情 **/
|
||
intro: "",
|
||
mobileIntro: "",
|
||
updateSku: true,
|
||
/** 是否重新生成sku */
|
||
regeneratorSkuFlag: false,
|
||
/** 物流模板id **/
|
||
templateId: "",
|
||
/** 参数组*/
|
||
goodsParamsDTOList: [],
|
||
/** 商品分类中文名 */
|
||
categoryName: [],
|
||
},
|
||
/** 表格头 */
|
||
skuTableColumn: [],
|
||
/** 表格数据 */
|
||
skuTableData: [],
|
||
/** 默认的规格参数 */
|
||
skuData: [],
|
||
/** 默认的规格值 */
|
||
skuVals: [],
|
||
// 某一规格名下的规格值
|
||
skuVal: [],
|
||
// 规格展开的项
|
||
open_panel: [1, 2],
|
||
/** 要提交的规格数据*/
|
||
skuInfo: [],
|
||
/** 物流模板 **/
|
||
logisticsTemplate: [],
|
||
|
||
/** 固定列校验提示内容 */
|
||
validatatxt: "请输入0~99999999之间的数字值",
|
||
//参数panel展示
|
||
params_panel: [],
|
||
/** 存储未通过校验的单元格位置 */
|
||
validateError: [],
|
||
baseInfoFormRule: {
|
||
goodsName: [regular.REQUIRED, regular.WHITE_SPACE, regular.VARCHAR60],
|
||
price: [regular.REQUIRED, { validator: checkPrice }],
|
||
sellingPoint: [regular.REQUIRED, regular.VARCHAR60],
|
||
goodsUnit: [{ required: true, message: "请选择计量单位" }],
|
||
name: [regular.REQUIRED, regular.VARCHAR5],
|
||
value: [regular.REQUIRED, regular.VARCHAR60],
|
||
templateId: [regular.REQUIRED],
|
||
weight: [regular.REQUIRED],
|
||
},
|
||
params: {
|
||
pageNumber: 1,
|
||
pageSize: 10,
|
||
},
|
||
skuInfoRules: {},
|
||
/** 品牌列表 */
|
||
brandList: [],
|
||
/** 店铺分类列表 */
|
||
shopCategory: [],
|
||
/** 商品单位列表 */
|
||
goodsUnitList: [],
|
||
ignoreColumn: [
|
||
// 添加规格时需要忽略的参数
|
||
"_index",
|
||
"_rowKey",
|
||
"sn",
|
||
"cost",
|
||
"price",
|
||
"weight",
|
||
"quantity",
|
||
"specId",
|
||
"specValueId",
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
/**
|
||
* 选择参数
|
||
* @paramsGroup 参数分组
|
||
* @groupIndex 参数分组下标
|
||
* @params 参数选项
|
||
* @paramIndex 参数下标值
|
||
* @value 参数选项值
|
||
*/
|
||
selectParams(paramsGroup, groupIndex, params, paramsIndex, value) {
|
||
if (!this.baseInfoForm.goodsParamsDTOList[groupIndex]) {
|
||
this.baseInfoForm.goodsParamsDTOList[groupIndex] = {
|
||
groupId: "",
|
||
groupName: "",
|
||
goodsParamsItemDTOList: [],
|
||
};
|
||
}
|
||
//赋予分组id、分组名称
|
||
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupId =
|
||
paramsGroup.groupId;
|
||
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupName =
|
||
paramsGroup.groupName;
|
||
|
||
//参数详细为空，则赋予
|
||
if (
|
||
!this.baseInfoForm.goodsParamsDTOList[groupIndex]
|
||
.goodsParamsItemDTOList[paramsIndex]
|
||
) {
|
||
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
|
||
paramsIndex
|
||
] = {
|
||
paramName: "",
|
||
paramValue: "",
|
||
isIndex: "",
|
||
// required: "",
|
||
paramId: "",
|
||
sort: "",
|
||
};
|
||
}
|
||
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
|
||
paramsIndex
|
||
] = {
|
||
paramName: params.paramName,
|
||
paramValue: value,
|
||
isIndex: params.isIndex,
|
||
// required: params.required,
|
||
paramId: params.id,
|
||
sort: params.sort,
|
||
};
|
||
},
|
||
// 编辑sku图片
|
||
editSkuPicture(row) {
|
||
if (row.images && row.images.length > 0) {
|
||
this.previewPicture = row.images[0].url;
|
||
}
|
||
this.selectedSku = row;
|
||
this.showSkuPicture = true;
|
||
},
|
||
pre() {
|
||
// 上一步
|
||
this.$parent.activestep--;
|
||
},
|
||
// 预览图片
|
||
handleView(url) {
|
||
this.previewPicture = url;
|
||
this.visible = true;
|
||
},
|
||
// 移除已选图片
|
||
handleRemove(item, index) {
|
||
this.selectedSku.images = this.selectedSku.images.filter(
|
||
(i) => i.url !== item.url
|
||
);
|
||
if (this.selectedSku.images.length > 0 && index === 0) {
|
||
this.previewPicture = this.selectedSku.images[0].url;
|
||
} else if (this.selectedSku.images.length < 0) {
|
||
this.previewPicture = "";
|
||
}
|
||
},
|
||
// 查看商品大图
|
||
handleViewGoodsPicture(url) {
|
||
this.previewGoodsPicture = url;
|
||
this.goodsPictureVisible = true;
|
||
},
|
||
// 移除商品图片
|
||
handleRemoveGoodsPicture(file) {
|
||
this.baseInfoForm.goodsGalleryFiles =
|
||
this.baseInfoForm.goodsGalleryFiles.filter((i) => i.url !== file.url);
|
||
},
|
||
// 更新sku图片
|
||
updateSkuPicture() {
|
||
this.baseInfoForm.regeneratorSkuFlag = true;
|
||
let _index = this.selectedSku._index;
|
||
this.skuTableData[_index] = this.selectedSku;
|
||
},
|
||
// sku图片上传成功
|
||
handleSuccess(res, file) {
|
||
if (file.response) {
|
||
file.url = file.response.result;
|
||
if (this.selectedSku.images) {
|
||
this.selectedSku.images.push(file);
|
||
} else {
|
||
this.selectedSku.images = [file];
|
||
}
|
||
this.previewPicture = file.url;
|
||
}
|
||
},
|
||
handleAddWholesaleData() {
|
||
if (
|
||
this.wholesaleData.length === 1 &&
|
||
(this.wholesaleData[0].price <= 0 || this.wholesaleData[0].num <= 0)
|
||
) {
|
||
this.$Message.error("请输入正确的销售规则");
|
||
return;
|
||
}
|
||
if (this.wholesaleData.length < 3) {
|
||
this.wholesaleData.push({
|
||
price:
|
||
Number(this.wholesaleData[this.wholesaleData.length - 1].price) -
|
||
0.01,
|
||
num:
|
||
Number(this.wholesaleData[this.wholesaleData.length - 1].num) + 1,
|
||
goodsId: this.goodsId,
|
||
});
|
||
}
|
||
this.renderTableData(this.skuTableData);
|
||
},
|
||
handleDeleteWholesaleData(index) {
|
||
this.wholesaleData.splice(index, 1);
|
||
this.renderTableData(this.skuTableData);
|
||
},
|
||
checkWholesaleNum(index) {
|
||
if (this.wholesaleData[index].num < 0) {
|
||
this.$Message.error("购买数量必须大于0");
|
||
this.wholesaleData[index].num = 0;
|
||
return;
|
||
}
|
||
if (
|
||
index > 0 &&
|
||
this.wholesaleData[index - 1].num >= this.wholesaleData[index].num
|
||
) {
|
||
this.$Notice.error({
|
||
title: "在批发模式的销售规则中",
|
||
desc: "下一个购买数量必须大于上一个购买数量",
|
||
duration: 5,
|
||
});
|
||
this.wholesaleData[index].num = this.wholesaleData[index - 1].num + 1;
|
||
}
|
||
this.renderTableData(this.skuTableData);
|
||
},
|
||
checkWholesalePrice(index) {
|
||
if (this.wholesaleData[index].price < 0) {
|
||
this.$Message.error("商品单价必须大于0");
|
||
this.wholesaleData[index].price = 0;
|
||
return;
|
||
}
|
||
if (
|
||
index > 0 &&
|
||
this.wholesaleData[index - 1].price <= this.wholesaleData[index].price
|
||
) {
|
||
this.$Notice.error({
|
||
title: "在批发模式的销售规则中",
|
||
desc: "下一个商品单价必须小于上一个商品单价",
|
||
duration: 5,
|
||
});
|
||
this.wholesaleData[index].price =
|
||
this.wholesaleData[index - 1].price - 0.01;
|
||
}
|
||
this.renderTableData(this.skuTableData);
|
||
},
|
||
// 商品图片上传成功
|
||
handleSuccessGoodsPicture(res, file) {
|
||
if (file.response) {
|
||
file.url = file.response.result;
|
||
this.baseInfoForm.goodsGalleryFiles.push(file);
|
||
}
|
||
},
|
||
// 图片格式不正确
|
||
handleFormatError(file) {
|
||
this.$Notice.warning({
|
||
title: "文件格式不正确",
|
||
desc: "文件 " + file.name + " 的格式不正确",
|
||
});
|
||
},
|
||
// 图片大小不正确
|
||
handleMaxSize(file) {
|
||
this.$Notice.warning({
|
||
title: "超过文件大小限制",
|
||
desc: "图片大小不能超过1MB",
|
||
});
|
||
},
|
||
// 图片上传前钩子
|
||
handleBeforeUploadGoodsPicture(file) {
|
||
const check = this.baseInfoForm.goodsGalleryFiles.length < 5;
|
||
if (!check) {
|
||
this.$Notice.warning({
|
||
title: "图片数量不能大于五张",
|
||
});
|
||
return false;
|
||
}
|
||
},
|
||
// sku图片上传前钩子
|
||
handleBeforeUpload(file) {
|
||
const check =
|
||
this.selectedSku.images !== undefined &&
|
||
this.selectedSku.images.length > 5;
|
||
if (check) {
|
||
this.$Notice.warning({ title: "图片数量不能大于五张" });
|
||
return false;
|
||
}
|
||
},
|
||
|
||
/** 查询商品品牌列表 */
|
||
getGoodsBrandList() {
|
||
API_GOODS.getCategoryBrandListDataSeller(this.categoryId).then(
|
||
(response) => {
|
||
this.brandList = response;
|
||
}
|
||
);
|
||
},
|
||
// 页面触底
|
||
handleReachBottom() {
|
||
setTimeout(() => {
|
||
if (this.params.pageNumber * this.params.pageSize <= this.total) {
|
||
this.params.pageNumber++;
|
||
this.GET_GoodsUnit();
|
||
}
|
||
}, 1000);
|
||
},
|
||
// 获取商品单位
|
||
GET_GoodsUnit() {
|
||
API_GOODS.getGoodsUnitList(this.params).then((res) => {
|
||
if (res.success) {
|
||
this.goodsUnitList.push(...res.result.records.map((i) => i.name));
|
||
this.total = res.result.total;
|
||
}
|
||
});
|
||
},
|
||
// 获取当前店铺分类
|
||
GET_ShopGoodsLabel() {
|
||
API_GOODS.getShopGoodsLabelListSeller().then((res) => {
|
||
if (res.success) {
|
||
let shopCategories = !this.baseInfoForm.storeCategoryPath
|
||
? []
|
||
: this.baseInfoForm.storeCategoryPath.split(",");
|
||
|
||
this.shopCategory = res.result.map((i) => {
|
||
i.title = i.labelName;
|
||
i.expand = false;
|
||
i.checked = shopCategories.some((o) => o === i.id);
|
||
i.children = i.children.map((j) => {
|
||
j.title = j.labelName;
|
||
j.expand = false;
|
||
j.checked = shopCategories.some((o) => o === j.id);
|
||
return j;
|
||
});
|
||
return i;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 编辑时获取商品信息
|
||
async GET_GoodData(id, draftId) {
|
||
let response = {};
|
||
if (draftId) {
|
||
response = await API_GOODS.getDraftGoodsDetail(draftId);
|
||
} else {
|
||
response = await API_GOODS.getGoods(id);
|
||
this.goodsId = response.result.id;
|
||
}
|
||
|
||
response.result.recommend
|
||
? (response.result.recommend = 1)
|
||
: (response.result.recommend = 0);
|
||
this.baseInfoForm = { ...this.baseInfoForm, ...response.result };
|
||
this.baseInfoForm.release = 1; //即使是被放入仓库，修改的时候也会显示会立即发布
|
||
this.categoryId = response.result.categoryPath.split(",")[2];
|
||
|
||
if (
|
||
response.result.goodsGalleryList &&
|
||
response.result.goodsGalleryList.length > 0
|
||
) {
|
||
this.baseInfoForm.goodsGalleryFiles =
|
||
response.result.goodsGalleryList.map((i) => {
|
||
let files = { url: i };
|
||
return files;
|
||
});
|
||
}
|
||
|
||
if (
|
||
response.result.wholesaleList &&
|
||
response.result.wholesaleList.length > 0
|
||
) {
|
||
this.wholesaleData = response.result.wholesaleList;
|
||
}
|
||
|
||
if (response.result.salesModel === "WHOLESALE") {
|
||
this.baseInfoForm.weight = response.result.skuList[0].weight;
|
||
}
|
||
|
||
this.Get_SkuInfoByCategory(this.categoryId);
|
||
|
||
this.renderGoodsDetailSku(response.result.skuList);
|
||
|
||
/** 查询品牌列表 */
|
||
this.getGoodsBrandList();
|
||
/** 查询商品参数 */
|
||
this.GET_GoodsParams();
|
||
/** 查询店铺商品分类 */
|
||
this.GET_ShopGoodsLabel();
|
||
this.GET_GoodsUnit();
|
||
},
|
||
// 渲染sku数据
|
||
renderGoodsDetailSku(skuList) {
|
||
let skus = [];
|
||
let skusInfo = [];
|
||
skuList.map((e) => {
|
||
let sku = {
|
||
id: e.id,
|
||
sn: e.sn,
|
||
price: e.price,
|
||
cost: e.cost,
|
||
quantity: e.quantity,
|
||
weight: e.weight,
|
||
};
|
||
e.specList.forEach((u) => {
|
||
if (u.specName === "images") {
|
||
sku.images = u.specImage;
|
||
} else {
|
||
sku[u.specName] = u.specValue;
|
||
if (
|
||
!skusInfo.some((s) => s.name === u.specName) &&
|
||
!this.ignoreColumn.includes(u.specName)
|
||
) {
|
||
skusInfo.push({
|
||
name: u.specName,
|
||
spec_id: u.specNameId,
|
||
spec_values: [
|
||
{
|
||
id: u.specValueId,
|
||
name: u.specName,
|
||
value: u.specValue || "",
|
||
},
|
||
],
|
||
});
|
||
} else {
|
||
skusInfo = skusInfo.map((sk) => {
|
||
if (
|
||
!sk.spec_values.some((s) => s.value === u.specValue) &&
|
||
sk.name === u.specName
|
||
) {
|
||
sk.spec_values.push({
|
||
id: u.specValueId,
|
||
name: u.specName,
|
||
value: u.specValue || "",
|
||
});
|
||
}
|
||
if (!sk.spec_id && u.specName === "specId") {
|
||
sk.spec_id = u.specValue;
|
||
}
|
||
return sk;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
skus.push(sku);
|
||
});
|
||
this.skuInfo = skusInfo;
|
||
this.renderTableData(skus);
|
||
this.skuTableData = skus;
|
||
},
|
||
|
||
/** 根据当前分类id查询商品应包含的参数 */
|
||
GET_GoodsParams() {
|
||
API_GOODS.getCategoryParamsListDataSeller(this.categoryId).then(
|
||
(response) => {
|
||
if (!response || response.length <= 0) {
|
||
return;
|
||
}
|
||
this.goodsParams = response;
|
||
|
||
//展开选项卡
|
||
this.goodsParams.forEach((item) => {
|
||
this.params_panel.push(item.groupName);
|
||
});
|
||
if (this.baseInfoForm.goodsParamsDTOList) {
|
||
// 已选值集合
|
||
const paramsArr = [];
|
||
this.baseInfoForm.goodsParamsDTOList.forEach((group) => {
|
||
group.goodsParamsItemDTOList.forEach((param) => {
|
||
param.groupId = group.groupId;
|
||
paramsArr.push(param);
|
||
});
|
||
});
|
||
// 循环参数分组
|
||
this.goodsParams.forEach((parmsGroup) => {
|
||
parmsGroup.params.forEach((param) => {
|
||
paramsArr.forEach((arr) => {
|
||
if (param.paramName == arr.paramName) {
|
||
param.paramValue = arr.paramValue;
|
||
}
|
||
});
|
||
});
|
||
});
|
||
} else {
|
||
this.baseInfoForm.goodsParamsDTOList = [];
|
||
}
|
||
}
|
||
);
|
||
},
|
||
/** 添加规格项 */
|
||
addSkuItem() {
|
||
if (this.skuInfo.length >= 5) {
|
||
this.$Message.error("规格项不能大于5个！");
|
||
return;
|
||
}
|
||
// 写入对象，下标，具体对象
|
||
let num = this.global++;
|
||
this.$set(this.skuInfo, this.skuInfo.length, {
|
||
spec_values: [{ name: "规格名" + num, value: "" }],
|
||
name: "规格名" + num,
|
||
});
|
||
this.renderTableData(this.skuTableData);
|
||
},
|
||
// 编辑规格名
|
||
editSkuItem() {
|
||
this.renderTableData(this.skuTableData);
|
||
},
|
||
// 编辑规格值
|
||
async skuValueChange(val, index, item) {
|
||
this.renderTableData(this.skuTableData);
|
||
},
|
||
// 获取焦点时，取得规格名对应的规格值
|
||
changeSkuVals(name) {
|
||
if (name) {
|
||
this.skuData.forEach((e, index) => {
|
||
if (e === name) {
|
||
if (this.skuVal.length != this.skuVals[index].length) {
|
||
this.skuVal = this.skuVals[index];
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
/** 移除当前规格项 进行数据变化*/
|
||
handleCloseSkuItem($index, item) {
|
||
this.skuInfo.splice($index, 1);
|
||
this.skuTableData.forEach((e, index) => {
|
||
delete e[item.name];
|
||
});
|
||
/**
|
||
* 渲染规格详细表格
|
||
*/
|
||
this.renderTableData(this.skuTableData);
|
||
},
|
||
// 添加规格值的验证
|
||
validateEmpty(params) {
|
||
let flag = true;
|
||
params.forEach((item) => {
|
||
for (var key in item) {
|
||
if (item[key] != "0" && !item.value) {
|
||
this.$Message.error("请必填规格项");
|
||
flag = false;
|
||
return false; // 终止程序
|
||
}
|
||
}
|
||
});
|
||
|
||
return flag;
|
||
},
|
||
/** 添加当前规格项的规格值*/
|
||
addSpec($index, item) {
|
||
if (this.validateEmpty(item.spec_values)) {
|
||
if (item.spec_values.length >= 10) {
|
||
this.$Message.error("规格值不能大于10个！");
|
||
return;
|
||
}
|
||
|
||
this.$set(item.spec_values, item.spec_values.length, {
|
||
name: item.name,
|
||
value: "",
|
||
});
|
||
this.baseInfoForm.regeneratorSkuFlag = true;
|
||
/**
|
||
* 渲染规格详细表格
|
||
*/
|
||
this.renderTableData(this.skuTableData);
|
||
}
|
||
},
|
||
handleClearSku() {
|
||
this.skuInfo = [];
|
||
this.skuTableData = [];
|
||
this.renderTableData(this.skuTableData);
|
||
},
|
||
/** 移除当前规格值 */
|
||
handleCloseSkuValue(item, index) {
|
||
// this.skuInfo[item.name].spec_values.splice(index, 1);
|
||
this.skuInfo.forEach((i) => {
|
||
if (i.name === item.name) {
|
||
i.spec_values.splice(index, 1);
|
||
}
|
||
});
|
||
this.skuTableData = this.skuTableData.filter(
|
||
(e, index) => e[item.name] !== item.value
|
||
);
|
||
this.baseInfoForm.regeneratorSkuFlag = true;
|
||
/**
|
||
* 渲染规格详细表格
|
||
*/
|
||
this.renderTableData(this.skuTableData);
|
||
},
|
||
|
||
/**
|
||
* 渲染table所需要的column 和 data
|
||
*/
|
||
renderTableData(skus) {
|
||
this.skuTableColumn = [];
|
||
// this.skuTableData = [];
|
||
let pushData = [];
|
||
//渲染头部
|
||
this.skuInfo.forEach((sku) => {
|
||
// !sku.name ? (sku.name = "规格名") : "";
|
||
//列名称
|
||
let columnName = sku.name;
|
||
pushData.push({
|
||
title: columnName,
|
||
key: columnName,
|
||
});
|
||
});
|
||
|
||
// 有成本价和价格的情况
|
||
this.baseInfoForm.salesModel !== "WHOLESALE"
|
||
? pushData.push(
|
||
{
|
||
title: "成本价",
|
||
slot: "cost",
|
||
},
|
||
{
|
||
title: "价格",
|
||
slot: "price",
|
||
}
|
||
)
|
||
: "";
|
||
|
||
if (this.baseInfoForm.salesModel === "WHOLESALE" && this.wholesaleData) {
|
||
this.wholesaleData.forEach((item, index) => {
|
||
pushData.push({
|
||
title: "购买量 ≥ " + item.num,
|
||
slot: "wholePrice" + index,
|
||
});
|
||
});
|
||
}
|
||
|
||
// 有重量的情况
|
||
this.baseInfoForm.goodsType != "VIRTUAL_GOODS" &&
|
||
this.baseInfoForm.salesModel !== "WHOLESALE"
|
||
? pushData.push({
|
||
title: "重量",
|
||
slot: "weight",
|
||
})
|
||
: "";
|
||
|
||
pushData.push(
|
||
{
|
||
title: "库存",
|
||
slot: "quantity",
|
||
},
|
||
{
|
||
title: "货号",
|
||
slot: "sn",
|
||
},
|
||
{
|
||
title: "图片",
|
||
slot: "images",
|
||
}
|
||
);
|
||
|
||
this.skuTableColumn = pushData;
|
||
//克隆所有渲染的数据
|
||
let cloneTemp = cloneObj(this.skuInfo);
|
||
if (cloneTemp[0]) {
|
||
//存放最终结果
|
||
let result = [];
|
||
//循环选中的 sku 数据
|
||
cloneTemp[0].spec_values.forEach((specItem, index) => {
|
||
// 如存在数据，则将数据赋值
|
||
if (skus && skus[index] && specItem.value !== "") {
|
||
let obj = {
|
||
id: skus[index].id,
|
||
sn: skus[index].sn,
|
||
quantity: skus[index].quantity,
|
||
cost: skus[index].cost,
|
||
price: skus[index].price,
|
||
[cloneTemp[0].name]: specItem.value,
|
||
images:
|
||
skus[index].images || this.baseInfoForm.goodsGalleryFiles || [],
|
||
};
|
||
if (specItem.value !== "") {
|
||
obj.id = skus[index].id;
|
||
}
|
||
if (skus[index].weight !== "") {
|
||
obj.weight = skus[index].weight;
|
||
}
|
||
result.push(obj);
|
||
} else {
|
||
result.push({
|
||
[cloneTemp[0].name]: specItem.value,
|
||
images: this.baseInfoForm.goodsGalleryFiles || [],
|
||
});
|
||
}
|
||
});
|
||
cloneTemp.splice(0, 1);
|
||
result = this.specIterator(result, cloneTemp, skus);
|
||
this.skuTableData = result;
|
||
}
|
||
},
|
||
/**
|
||
* 迭代属性，形成表格
|
||
* result 渲染的数据
|
||
* array spec数据
|
||
*/
|
||
specIterator(result, cloneTemp, skus) {
|
||
// console.log("-----skus-----");
|
||
// console.log(JSON.parse(JSON.stringify(skus)));
|
||
// console.log("-----result-----");
|
||
// console.log(JSON.parse(JSON.stringify(result)));
|
||
// console.log("-----cloneTemp-----");
|
||
// console.log(JSON.parse(JSON.stringify(cloneTemp)));
|
||
//是否还可以循环
|
||
if (cloneTemp.length > 0) {
|
||
let table = [];
|
||
// 已有数据索引
|
||
let findIndex = 0;
|
||
result.forEach((resItem, index) => {
|
||
cloneTemp[0].spec_values.forEach((valItem, _index) => {
|
||
let obj = cloneObj(resItem);
|
||
// 判断已存在数据数量是否大于渲染数据数量（认为是在编辑原存在数据的规格值）且规格值不为空且存在已存在数据，如符合条件，则认为为修改已存在数据
|
||
if (
|
||
skus.length > result.length &&
|
||
valItem.value !== "" &&
|
||
skus[findIndex]
|
||
) {
|
||
obj = cloneObj(skus[findIndex]);
|
||
}
|
||
let emptyFlag = false;
|
||
// 判断是否为规格项的第一个值，如果不为第一个值则判断为新加数据
|
||
if (cloneTemp[0].spec_values.length > 1 && valItem.value === "") {
|
||
delete obj.id;
|
||
delete obj.sn;
|
||
delete obj.quantity;
|
||
delete obj.cost;
|
||
delete obj.price;
|
||
delete obj.weight;
|
||
}
|
||
|
||
// 判断渲染数据中是否存在空值，存在空值则判断新加数据
|
||
for (let key in obj) {
|
||
if (!obj[key]) {
|
||
emptyFlag = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 判断当前渲染数据是否已有数据
|
||
if (
|
||
skus &&
|
||
skus[findIndex] &&
|
||
(!skus[findIndex].id || obj.id === skus[findIndex].id) &&
|
||
valItem.value !== "" &&
|
||
!emptyFlag
|
||
) {
|
||
// 将原存在的数据放入结果中
|
||
let originSku = skus[findIndex];
|
||
obj = {
|
||
sn: obj.sn || originSku.sn,
|
||
quantity: obj.quantity || originSku.quantity,
|
||
cost: obj.cost || originSku.cost,
|
||
price: obj.price || originSku.price,
|
||
weight: obj.weight || originSku.weight,
|
||
...obj,
|
||
};
|
||
if (
|
||
originSku[valItem.name] === valItem.value ||
|
||
(obj.id && originSku.id === obj.id)
|
||
) {
|
||
obj.id = originSku.id;
|
||
}
|
||
|
||
// 视为处理完成已存在数据，将原数据索引后移1位
|
||
if (skus.length == result.length) {
|
||
findIndex++;
|
||
}
|
||
}
|
||
|
||
// 如原存在数据大于渲染数据（认为是在编辑原存在数据的规格值），且存在已存在数据，且规格值不为空。则将原数据索引后移1位
|
||
if (
|
||
skus.length > result.length &&
|
||
skus[findIndex] &&
|
||
valItem.value !== ""
|
||
) {
|
||
findIndex++;
|
||
}
|
||
|
||
obj[cloneTemp[0].name] = valItem.value;
|
||
table.push(obj);
|
||
});
|
||
});
|
||
result = [];
|
||
table.forEach((t) => {
|
||
result.push(t);
|
||
});
|
||
//清除当前循环的分组
|
||
cloneTemp.splice(0, 1);
|
||
} else {
|
||
return result;
|
||
}
|
||
return this.specIterator(result, cloneTemp, skus);
|
||
},
|
||
/** 根据分类id获取系统设置规格信息*/
|
||
Get_SkuInfoByCategory(categoryId) {
|
||
if (categoryId) {
|
||
API_GOODS.getGoodsSpecInfoSeller(categoryId).then((res) => {
|
||
if (res.length) {
|
||
res.forEach((e) => {
|
||
this.skuData.push(e.specName);
|
||
const vals = e.specValue ? e.specValue.split(",") : [];
|
||
this.skuVals.push(Array.from(new Set(vals)));
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// 判断相同数组的值
|
||
scalarArrayEquals(array1, array2) {
|
||
return (
|
||
array1.length === array2.length &&
|
||
array1.every(function (v, i) {
|
||
return v === array2[i];
|
||
})
|
||
);
|
||
},
|
||
/** 自动完成表单所需方法*/
|
||
filterMethod(value, option) {
|
||
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
|
||
},
|
||
/** 数据改变之后 抛出数据 */
|
||
updateSkuTable(row, item, type = "deafult") {
|
||
let index = row._index;
|
||
this.baseInfoForm.regeneratorSkuFlag = true;
|
||
/** 进行自定义校验 判断是否是数字（小数也能通过）重量 */
|
||
if (item === "weight") {
|
||
if (
|
||
!/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(row[item]) ||
|
||
parseInt(row[item]) < 0 ||
|
||
parseInt(row[item]) > 99999999
|
||
) {
|
||
// 校验未通过 加入错误存储列表中
|
||
this.validateError.push([index, item]);
|
||
this.validatatxt = "请输入0~99999999之间的数字值";
|
||
return;
|
||
}
|
||
} else if (item === "quantity") {
|
||
if (
|
||
!/^[0-9]\d*$/.test(row[item]) ||
|
||
parseInt(row[item]) < 0 ||
|
||
parseInt(row[item]) > 99999999
|
||
) {
|
||
// 库存
|
||
this.validateError.push([index, item]);
|
||
this.validatatxt = "请输入0~99999999之间的整数";
|
||
return;
|
||
}
|
||
} else if (item === "cost" || item === "price") {
|
||
if (
|
||
!regular.money.test(row[item]) ||
|
||
parseInt(row[item]) < 0 ||
|
||
parseInt(row[item]) > 99999999
|
||
) {
|
||
// 成本价 价格
|
||
this.validateError.push([index, item]);
|
||
this.validatatxt = "请输入0~99999999之间的价格";
|
||
return;
|
||
}
|
||
}
|
||
this.$nextTick(() => {
|
||
this.skuTableData[index][item] = row[item];
|
||
});
|
||
// this.$set(this.skuTableData,[index][item],row[item])
|
||
},
|
||
// 店内分类选择
|
||
selectTree(v) {
|
||
if (v.length > 0) {
|
||
// 转换null为""
|
||
for (let attr in v[0]) {
|
||
if (v[0][attr] == null) {
|
||
v[0][attr] = "";
|
||
}
|
||
}
|
||
let str = JSON.stringify(v[0]);
|
||
let menu = JSON.parse(str);
|
||
this.form = menu;
|
||
this.editTitle = menu.title;
|
||
}
|
||
},
|
||
// 店内分类选中
|
||
changeSelect(v) {
|
||
this.selectCount = v.length;
|
||
let ids = "";
|
||
v.forEach(function (e) {
|
||
ids += e.id + ",";
|
||
});
|
||
ids = ids.substring(0, ids.length - 1);
|
||
|
||
if (ids.length > 100) {
|
||
this.$Message.error("选择了过多的店铺分类，请谨慎选择");
|
||
}
|
||
this.baseInfoForm.storeCategoryPath = ids;
|
||
},
|
||
/** 添加商品 **/
|
||
save() {
|
||
this.submitLoading = true;
|
||
this.$refs["baseInfoForm"].validate((valid) => {
|
||
if (valid) {
|
||
if (this.baseInfoForm.salesModel === "WHOLESALE") {
|
||
for (let i = 0; i < this.wholesaleData.length; i++) {
|
||
this.checkWholesaleNum(i);
|
||
this.checkWholesalePrice(i);
|
||
this.wholesaleData[i].goodsId = this.goodsId;
|
||
}
|
||
this.baseInfoForm.wholesaleList = this.wholesaleData;
|
||
}
|
||
this.baseInfoForm.goodsId = this.goodsId;
|
||
let submit = JSON.parse(JSON.stringify(this.baseInfoForm));
|
||
if (
|
||
submit.goodsGalleryFiles &&
|
||
submit.goodsGalleryFiles.length <= 0
|
||
) {
|
||
this.submitLoading = false;
|
||
this.$Message.error("请上传商品图片");
|
||
return;
|
||
}
|
||
if (submit.templateId === "") submit.templateId = 0;
|
||
let flag = false;
|
||
let paramValue = "";
|
||
|
||
if (flag) {
|
||
this.$Message.error(paramValue + " 参数值不能为空");
|
||
this.submitLoading = false;
|
||
return;
|
||
}
|
||
let skuInfoNames = this.skuInfo.map((n) => n.name);
|
||
submit.skuList = [];
|
||
this.skuTableData.map((sku) => {
|
||
let skuCopy = {
|
||
cost: sku.cost,
|
||
price: sku.price,
|
||
quantity: sku.quantity,
|
||
sn: sku.sn,
|
||
images: sku.images,
|
||
};
|
||
if (sku.weight) {
|
||
skuCopy.weight = sku.weight;
|
||
}
|
||
if (this.baseInfoForm.weight) {
|
||
skuCopy.weight = this.baseInfoForm.weight;
|
||
}
|
||
if (sku.id) {
|
||
skuCopy.id = sku.id;
|
||
}
|
||
for (let skuInfoName of skuInfoNames) {
|
||
skuCopy[skuInfoName] = sku[skuInfoName];
|
||
}
|
||
submit.skuList.push(skuCopy);
|
||
});
|
||
if (submit.goodsGalleryFiles.length > 0) {
|
||
submit.goodsGalleryList = submit.goodsGalleryFiles.map(
|
||
(i) => i.url
|
||
);
|
||
}
|
||
/** 参数校验 **/
|
||
/* Object.keys(submit.goodsParamsList).forEach((item) => {
|
||
});*/
|
||
submit.release ? (submit.release = true) : (submit.release = false);
|
||
submit.recommend
|
||
? (submit.recommend = true)
|
||
: (submit.recommend = false);
|
||
if (this.goodsId) {
|
||
API_GOODS.editGoods(this.goodsId, submit).then((res) => {
|
||
if (res.success) {
|
||
this.submitLoading = false;
|
||
this.$router.go(-1);
|
||
} else {
|
||
this.submitLoading = false;
|
||
}
|
||
});
|
||
} else {
|
||
API_GOODS.createGoods(submit).then((res) => {
|
||
if (res.success) {
|
||
this.submitLoading = false;
|
||
this.$parent.activestep = 2;
|
||
window.scrollTo(0, 0);
|
||
} else {
|
||
this.submitLoading = false;
|
||
}
|
||
});
|
||
}
|
||
} else {
|
||
this.submitLoading = false;
|
||
|
||
this.$Message.error("还有必填项未做处理，请检查表单");
|
||
}
|
||
});
|
||
},
|
||
/** 保存为模板 */
|
||
saveToDraft() {
|
||
this.baseInfoForm.skuList = this.skuTableData;
|
||
if (this.baseInfoForm.goodsGalleryFiles.length > 0) {
|
||
this.baseInfoForm.goodsGalleryList =
|
||
this.baseInfoForm.goodsGalleryFiles.map((i) => i.url);
|
||
}
|
||
this.baseInfoForm.categoryName = [];
|
||
this.baseInfoForm.saveType = "TEMPLATE";
|
||
|
||
if (this.$route.query.draftId) {
|
||
this.baseInfoForm.id = this.$route.query.draftId;
|
||
this.$Modal.confirm({
|
||
title: "当前模板已存在",
|
||
content: "当前模板已存在，保存为新模板或替换原模板",
|
||
okText: "保存新模板",
|
||
cancelText: "替换旧模板",
|
||
closable: true,
|
||
onOk: () => {
|
||
delete this.baseInfoForm.id;
|
||
this.SAVE_DRAFT_GOODS();
|
||
return;
|
||
},
|
||
onCancel: () => {
|
||
this.SAVE_DRAFT_GOODS();
|
||
return;
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
|
||
this.$Modal.confirm({
|
||
title: "保存模板",
|
||
content: "是否确定保存",
|
||
okText: "保存",
|
||
closable: true,
|
||
onOk: () => {
|
||
this.SAVE_DRAFT_GOODS();
|
||
},
|
||
});
|
||
},
|
||
SAVE_DRAFT_GOODS() {
|
||
if (this.baseInfoForm.salesModel === "WHOLESALE") {
|
||
this.baseInfoForm.wholesaleList = this.wholesaleData;
|
||
}
|
||
// 保存模板
|
||
API_GOODS.saveDraftGoods(this.baseInfoForm).then((res) => {
|
||
if (res.success) {
|
||
this.$Message.info("保存成功！");
|
||
this.$router.push({ name: "template-goods" });
|
||
}
|
||
});
|
||
},
|
||
},
|
||
mounted() {
|
||
this.accessToken = {
|
||
accessToken: this.getStore("accessToken"),
|
||
};
|
||
// 获取物流模板
|
||
API_Shop.getShipTemplate().then((res) => {
|
||
if (res.success) {
|
||
this.logisticsTemplate = res.result;
|
||
}
|
||
});
|
||
if (this.$route.query.id || this.$route.query.draftId) {
|
||
// 编辑商品、模板
|
||
this.GET_GoodData(this.$route.query.id, this.$route.query.draftId);
|
||
} else {
|
||
// 新增商品、模板
|
||
if (this.firstData.tempId) {
|
||
// 选择模板
|
||
this.GET_GoodData("", this.firstData.tempId);
|
||
} else {
|
||
const cateId = [];
|
||
this.firstData.category.forEach((cate) => {
|
||
this.baseInfoForm.categoryName.push(cate.name);
|
||
cateId.push(cate.id);
|
||
});
|
||
this.categoryId = cateId[2];
|
||
this.baseInfoForm.categoryPath = cateId.toString();
|
||
this.baseInfoForm.goodsType = this.firstData.goodsType;
|
||
/** 获取该商城分类下 商品参数信息 */
|
||
this.GET_GoodsParams();
|
||
/** 查询品牌列表 */
|
||
this.getGoodsBrandList();
|
||
/** 查询分类绑定的规格信息 */
|
||
this.Get_SkuInfoByCategory(this.categoryId);
|
||
// 获取商品单位
|
||
this.GET_GoodsUnit();
|
||
// 获取当前店铺分类
|
||
this.GET_ShopGoodsLabel();
|
||
}
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "./addGoods.scss";
|
||
</style>
|
||
|
||
<style>
|
||
.ivu-select .ivu-select-dropdown {
|
||
overflow: hidden !important;
|
||
}
|
||
/* .tox-notifications-container{
|
||
display: none !important;
|
||
} */
|
||
</style>
|