1051 lines
31 KiB
Plaintext
1051 lines
31 KiB
Plaintext
<template>
|
|
<a-page-header
|
|
:title="isUpdate ? '编辑商品' : '新增商品'"
|
|
@back="push('/goods/index')"
|
|
>
|
|
<div class="ele-cell ele-cell-align-top">
|
|
<div class="ele-cell-content">
|
|
<a-form
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
:label-col="{ md: { span: 3 }, sm: { span: 4 }, xs: { span: 24 } }"
|
|
:wrapper-col="{
|
|
md: { span: 14 },
|
|
sm: { span: 24 },
|
|
xs: { span: 24 }
|
|
}"
|
|
>
|
|
<a-card title="基础信息" :bordered="false" class="goods-form">
|
|
<a-row :gutter="16">
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive ? { md: 24, sm: 24, xs: 24 } : { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="选择店铺" name="merchantId" v-if="!form.merchantId">
|
|
<SelectMerchant
|
|
:placeholder="`选择商户`"
|
|
class="input-item"
|
|
v-model:value="form.merchantName"
|
|
@done="chooseMerchantId"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="商品类型"
|
|
name="type"
|
|
>
|
|
<a-space>
|
|
<a-button
|
|
:type="form.type == 1 ? 'primary' : ''"
|
|
@click="onType(1)"
|
|
:ghost="form.type == 1"
|
|
>实物商品</a-button
|
|
>
|
|
<a-button
|
|
:type="form.type == 2 ? 'primary' : ''"
|
|
@click="onType(2)"
|
|
:ghost="form.type == 2"
|
|
>虚拟商品</a-button
|
|
>
|
|
</a-space>
|
|
<div class="ele-text-placeholder">
|
|
{{ form.type == 1
|
|
? `支持快递邮寄、同城配送或到店自提方式发货`
|
|
: '电子券码等，线下到店核销，无需备货' }}
|
|
</div>
|
|
</a-form-item>
|
|
<a-form-item label="商品分类" name="categoryId">
|
|
<SelectGoodsCategory
|
|
:data="data"
|
|
placeholder="请选择商品分类"
|
|
v-model:value="category"
|
|
@done="chooseGoodsCategory"
|
|
/>
|
|
<a-space style="margin-top: 10px">
|
|
<a @click="openUrl('/goods/category')">去新增</a>
|
|
</a-space>
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="商品图片和视频"
|
|
name="images">
|
|
<SelectFile
|
|
:placeholder="`请选择视频文件`"
|
|
:limit="1"
|
|
:data="images"
|
|
@done="chooseImage"
|
|
@del="onDeleteItem"
|
|
/>
|
|
<div class="ele-text-placeholder">上传视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。</div>
|
|
</a-form-item>
|
|
<a-form-item label="商品名称" name="goodsName">
|
|
<a-space style="margin-bottom: 20px">
|
|
<a-input
|
|
allow-clear
|
|
show-count
|
|
:maxlength="60"
|
|
style="width: 558px"
|
|
placeholder="请输入商品名称"
|
|
v-model:value="form.goodsName"
|
|
/>
|
|
</a-space>
|
|
</a-form-item>
|
|
<a-form-item label="商品卖点" name="comments">
|
|
<a-input
|
|
allow-clear
|
|
:maxlength="60"
|
|
style="width: 558px"
|
|
placeholder="此款商品美观大方 性价比较高 不容错过"
|
|
v-model:value="form.comments"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
<a-card title="规格售价与库存" :bordered="false" class="goods-form">
|
|
<a-form-item label="规格类型" name="specs">
|
|
<a-radio-group v-model:value="form.specs">
|
|
<a-radio :value="0">单规格</a-radio>
|
|
<a-radio :value="1">多规格</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="商品价格" name="price" v-if="form.specs == 0">
|
|
<a-input-number :placeholder="`商品价格`" style="width: 180px" v-model:value="form.price" />
|
|
<div class="ele-text-placeholder">商品的实际购买金额，最低0.01</div>
|
|
</a-form-item>
|
|
<a-form-item label="划线价格" name="salePrice" v-if="form.specs == 0">
|
|
<a-input-number :placeholder="`划线价格`" style="width: 180px" v-model:value="form.salePrice" />
|
|
<div class="ele-text-placeholder">划线价仅用于商品页展示</div>
|
|
</a-form-item>
|
|
<a-form-item label="当前库存" name="stock" v-if="form.specs == 0">
|
|
<a-input-number :placeholder="`划线价格`" style="width: 180px" v-model:value="form.stock" />
|
|
<div class="ele-text-placeholder">商品的实际库存数量，为0时用户无法下单</div>
|
|
</a-form-item>
|
|
<!-- 商品多规格 -->
|
|
<a-form-item label="商品规格" name="skuList" v-if="form.specs == 1">
|
|
<template v-for="(item, index) in specList" :key="index">
|
|
<a-card class="spec-card">
|
|
<template #title>
|
|
<span style="margin-right: 10px">{{
|
|
`属性${index + 1}`
|
|
}}</span>
|
|
<SelectSpec
|
|
placeholder="请选择属性"
|
|
:width="130"
|
|
:specDict="specDict"
|
|
:index="index"
|
|
v-model:value="specList[index].specName"
|
|
@done="changeAttr"
|
|
/>
|
|
</template>
|
|
<template #extra>
|
|
<a @click="delAttribute(index)">删除属性</a>
|
|
</template>
|
|
<!--属性列表-->
|
|
<div class="spec-list">
|
|
<template v-for="(val,valIndex) in item.valueList" :key="valIndex">
|
|
<a-tag color="#108ee9" closable @close="onClose(index,valIndex)">{{ val.specValue }}</a-tag>
|
|
</template>
|
|
<SelectSpecValue
|
|
placeholder="请选择规格值"
|
|
:width="130"
|
|
:specId="item.specId"
|
|
:index="index"
|
|
@done="changeAttrValue"
|
|
/>
|
|
</div>
|
|
</a-card>
|
|
</template>
|
|
<a-card :bordered="false" v-if="specList.length < 3">
|
|
<a @click="addAttribute"
|
|
><PlusCircleOutlined style="margin-right: 4px" />创建新属性</a
|
|
>
|
|
</a-card>
|
|
skuList: {{ skuList }}
|
|
<!-- <a-divider />-->
|
|
<!-- {{ form.goodsSkus }}-->
|
|
<a-divider />
|
|
<!-- {{ skuColumns }}-->
|
|
<!-- 生生的sku数据 -->
|
|
<div class="sku-table">
|
|
<a-table
|
|
:pagination="false"
|
|
:dataSource="skuList"
|
|
:columns="skuColumns"
|
|
:scroll="{ y: 500 }"
|
|
>
|
|
<template #bodyCell="{ record, column, index }">
|
|
<template v-if="column.key === 'line'">
|
|
{{ index + 1 }}
|
|
</template>
|
|
<template v-if="column.key === 'image'">
|
|
<SelectFile
|
|
:placeholder="`请选择商品图片`"
|
|
:limit="1"
|
|
:data="record.images || []"
|
|
:index="index"
|
|
@done="chooseImageItem"
|
|
@del="onDeleteItem"
|
|
/>
|
|
</template>
|
|
<template v-if="column.key === 'price'">
|
|
<a-input :placeholder="`商品价格`" v-model:value="skuList[index].price" />
|
|
</template>
|
|
<template v-if="column.key === 'salePrice'">
|
|
<a-input :placeholder="`市场价`" v-model:value="record.salePrice" />
|
|
</template>
|
|
<template v-if="column.key === 'stock'">
|
|
<a-input :placeholder="`库存`" v-model:value="record.stock" />
|
|
</template>
|
|
<template v-if="column.key === 'skuNo'">
|
|
<a-input :placeholder="`编码`" v-model:value="record.skuNo" />
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
<!-- {{ skuColumns }}-->
|
|
</div>
|
|
<div class="bath-set">
|
|
<!-- <h5 class="title">批量设置</h5>-->
|
|
<a-space class="list">
|
|
<a-input
|
|
:placeholder="`售卖价`"
|
|
v-model:value="bathSet.price"
|
|
/>
|
|
<a-input
|
|
:placeholder="`市场价`"
|
|
v-model:value="bathSet.salePrice"
|
|
/>
|
|
<a-input :placeholder="`库存`" v-model:value="bathSet.stock" />
|
|
<a-input
|
|
:placeholder="`规格编码`"
|
|
v-model:value="bathSet.skuNo"
|
|
/>
|
|
<a-button type="primary" @click="onBathSet">批量设置</a-button>
|
|
</a-space>
|
|
</div>
|
|
</a-form-item>
|
|
<a-form-item label="库存计算方式" name="deductStockType">
|
|
<a-radio-group v-model:value="form.deductStockType">
|
|
<a-radio :value="10">下单减库存</a-radio>
|
|
<a-radio :value="20">付款减库存</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-card>
|
|
|
|
<a-card title="商品详情" :bordered="false" class="goods-form">
|
|
<!-- 编辑器 -->
|
|
<tinymce-editor
|
|
ref="editorRef"
|
|
class="content"
|
|
v-model:value="content"
|
|
:disabled="disabled"
|
|
:init="config"
|
|
placeholder="图片直接粘贴自动上传"
|
|
@paste="onPaste"
|
|
/>
|
|
<div style="margin-top: 20px">
|
|
<SelectFile
|
|
:placeholder="`请选择视频文件`"
|
|
:limit="9"
|
|
:data="files"
|
|
@done="chooseFile"
|
|
@del="onDeleteFile"
|
|
/>
|
|
</div>
|
|
<div class="ele-text-placeholder"
|
|
>最多上传20个素材，拖拽可进行排序，单张图片需限制在10M以内</div
|
|
>
|
|
</a-card>
|
|
|
|
<a-card title="商品参数" :bordered="false" class="goods-form" />
|
|
|
|
<a-card title="更多设置" :bordered="false" class="goods-form" />
|
|
<a-card :bordered="false" class="goods-form">
|
|
<a-button type="primary" block size="large" @click="save">保存</a-button>
|
|
</a-card>
|
|
|
|
|
|
<div class="body-bottom"></div>
|
|
|
|
|
|
<a-card
|
|
:bordered="false"
|
|
class="goods-form"
|
|
style="position: fixed; bottom: 0; opacity: 0.9"
|
|
>
|
|
<!-- <div style="width: 100px">-->
|
|
<!-- <a-button block danger size="large" @click="save"-->
|
|
<!-- >删除</a-button-->
|
|
<!-- >-->
|
|
<!-- </div>-->
|
|
<div style="width: 100px">
|
|
<a-button type="primary" block size="large" @click="save">保存</a-button>
|
|
</div>
|
|
<!-- <div style="width: 100px">-->
|
|
<!-- <a-button type="primary" block size="large" @click="save"-->
|
|
<!-- >上架</a-button-->
|
|
<!-- >-->
|
|
<!-- </div>-->
|
|
</a-card>
|
|
</a-form>
|
|
</div>
|
|
<!-- 载入模拟器 -->
|
|
<Simulator :form="form" />
|
|
</div>
|
|
</a-page-header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
// 表单数据
|
|
import useFormData from '@/utils/use-form-data';
|
|
import { reactive, ref, unref, watch } from 'vue';
|
|
import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
|
|
import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
|
|
import { Form, message } from 'ant-design-vue';
|
|
import { getDictionaryOptions, getMerchantId, openUrl } from "@/utils/common";
|
|
import { addGoods, updateGoods } from '@/api/shop/goods';
|
|
import { useRouter } from 'vue-router';
|
|
import { useThemeStore } from '@/store/modules/theme';
|
|
import { storeToRefs } from 'pinia';
|
|
import { BathSet, Goods } from '@/api/shop/goods/model';
|
|
import {PlusCircleOutlined} from '@ant-design/icons-vue';
|
|
import { getGoods } from '@/api/shop/goods';
|
|
import { listGoodsCategory } from '@/api/shop/goodsCategory';
|
|
import { FileRecord } from '@/api/system/file/model';
|
|
import {toTreeData, uuid} from 'ele-admin-pro';
|
|
import { ArticleCategory } from '@/api/cms/category/model';
|
|
import TinymceEditor from "@/components/TinymceEditor/index.vue";
|
|
import {uploadFile, uploadOss} from "@/api/system/file";
|
|
import {ColumnItem} from "ele-admin-pro/es/ele-pro-table/types";
|
|
import {listSpec} from '@/api/shop/spec';
|
|
import {Spec} from "@/api/shop/spec/model";
|
|
import { getMerchantName } from "@/utils/merchant";
|
|
import router from "@/router";
|
|
import { Merchant } from "@/api/shop/merchant/model";
|
|
|
|
const { currentRoute } = useRouter();
|
|
// 是否开启响应式布局
|
|
const themeStore = useThemeStore();
|
|
const { styleResponsive } = storeToRefs(themeStore);
|
|
const { push } = useRouter();
|
|
const useForm = Form.useForm;
|
|
const fileList = ref<any[]>([]);
|
|
const files = ref<ItemType[]>([]);
|
|
const imgList = ref<any[]>([]);
|
|
const specList = ref<any[]>([]);
|
|
const skuList = ref<any[]>([]);
|
|
const specDict = ref<any[]>([]);
|
|
const disabled = ref(false);
|
|
const addColumns = ref<ColumnItem[]>([]);
|
|
// 是否是修改
|
|
const isUpdate = ref(false);
|
|
const content = ref('');
|
|
const loading = ref(false);
|
|
const formRef = ref<FormInstance | null>(null);
|
|
const images = ref<ItemType[]>([]);
|
|
const category = ref<string[]>([]);
|
|
// 树形数据
|
|
const data = ref<ArticleCategory[]>([]);
|
|
// 树展开的key
|
|
const expandedRowKeys = ref<number[]>([]);
|
|
// 树选中的key
|
|
const selectedRowKeys = ref<number[]>([]);
|
|
// 选中数据
|
|
const current = ref<ArticleCategory | any>(null);
|
|
// 字典数据
|
|
const goodsAttr = getDictionaryOptions('goodsAttr');
|
|
const index = ref(0);
|
|
|
|
const { form, assignFields } = useFormData<Goods>({
|
|
goodsId: undefined,
|
|
type: 1,
|
|
goodsName: '',
|
|
image: '',
|
|
content: '',
|
|
code: '',
|
|
categoryId: undefined,
|
|
categoryName: '',
|
|
categoryParent: '',
|
|
categoryChildren: '',
|
|
specs: 0,
|
|
goodsSkus: [],
|
|
goodsSpecs: [],
|
|
position: undefined,
|
|
price: undefined,
|
|
salePrice: undefined,
|
|
sales: undefined,
|
|
stock: 1000,
|
|
deductStockType: 20,
|
|
files: '',
|
|
comments: '',
|
|
recommend: 0,
|
|
sortNumber: undefined,
|
|
status: undefined,
|
|
merchantName: '',
|
|
merchantId: getMerchantId()
|
|
});
|
|
const skuColumns = ref<ColumnItem[]>([
|
|
{
|
|
dataIndex: 'line',
|
|
key: 'line'
|
|
}
|
|
]);
|
|
const defaultColumns = ref<ColumnItem[]>([
|
|
{
|
|
title: '预览图',
|
|
dataIndex: 'image',
|
|
width: 120,
|
|
align: 'center',
|
|
key: 'image'
|
|
},
|
|
{
|
|
title: '商品价格',
|
|
dataIndex: 'price',
|
|
width: 120,
|
|
align: 'center',
|
|
key: 'price'
|
|
},
|
|
{
|
|
title: '划线价格',
|
|
dataIndex: 'salePrice',
|
|
width: 120,
|
|
align: 'center',
|
|
key: 'salePrice'
|
|
},
|
|
{
|
|
title: '库存数量',
|
|
dataIndex: 'stock',
|
|
width: 120,
|
|
align: 'center',
|
|
key: 'stock'
|
|
},
|
|
{
|
|
title: '规格编码',
|
|
dataIndex: 'skuNo',
|
|
width: 120,
|
|
align: 'center',
|
|
key: 'skuNo'
|
|
}
|
|
]);
|
|
|
|
const bathSet = ref<BathSet>({});
|
|
|
|
// 表单验证规则
|
|
const rules = reactive({
|
|
type: [
|
|
{
|
|
required: true,
|
|
message: '请选择商品类型',
|
|
type: 'number',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
specs: [
|
|
{
|
|
required: true,
|
|
message: '请选择规格类型',
|
|
type: 'number',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
price: [
|
|
{
|
|
required: true,
|
|
message: '请填写商品价格',
|
|
type: 'number',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
stock: [
|
|
{
|
|
required: true,
|
|
message: '请填写商品库存',
|
|
type: 'number',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
merchantId: [
|
|
{
|
|
required: true,
|
|
message: '请选择店铺',
|
|
type: 'number',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
categoryId: [
|
|
{
|
|
required: true,
|
|
type: 'string',
|
|
message: '选择商品分类',
|
|
trigger: 'blur',
|
|
validator: async (_rule: RuleObject, value: string) => {
|
|
if (!form.categoryId) {
|
|
return Promise.reject('选择商品分类');
|
|
}
|
|
return Promise.resolve();
|
|
}
|
|
}
|
|
],
|
|
goodsName: [
|
|
{
|
|
required: true,
|
|
message: '请选择商品名称',
|
|
type: 'string',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
sortNumber: [
|
|
{
|
|
required: true,
|
|
message: '请输入排序号',
|
|
type: 'number',
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
});
|
|
|
|
const onType = (index: number) => {
|
|
form.type = index;
|
|
};
|
|
|
|
const addAttribute = () => {
|
|
specList.value.push({
|
|
specId: 0,
|
|
specName: undefined,
|
|
valueList: []
|
|
})
|
|
};
|
|
|
|
const delAttribute = (index) => {
|
|
specList.value.splice(index,1);
|
|
skuColumns.value.splice(index,1);
|
|
};
|
|
|
|
const changeAttr = (item: Spec,index: number) => {
|
|
// 排重（未做）
|
|
specList.value[index].specId = item.specId;
|
|
specList.value[index].specName = item.value;
|
|
specList.value[index].valueList = [];
|
|
};
|
|
|
|
const changeAttrValue = (item: any, index: number) => {
|
|
specList.value[index].specId = item.specId;
|
|
// 添加属性
|
|
const length = specList.value[index].valueList.length;
|
|
specList.value[index].valueList.push({
|
|
specValueId: item.specValueId,
|
|
specValue: item.value,
|
|
specId: item.specId
|
|
})
|
|
// 组装表头
|
|
const arr = ref<any>([]);
|
|
specList.value.map((d) => {
|
|
arr.value.push({
|
|
title: d.specName,
|
|
dataIndex: `specValue${length}`,
|
|
key: `specValue${length}`,
|
|
width: 70,
|
|
align: 'center',
|
|
})
|
|
})
|
|
// 组装skuList
|
|
setTimeout(() => {
|
|
generateSku();
|
|
},200);
|
|
}
|
|
|
|
// 生成sku
|
|
const generateSku = () => {
|
|
skuColumns.value = [
|
|
{
|
|
dataIndex: 'line',
|
|
width: 50,
|
|
key: 'line'
|
|
}
|
|
];
|
|
// 根据选中的sku生成表格列
|
|
specList.value.forEach((item,index) => {
|
|
skuColumns.value.push({
|
|
title: item.specName,
|
|
dataIndex: `specValue${index}`,
|
|
key: `specValue${index}`,
|
|
align: 'center',
|
|
});
|
|
});
|
|
|
|
// 增加额外的列
|
|
const dataList = [
|
|
{
|
|
title: '商品图片',
|
|
dataIndex: 'image',
|
|
width: 120,
|
|
align: 'center',
|
|
key: 'image',
|
|
},
|
|
{
|
|
title: '价格',
|
|
dataIndex: 'price',
|
|
key: 'price',
|
|
width: 120,
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: '市场价',
|
|
dataIndex: 'salePrice',
|
|
width: 120,
|
|
align: 'center',
|
|
key: 'salePrice'
|
|
},
|
|
{
|
|
title: '库存',
|
|
dataIndex: 'stock',
|
|
width: 120,
|
|
align: 'center',
|
|
key: 'stock'
|
|
},
|
|
{
|
|
title: 'SKU编码',
|
|
dataIndex: 'skuNo',
|
|
width: 120,
|
|
align: 'center',
|
|
key: 'skuNo'
|
|
}
|
|
];
|
|
|
|
dataList.forEach((item) => {
|
|
skuColumns.value.push({
|
|
title: item.title,
|
|
dataIndex: item.key,
|
|
key: item.key,
|
|
align: 'center',
|
|
});
|
|
});
|
|
|
|
// 组合规格值
|
|
const attrList = [];
|
|
specList.value.forEach((item, index) => {
|
|
attrList.push([]);
|
|
const propType = `specValue${index}`;
|
|
item.valueList.forEach((subItem) => {
|
|
attrList[index].push({
|
|
propValue: subItem.specValue,
|
|
propCode: null,
|
|
propType: propType
|
|
});
|
|
});
|
|
});
|
|
const attrs = differentCombinations(attrList);
|
|
|
|
// 将规格值加入到表格列中
|
|
attrs.forEach((itemList, index) => {
|
|
// skuList.value[index] = [];
|
|
itemList.forEach((subItem) => {
|
|
console.log(index)
|
|
console.log(subItem);
|
|
const key = subItem.propType;
|
|
const value = subItem.propValue;
|
|
skuList.value[index][key] = value;
|
|
skuList.value[index]['pirce'] = 0.1
|
|
});
|
|
});
|
|
};
|
|
|
|
// 生成sku函数
|
|
const differentCombinations = function (param) {
|
|
return param.reduce(
|
|
(a, b) => {
|
|
const ret = [];
|
|
a.forEach((i) => b.forEach((j) => ret.push(i.concat([j]))));
|
|
return ret;
|
|
},
|
|
[[]]
|
|
);
|
|
};
|
|
|
|
const onClose = (index: number, valIndex: number) => {
|
|
specList.value[index].valueList.splice(valIndex,1);
|
|
}
|
|
|
|
|
|
const chooseImage = (data: FileRecord) => {
|
|
images.value.push({
|
|
uid: data.id,
|
|
url: data.path,
|
|
status: 'done'
|
|
});
|
|
form.image = data.url;
|
|
};
|
|
|
|
const chooseImageItem = (data: FileRecord) => {
|
|
const index = data?.index;
|
|
skuList.value[index].images = []
|
|
skuList.value[index].images.push({
|
|
uid: data.id,
|
|
url: data.path,
|
|
status: 'done'
|
|
});
|
|
skuList.value[index].image = data.path;
|
|
};
|
|
|
|
const onDeleteItem = (index: number) => {
|
|
images.value.splice(index, 1);
|
|
};
|
|
|
|
const chooseFile = (data: FileRecord) => {
|
|
files.value.push({
|
|
uid: data.id,
|
|
url: data.path,
|
|
status: 'done'
|
|
});
|
|
};
|
|
|
|
const onDeleteFile = (index: number) => {
|
|
files.value.splice(index, 1);
|
|
};
|
|
|
|
const chooseGoodsCategory = (item,value) => {
|
|
console.log(item);
|
|
console.log(value);
|
|
form.categoryId = value[1].value;
|
|
form.categoryParent = value[0].label;
|
|
form.categoryChildren = value[1].label;
|
|
}
|
|
|
|
/* 搜索 */
|
|
const chooseMerchantId = (item: Merchant) => {
|
|
form.merchantName = item.merchantName;
|
|
form.merchantId = item.merchantId;
|
|
};
|
|
|
|
const onBathSet = () => {
|
|
skuList.value.map(d => {
|
|
console.log(d);
|
|
d.price = bathSet.value.price;
|
|
d.salePrice = bathSet.value.salePrice;
|
|
d.stock = bathSet.value.stock;
|
|
d.skuNo = bathSet.value.skuNo;
|
|
})
|
|
}
|
|
|
|
|
|
const editorRef = ref<InstanceType<typeof TinymceEditor> | null>(null);
|
|
const config = ref({
|
|
height: 240,
|
|
plugins: 'code preview fullscreen searchreplace save autosave link autolink image media table codesample lists advlist charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
|
|
toolbar: false,
|
|
images_upload_handler: (blobInfo, success, error) => {
|
|
const file = blobInfo.blob();
|
|
const formData = new FormData();
|
|
formData.append('file', file, file.name);
|
|
uploadOss(file).then(res => {
|
|
success(res.path)
|
|
}).catch((msg) => {
|
|
error(msg);
|
|
})
|
|
},
|
|
});
|
|
|
|
/* 粘贴图片上传服务器并插入编辑器 */
|
|
const onPaste = (e) => {
|
|
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
|
|
let hasFile = false;
|
|
for (let i = 0; i < items.length; i++) {
|
|
if (items[i].type.indexOf('image') !== -1) {
|
|
let file = items[i].getAsFile();
|
|
const item: ItemType = {
|
|
file,
|
|
uid: (file as any).lastModified,
|
|
name: file.name
|
|
};
|
|
uploadFile(<File>item.file)
|
|
.then((result) => {
|
|
const addPath = `<p><img class="content-img" src="${result.url}"></p>`;
|
|
content.value = content.value + addPath
|
|
})
|
|
.catch((e) => {
|
|
message.error(e.message);
|
|
});
|
|
hasFile = true;
|
|
}
|
|
}
|
|
if (hasFile) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
const reload = () => {
|
|
// 读取商品分类
|
|
listGoodsCategory()
|
|
.then((list) => {
|
|
loading.value = false;
|
|
const eks: number[] = [];
|
|
list.forEach((d) => {
|
|
d.key = d.categoryId;
|
|
d.value = d.categoryId;
|
|
if (typeof d.categoryId === 'number') {
|
|
eks.push(d.categoryId);
|
|
}
|
|
});
|
|
expandedRowKeys.value = eks;
|
|
data.value = toTreeData({
|
|
data: list.map((d) => {
|
|
d.disabled = d.type != 0;
|
|
return d;
|
|
}),
|
|
idField: 'categoryId',
|
|
parentIdField: 'parentId'
|
|
});
|
|
if (list.length) {
|
|
if (typeof list[0].categoryId === 'number') {
|
|
selectedRowKeys.value = [list[0].categoryId];
|
|
}
|
|
current.value = list[0];
|
|
} else {
|
|
selectedRowKeys.value = [];
|
|
current.value = null;
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
loading.value = false;
|
|
message.error(e.message);
|
|
});
|
|
// 规格列表
|
|
listSpec({}).then(list => {
|
|
specDict.value = list.map((d,i) => {
|
|
return {
|
|
specId: d.specId,
|
|
name: d.specName,
|
|
value: d.specName,
|
|
<<<<<<< HEAD
|
|
list: d.specValues?.map(v => {
|
|
=======
|
|
list: d.specValue?.map(v => {
|
|
>>>>>>> origin/master
|
|
return {
|
|
specId: v.specId,
|
|
specValueId: v.specValueId,
|
|
name: v.specValue,
|
|
value: v.specValue
|
|
}
|
|
})
|
|
};
|
|
})
|
|
})
|
|
// 读取商品信息
|
|
if (form.goodsId) {
|
|
images.value = [];
|
|
files.value = [];
|
|
category.value = [];
|
|
content.value = '';
|
|
getGoods(form.goodsId).then((data) => {
|
|
assignFields(data);
|
|
if (data.image) {
|
|
const arr = JSON.parse(data.image);
|
|
arr.map((img) => {
|
|
images.value.push({
|
|
uid: uuid(),
|
|
url: img,
|
|
status: 'done'
|
|
});
|
|
});
|
|
}
|
|
if (data.files) {
|
|
const arr = JSON.parse(data.files);
|
|
arr.map((img) => {
|
|
files.value.push({
|
|
uid: uuid(),
|
|
url: img,
|
|
status: 'done'
|
|
});
|
|
});
|
|
}
|
|
if(data.content){
|
|
content.value = data.content;
|
|
}
|
|
if(data.goodsSpecs){
|
|
specList.value = data.goodsSpecs.map(d => {
|
|
d.valueList = [];
|
|
const split = d.specValues?.split(',');
|
|
split?.map(text => {
|
|
d.valueList?.push({
|
|
specValue: text
|
|
})
|
|
})
|
|
return d;
|
|
});
|
|
}
|
|
|
|
setTimeout(() => {
|
|
if(data.categoryParent){
|
|
console.log(category.value);
|
|
category.value.push(data.categoryParent);
|
|
}
|
|
if(data.categoryChildren){
|
|
category.value.push(data.categoryChildren);
|
|
}
|
|
if(data.goodsSkus){
|
|
skuList.value = data.goodsSkus;
|
|
generateSku();
|
|
}
|
|
},300)
|
|
});
|
|
}
|
|
};
|
|
|
|
const { validate, resetFields, validateInfos } = useForm(form, rules);
|
|
|
|
/* 保存编辑 */
|
|
const save = () => {
|
|
if (!formRef.value) {
|
|
return;
|
|
}
|
|
formRef.value
|
|
.validate()
|
|
.then(() => {
|
|
loading.value = true;
|
|
images.value.map((d) => {
|
|
imgList.value.push(d.url);
|
|
});
|
|
files.value.map((d) => {
|
|
fileList.value.push(d.url);
|
|
});
|
|
skuList.value.map(d => {
|
|
d.images = undefined
|
|
})
|
|
if(getMerchantId()){
|
|
form.merchantId = getMerchantId();
|
|
form.merchantName = getMerchantName();
|
|
}
|
|
const formData = {
|
|
...form,
|
|
content: content.value,
|
|
image: JSON.stringify(imgList.value),
|
|
files: JSON.stringify(fileList.value),
|
|
goodsSpecs: specList.value,
|
|
goodsSkus: skuList.value
|
|
};
|
|
const saveOrUpdate = isUpdate.value ? updateGoods : addGoods;
|
|
saveOrUpdate(formData)
|
|
.then((msg) => {
|
|
loading.value = false;
|
|
imgList.value = []
|
|
fileList.value = []
|
|
category.value = []
|
|
resetFields();
|
|
message.success(msg);
|
|
setTimeout(() => {
|
|
router.go(-1)
|
|
},1000)
|
|
})
|
|
.catch((e) => {
|
|
loading.value = false;
|
|
message.error(e.message);
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
};
|
|
|
|
watch(
|
|
currentRoute,
|
|
(route) => {
|
|
const { query } = unref(route);
|
|
const { goodsId } = query;
|
|
if (goodsId) {
|
|
form.goodsId = Number(goodsId);
|
|
isUpdate.value = true;
|
|
reload();
|
|
} else {
|
|
isUpdate.value = false;
|
|
imgList.value = []
|
|
fileList.value = []
|
|
// images.value = [];
|
|
// skuList.value = [];
|
|
// specList.value = [];
|
|
// category.value = [];
|
|
resetFields();
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'GoodsAdd'
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.goods-form {
|
|
width: 1020px;
|
|
margin-bottom: 10px;
|
|
.spec-card {
|
|
margin-top: 20px;
|
|
background-color: #f8fcff;
|
|
.spec-list {
|
|
margin-left: 52px;
|
|
.spec-value-list {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
.image {
|
|
margin-top: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.body-bottom {
|
|
height: 100px;
|
|
}
|
|
.bath-set {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 16px;
|
|
.list {
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
display: flex;
|
|
}
|
|
}
|
|
.sku-table {
|
|
.goods-list {
|
|
.head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #eeeeee;
|
|
div {
|
|
padding: 6px;
|
|
width: 25%;
|
|
}
|
|
}
|
|
.table-td {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
div {
|
|
width: 25%;
|
|
padding: 6px;
|
|
}
|
|
}
|
|
}
|
|
.desc {
|
|
margin-top: 20px;
|
|
padding: 10px 0;
|
|
}
|
|
}
|
|
.preview-ui {
|
|
position: fixed;
|
|
top: 155px;
|
|
right: 30px;
|
|
background: url('@/assets/img/app-ui.png');
|
|
background-repeat: no-repeat;
|
|
background-position: top;
|
|
background-size: 100%;
|
|
width: 390px;
|
|
height: 844px;
|
|
}
|
|
.ele-text-placeholder{
|
|
line-height: 2em;
|
|
}
|
|
</style>
|