code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-22 19:05:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(商品参数): 新增参数管理功能并优化相关页面

Browse Source 
- 新增参数编辑页面，支持参数名称、必填、索引等属性配置
- 优化参数列表页面，增加搜索和分页功能
- 重构商品发布页面的参数展示逻辑
- 移除商品模板相关功能
- 优化品牌管理页面的分类关联功能
- 调整商品详情页参数展示样式
This commit is contained in:
pikachu1995@126.com
2025-12-22 14:38:52 +08:00
parent 8a0f5ff120
commit b37e12b7a7
9 changed files with 1065 additions and 778 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
buyer/src/components/goodsDetail/ShowGoodsDetail.vue
View File

@@ -87,14 +87,12 @@
</div>
</TabPane>
<TabPane label="商品参数">
<template v-if="detail.goodsParamsDTOList && detail.goodsParamsDTOList.length">
<div class="goods-params" style="height:inherit;" v-for="item in detail.goodsParamsDTOList" :key="item.groupId">
<span class="ml_10">{{item.groupName}}</span>
<table class="mb_10" cellpadding='0' cellspacing="0" >
<tr v-for="param in item.goodsParamsItemDTOList" :key="param.paramId">
<td style="text-align: center">{{param.paramName}}</td><td>{{param.paramValue}}</td>
</tr>
</table>
<template v-if="goodsParamsList.length">
<div class="item-param-container">
<div class="item-param-box" v-for="param in goodsParamsList" :key="param.paramId || param.paramName">
<span class="item-param-title">{{ param.paramName }}：</span>
<span class="item-param-content">{{ param.paramValue || '-' }}</span>
</div>
</div>
</template>
<div v-else>暂无商品参数</div>
@@ -134,6 +132,29 @@ export default {
// 商品详情
skuDetail () {
return this.detail.data;
},
goodsParamsList () {
const list = this.detail && Array.isArray(this.detail.goodsParamsDTOList) ? this.detail.goodsParamsDTOList : [];
const flat = [];
list.forEach((item) => {
if (!item) return;
if (Array.isArray(item.goodsParamsItemDTOList)) {
flat.push(...item.goodsParamsItemDTOList);
} else {
flat.push(item);
}
});
const cleaned = flat.filter((p) => p && (p.paramName || p.paramId));
const hasSort = cleaned.some((p) => p && p.sort !== undefined && p.sort !== null);
if (!hasSort) return cleaned;
return cleaned.slice().sort((a, b) => {
const sa = Number(a && a.sort) || 0;
const sb = Number(b && b.sort) || 0;
return sa - sb;
});
}
},
methods: {
@@ -336,14 +357,12 @@ export default {
/************* 商品参数 *************/
.item-param-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
flex-direction: column;
}
.item-param-box {
padding: 5px;
padding-left: 30px;
width: 240px;
width: 100%;
height: 36px;
font-size: 14px;
}

39
manager/src/api/goods.js
View File

@@ -32,6 +32,26 @@ export const getCategoryBrandListData = (category_id, params) => {
export const saveCategoryBrand = (category_id, params) => {
return postRequest(`/goods/categoryBrand/${category_id}`, params)
}
// 根据品牌id获取关联分类
export const getBrandCategoryListData = (brand_id, params) => {
return getRequest(`/goods/categoryBrand/${brand_id}`, params)
}
// 保存品牌分类关联
export const saveBrandCategory = (brand_id, categoryIds) => {
return postRequest(`/goods/categoryBrand/${brand_id}`, categoryIds, {
"Content-Type": "application/json"
})
}
export const getParameterCategoryListData = (parameter_id, params) => {
return getRequest(`/goods/parameters/category/${parameter_id}`, params)
}
export const saveParameterCategory = (parameter_id, categoryIds) => {
return postRequest(`/goods/parameters/category/${parameter_id}`, categoryIds, {
"Content-Type": "application/json"
})
}
//保存获取关联规格
export const saveCategorySpec = (category_id, params) => {
return postRequest(`/goods/categorySpec/${category_id}`, params)
@@ -140,17 +160,28 @@ export const getCategoryParamsListData = (id, params) => {
return getRequest(`/goods/categoryParameters/${id}`, params)
}
// 参数组分页列表
export const getCategoryParametersGroupPage = (params) => {
return getRequest(`/goods/categoryParameters`, params)
}
//查询商品绑定参数信息
export const getCategoryParamsByGoodsId = (goodsId, categoryId) => {
return getRequest(`/goods/parameters/${goodsId}/${categoryId}`)
}
export const getGoodsParamsPage = (params) => {
return getRequest(`/goods/parameters`, params)
}
export const getGoodsParamsDetail = (id, params) => {
return getRequest(`/goods/parameters/${id}`, params)
}
//保存参数
export const insertGoodsParams = (params) => {
return postRequest('/goods/parameters', params)
export const insertGoodsParams = (params, headers) => {
return postRequest('/goods/parameters', params, headers)
}
//更新参数
export const updateGoodsParams = (params) => {
return putRequest('/goods/parameters', params)
export const updateGoodsParams = (params, headers) => {
return putRequest('/goods/parameters', params, headers)
}
//删除参数
export const deleteParams = (id, params) => {

6
manager/src/router/router.js
View File

@@ -97,6 +97,12 @@ export const otherRouter = {
name: "goods-parameter",
component: () => import("@/views/goods/goods-manage/parameter.vue")
},
{
path: "goods-parameter-edit",
title: "商品参数维护",
name: "goods-parameter-edit",
component: () => import("@/views/goods/goods-manage/parameter-edit.vue")
},
{
path: "goods-spec",
title: "商品参数",

263
manager/src/views/goods/goods-manage/brand.vue
View File

@@ -26,7 +26,14 @@
<Input v-model="form.name" clearable style="width: 100%"/>
</FormItem>
<FormItem label="品牌图标" prop="logo">
<upload-pic-input v-model="form.logo" style="width: 100%"></upload-pic-input>
<div style="display: flex; align-items: center; gap: 12px;">
<img
:src="form.logo || defaultPic"
alt="品牌图标"
style="width: 80px; height: 60px; object-fit: contain; border: 1px solid #dcdee2; border-radius: 4px; background: #fff;"
/>
<Button type="text" @click="openLogoPicker">修改</Button>
</div>
</FormItem>
</Form>
<div slot="footer">
@@ -34,6 +41,34 @@
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
</div>
</Modal>
<Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
</Modal>
<Modal
:title="categoryModalTitle"
v-model="categoryModalVisible"
:mask-closable="false"
:width="700"
>
<div style="position: relative; max-height: 520px; overflow: auto;">
<Spin size="large" fix v-if="categoryTreeLoading"></Spin>
<Tree
ref="categoryTree"
:key="categoryTreeKey"
:data="categoryTreeData"
show-checkbox
@on-check-change="onCategoryTreeCheckChange"
></Tree>
</div>
<div slot="footer">
<Button type="text" @click="categoryModalVisible = false">取消</Button>
<Button type="primary" :loading="categorySubmitLoading" @click="submitBrandCategory"
>提交</Button
>
</div>
</Modal>
</div>
</template>
@@ -44,22 +79,35 @@ import {
updateBrand,
disableBrand,
delBrand,
getCategoryTree,
getBrandCategoryListData,
saveBrandCategory,
} from "@/api/goods";
import uploadPicInput from "@/components/lili/upload-pic-input";
import ossManage from "@/views/sys/oss-manage/ossManage";
import {regular} from "@/utils";
export default {
name: "brand",
components: {
uploadPicInput
ossManage
},
data() {
return {
defaultPic: require("@/assets/default.png"),
loading: true, // 表单加载状态
modalType: 0, // 添加或编辑标识
modalVisible: false, // 添加或编辑显示
modalTitle: "", // 添加或编辑标题
picModelFlag: false, // 图片选择器
categoryModalVisible: false,
categoryModalTitle: "关联分类",
categoryTreeLoading: false,
categoryTreeData: [],
categoryTreeKey: 0,
categorySubmitLoading: false,
currentBrandId: "",
selectedCategoryIds: [],
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
@@ -118,11 +166,24 @@ export default {
key: "deleteFlag",
align: "left",
render: (h, params) => {
if (params.row.deleteFlag == 0) {
return h("Tag", {props: {color: "green",},}, "启用");
} else if (params.row.deleteFlag == 1) {
return h("Tag", {props: {color: "volcano",},}, "禁用");
}
return h(
"i-switch",
{
props: {
value: params.row.deleteFlag == 0,
size: "large",
},
on: {
"on-change": (checked) => {
this.handleStatusSwitchChange(params.row, checked);
},
},
},
[
h("span", { slot: "open" }, "启用"),
h("span", { slot: "close" }, "禁用"),
]
);
},
filters: [
{
@@ -146,48 +207,10 @@ export default {
{
title: "操作",
key: "action",
width: 180,
width: 210,
align: "center",
fixed: "right",
render: (h, params) => {
let enableOrDisable = "";
if (params.row.deleteFlag == 0) {
enableOrDisable = h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
marginRight: "5px",
},
on: {
click: () => {
this.disable(params.row);
},
},
},
"禁用"
);
} else {
enableOrDisable = h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
marginRight: "5px",
},
on: {
click: () => {
this.enable(params.row);
},
},
},
"启用"
);
}
return h("div", [
h(
"a",
@@ -196,7 +219,6 @@ export default {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
marginRight: "5px",
},
on: {
click: () => {
@@ -211,7 +233,22 @@ export default {
{ style: { margin: "0 8px", color: "#dcdee2" } },
"|"
),
enableOrDisable,
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.openCategoryModal(params.row);
},
},
},
"关联分类"
),
h(
"span",
{ style: { margin: "0 8px", color: "#dcdee2" } },
@@ -242,6 +279,100 @@ export default {
};
},
methods: {
openLogoPicker() {
this.$refs.ossManage.selectImage = true;
this.picModelFlag = true;
},
callbackSelected(val) {
this.picModelFlag = false;
this.form.logo = val.url;
},
buildCategoryTreeNodes(list, selectedSet) {
if (!Array.isArray(list) || list.length === 0) return [];
return list.map((item) => {
const children = this.buildCategoryTreeNodes(item.children || [], selectedSet);
return {
id: item.id,
title: item.name,
expand: true,
checked: selectedSet.has(item.id),
children,
};
});
},
async openCategoryModal(row) {
this.currentBrandId = row.id;
this.categoryModalTitle = "关联分类 - " + (row.name || "");
this.categoryModalVisible = true;
this.categoryTreeLoading = true;
this.categoryTreeKey += 1;
this.categoryTreeData = [];
this.selectedCategoryIds = [];
try {
const [treeRes, bindRes] = await Promise.all([
getCategoryTree(),
getBrandCategoryListData(row.id),
]);
const selectedIds = Array.isArray(bindRes?.result)
? bindRes.result
.map((x) => (typeof x === "string" ? x : x && x.id))
.filter(Boolean)
: [];
this.selectedCategoryIds = selectedIds;
const selectedSet = new Set(selectedIds);
this.categoryTreeData = treeRes && treeRes.success
? this.buildCategoryTreeNodes(treeRes.result || [], selectedSet)
: [];
} finally {
this.categoryTreeLoading = false;
}
},
onCategoryTreeCheckChange(checkedNodes) {
if (!Array.isArray(checkedNodes)) {
this.selectedCategoryIds = [];
return;
}
this.selectedCategoryIds = checkedNodes
.map((node) => node && node.id)
.filter(Boolean);
},
submitBrandCategory() {
if (!this.currentBrandId) return;
this.categorySubmitLoading = true;
saveBrandCategory(
this.currentBrandId,
(this.selectedCategoryIds || []).map((id) => String(id))
).then((res) => {
this.categorySubmitLoading = false;
if (res && res.success) {
this.$Message.success("操作成功");
this.categoryModalVisible = false;
return;
}
}).catch(() => {
this.categorySubmitLoading = false;
});
},
handleStatusSwitchChange(row, checked) {
const disable = !checked;
this.$Modal.confirm({
title: disable ? "确认禁用" : "确认启用",
content: "您确认要" + (disable ? "禁用" : "启用") + "品牌 " + row.name + " ?",
loading: true,
onOk: () => {
disableBrand(row.id, { disable }).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
}
this.getDataList();
});
},
onCancel: () => {
this.$nextTick(() => this.$forceUpdate());
},
});
},
// 删除品牌
async delBrand(id) {
let res = await delBrand(id);
@@ -337,40 +468,6 @@ export default {
this.form = data;
this.modalVisible = true;
},
// 启用品牌
enable(v) {
this.$Modal.confirm({
title: "确认启用",
content: "您确认要启用品牌 " + v.name + " ?",
loading: true,
onOk: () => {
disableBrand(v.id, {disable: false}).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
// 禁用
disable(v) {
this.$Modal.confirm({
title: "确认禁用",
content: "您确认要禁用品牌 " + v.name + " ?",
loading: true,
onOk: () => {
disableBrand(v.id, {disable: true}).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
}
});
},
});
},
},
mounted() {
this.init();

113
manager/src/views/goods/goods-manage/category.vue
View File

@@ -14,32 +14,14 @@
:columns="columns"
>
<template slot="action" slot-scope="scope">
<Dropdown v-show="scope.row.level == 2" trigger="click">
<a class="ops-link">
绑定
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem @click.native="brandOperation(scope.row)">编辑绑定品牌</DropdownItem>
<DropdownItem @click.native="specOperation(scope.row)">编辑绑定规格</DropdownItem>
<DropdownItem @click.native="parameterOperation(scope.row)">编辑绑定参数</DropdownItem>
</DropdownMenu>
</Dropdown>
<span class="ops-sep">|</span>
<Dropdown trigger="click">
<a class="ops-link">
操作
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem @click.native="edit(scope.row)">编辑</DropdownItem>
<DropdownItem v-if="scope.row.deleteFlag == 1" @click.native="enable(scope.row)">启用</DropdownItem>
<DropdownItem v-if="scope.row.deleteFlag == 0" @click.native="disable(scope.row)">禁用</DropdownItem>
<DropdownItem @click.native="remove(scope.row)">删除</DropdownItem>
</DropdownMenu>
</Dropdown>
<span v-if="scope.row.level != 2" class="ops-sep">|</span>
<a v-show="scope.row.level != 2" class="ops-link" @click="addChildren(scope.row)">添加子分类</a>
<div class="ops">
<template v-if="scope.row.level == 2">
<a class="ops-link" @click="parameterOperation(scope.row)">编辑绑定参数</a>
</template>
<a class="ops-link" @click="edit(scope.row)">编辑</a>
<a class="ops-link" @click="remove(scope.row)">删除</a>
<a v-show="scope.row.level != 2" class="ops-link" @click="addChildren(scope.row)">添加子分类</a>
</div>
</template>
<template slot="commissionRate" slot-scope="scope">
@@ -49,12 +31,17 @@
</template>
<template slot="deleteFlag" slot-scope="{ row }">
<Tag
:class="{ ml_10: row.deleteFlag }"
:color="row.deleteFlag == false ? 'success' : 'error'"
>
{{ row.deleteFlag == false ? "正常启用" : "禁用" }}</Tag
<i-switch
size="large"
v-model="row.deleteFlag"
:true-value="false"
:false-value="true"
:loading="row._statusLoading"
@on-change="onStatusSwitchChange(row, $event)"
>
<span slot="open">开启</span>
<span slot="close">关闭</span>
</i-switch>
</template>
</Table>
@@ -249,6 +236,52 @@ export default {
};
},
methods: {
normalizeCategoryTree(list) {
if (!Array.isArray(list) || list.length === 0) return;
list.forEach((item) => {
if (!item || typeof item !== "object") return;
if (item.deleteFlag === 0) item.deleteFlag = false;
else if (item.deleteFlag === 1) item.deleteFlag = true;
else item.deleteFlag = !!item.deleteFlag;
if (Array.isArray(item.children) && item.children.length) {
this.normalizeCategoryTree(item.children);
}
});
},
onStatusSwitchChange(row, nextDeleteFlag) {
const previousDeleteFlag = !nextDeleteFlag;
const isClosing = nextDeleteFlag === true;
this.$Modal.confirm({
title: isClosing ? "确认关闭" : "确认开启",
content:
"您是否要" +
(isClosing ? "关闭" : "开启") +
"当前分类 " +
row.name +
" 及其子分类?",
loading: true,
okText: "是",
cancelText: "否",
onOk: () => {
this.$set(row, "_statusLoading", true);
disableCategory(row.id, { enableOperations: isClosing ? true : 0 }).then(
(res) => {
this.$Modal.remove();
this.$set(row, "_statusLoading", false);
if (res && res.success) {
this.$Message.success("操作成功");
this.getAllList(0);
return;
}
row.deleteFlag = previousDeleteFlag;
}
);
},
onCancel: () => {
row.deleteFlag = previousDeleteFlag;
},
});
},
// 初始化数据
init() {
this.getAllList(0);
@@ -411,6 +444,7 @@ export default {
child._loading = false;
child.children = [];
});
this.normalizeCategoryTree(val.children);
// 模拟加载
setTimeout(() => {
callback(val.children);
@@ -419,6 +453,7 @@ export default {
});
} else {
this.deepCategoryChildren(item.id, this.categoryList);
this.normalizeCategoryTree(this.checkedCategoryChildren);
setTimeout(() => {
callback(this.checkedCategoryChildren);
}, 100);
@@ -446,6 +481,7 @@ export default {
this.loading = false;
if (res.success) {
localStorage.setItem("category", JSON.stringify(res.result));
this.normalizeCategoryTree(res.result);
this.categoryList = JSON.parse(JSON.stringify(res.result));
this.tableData = res.result.map((item) => {
if(this.recordLevel[0] && item.id === this.recordLevel[0]) {
@@ -532,9 +568,18 @@ export default {
cursor: pointer;
text-decoration: none;
}
.ops-sep {
display: inline-block;
margin: 0 8px;
.ops {
display: flex;
flex-wrap: wrap;
}
.ops-link + .ops-link {
margin-left: 16px;
position: relative;
}
.ops-link + .ops-link::before {
content: "|";
position: absolute;
left: -10px;
color: #dcdee2;
}
</style>

442
manager/src/views/goods/goods-manage/parameter-edit.vue Normal file
View File

@@ -0,0 +1,442 @@
<template>
<div class="search">
<Card>
<Form ref="form" :model="form" :label-width="100" :rules="formValidate">
<FormItem label="参数名称" prop="paramName">
<Input v-model="form.paramName" clearable style="width: 520px" />
</FormItem>
<FormItem label="是否必填" prop="required">
<RadioGroup v-model="form.required">
<Radio :label="0">否</Radio>
<Radio :label="1">是</Radio>
</RadioGroup>
<span style="margin-left: 10px; color: #999; font-size: 12px"
>商品发布时参数是否必填</span
>
</FormItem>
<FormItem label="是否索引" prop="isIndex">
<RadioGroup v-model="form.isIndex">
<Radio :label="0">否</Radio>
<Radio :label="1">是</Radio>
</RadioGroup>
<span style="margin-left: 10px; color: #999; font-size: 12px"
>开启索引后，用户将可以通过该参数筛选商品，索引开关不影响商详页的参数展示</span
>
</FormItem>
<FormItem label="排序" prop="sort">
<InputNumber :min="0" type="number" v-model="form.sort" style="width: 520px" />
</FormItem>
<FormItem label="参数值" prop="options">
<Table :columns="optionColumns" :data="form.options" border size="small" style="width: 520px" />
<div style="margin-top: 10px">
<Button type="primary" @click="addOptionRow">新增</Button>
</div>
</FormItem>
<FormItem label="关联分类">
<Button type="default" @click="openCategoryModal">选择分类</Button>
<span v-if="selectedCategoryNamesText" style="margin-left: 10px; color: #999; font-size: 12px"
>{{ selectedCategoryNamesText }}</span
>
<span v-else style="margin-left: 10px; color: #999; font-size: 12px"
>已选择{{ selectedCategoryIds.length }}个分类</span
>
</FormItem>
<FormItem>
<Button type="default" @click="back">返回</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit">保存</Button>
</FormItem>
</Form>
</Card>
<Modal
:title="categoryModalTitle"
v-model="categoryModalVisible"
:mask-closable="false"
:width="700"
>
<div style="position: relative; max-height: 520px; overflow: auto;">
<Spin size="large" fix v-if="categoryTreeLoading"></Spin>
<Tree
:key="categoryTreeKey"
:data="categoryTreeData"
show-checkbox
@on-check-change="onCategoryTreeCheckChange"
></Tree>
</div>
<div slot="footer">
<Button type="text" @click="categoryModalVisible = false">取消</Button>
<Button type="primary" style="margin-left: 8px" @click="categoryModalVisible = false">确定</Button>
</div>
</Modal>
</div>
</template>
<script>
import {
getCategoryTree,
getGoodsParamsDetail,
insertGoodsParams,
updateGoodsParams,
} from "@/api/goods";
import { regular } from "@/utils";
const getOptionText = (value) => {
if (value && typeof value === "object") return value.value;
return value;
};
const normalizeOptions = (value) => {
const arr = Array.isArray(value)
? value
: typeof value === "string"
? value.split(",")
: [];
const cleaned = arr
.map((x) => String(getOptionText(x) ?? "").trim())
.filter((x) => x.length > 0);
return Array.from(new Set(cleaned));
};
const validateOptions = (rule, value, callback) => {
const arr = Array.isArray(value)
? value
: typeof value === "string"
? value.split(",")
: [];
const options = normalizeOptions(arr);
if (options.length === 0) {
callback(new Error("请填写参数值"));
return;
}
const joined = options.join(",");
if (!/^.{1,255}$/.test(joined)) {
callback(new Error("超出最大长度限制"));
return;
}
callback();
};
const normalize01 = (value, fallback = 0) => {
const n = Number(value);
if (n === 0 || n === 1) return n;
return fallback;
};
const buildSpringFormPayload = (payload) => {
const out = {};
if (payload && payload.id !== undefined && payload.id !== null && String(payload.id)) {
out.id = String(payload.id);
}
out.paramName = payload && payload.paramName !== undefined && payload.paramName !== null ? String(payload.paramName) : "";
out.options = payload && payload.options !== undefined && payload.options !== null ? String(payload.options) : "";
out.required = payload ? Number(payload.required) : 0;
out.isIndex = payload ? Number(payload.isIndex) : 0;
out.sort = payload ? Number(payload.sort) : 0;
const categoryList = payload && Array.isArray(payload.categoryParameterList) ? payload.categoryParameterList : [];
const categoryIds = categoryList
.map((x) => (x && x.categoryId !== undefined && x.categoryId !== null ? String(x.categoryId) : ""))
.filter((x) => x.length > 0);
categoryIds.forEach((categoryId, index) => {
out[`categoryParameterList[${index}].categoryId`] = categoryId;
});
return out;
};
const validateRadioRequired = (message) => (rule, value, callback) => {
const n = normalize01(value, NaN);
if (!(n === 0 || n === 1)) {
callback(new Error(message));
return;
}
callback();
};
const toStringArray = (arr) => {
if (!Array.isArray(arr)) return [];
return arr.map((x) => String(x)).filter((x) => x.length > 0);
};
const cacheKey = (id) => `goods-parameter-edit:${id}`;
const buildCategoryIdNameMap = (list, map) => {
if (!Array.isArray(list) || list.length === 0) return;
list.forEach((item) => {
if (!item) return;
const id = item.id !== undefined && item.id !== null ? String(item.id) : "";
if (id) map[id] = item.name;
buildCategoryIdNameMap(item.children || [], map);
});
};
export default {
name: "parameterEdit",
data() {
return {
submitLoading: false,
modalType: 0,
categoryModalVisible: false,
categoryModalTitle: "关联分类",
categoryTreeLoading: false,
categoryTreeData: [],
categoryTreeSource: [],
categoryIdNameMap: {},
categoryTreeKey: 0,
selectedCategoryIds: [],
form: {
paramName: "",
options: [{ value: "" }],
required: 0,
isIndex: 0,
sort: 0,
},
optionColumns: [
{
title: "参数值",
key: "value",
minWidth: 420,
render: (h, params) => {
return h("Input", {
props: {
value: params.row.value,
clearable: true,
},
on: {
input: (val) => {
if (!Array.isArray(this.form.options)) this.form.options = [];
if (!this.form.options[params.index]) return;
this.form.options[params.index].value = val;
},
"on-blur": () => {
this.touchOptionsValidate();
},
},
});
},
},
{
title: "操作",
width: 90,
align: "center",
render: (h, params) => {
return h(
"Button",
{
props: {
type: "error",
size: "small",
},
on: {
click: () => this.removeOptionRow(params.index),
},
},
"删除",
);
},
},
],
formValidate: {
paramName: [regular.REQUIRED, regular.VARCHAR5],
options: [{ required: true, validator: validateOptions, trigger: "change" }],
required: [{ required: true, validator: validateRadioRequired("请选择是否必填"), trigger: "change" }],
isIndex: [{ required: true, validator: validateRadioRequired("请选择是否索引"), trigger: "change" }],
sort: [regular.REQUIRED, regular.INTEGER],
},
};
},
computed: {
id() {
return this.$route.query && this.$route.query.id ? String(this.$route.query.id) : "";
},
selectedCategoryNamesText() {
if (!Array.isArray(this.categoryTreeSource) || this.categoryTreeSource.length === 0) return "";
const selectedSet = new Set(toStringArray(this.selectedCategoryIds));
const isSelected = (node) => {
if (!node) return false;
const id = node.id !== undefined && node.id !== null ? String(node.id) : "";
if (id && selectedSet.has(id)) return true;
const children = Array.isArray(node.children) ? node.children : [];
if (children.length === 0) return false;
return children.every(isSelected);
};
const collect = (node, out) => {
if (!node) return;
if (isSelected(node)) {
if (node.name) out.push(node.name);
return;
}
const children = Array.isArray(node.children) ? node.children : [];
children.forEach((c) => collect(c, out));
};
const names = [];
this.categoryTreeSource.forEach((n) => collect(n, names));
return names.join("，");
},
},
watch: {
"form.required"(val) {
const n = normalize01(val, 0);
if (val !== n) this.$set(this.form, "required", n);
},
"form.isIndex"(val) {
const n = normalize01(val, 0);
if (val !== n) this.$set(this.form, "isIndex", n);
},
},
methods: {
back() {
this.$router.push({ name: "goods-parameter" });
},
touchOptionsValidate() {
if (this.$refs.form && this.$refs.form.validateField) {
this.$refs.form.validateField("options");
}
},
addOptionRow() {
if (!Array.isArray(this.form.options)) this.form.options = [];
this.form.options.push({ value: "" });
this.touchOptionsValidate();
},
removeOptionRow(index) {
if (!Array.isArray(this.form.options)) this.form.options = [];
this.form.options.splice(index, 1);
this.touchOptionsValidate();
},
buildCategoryTreeNodes(list, selectedSet) {
if (!Array.isArray(list) || list.length === 0) return [];
return list.map((item) => {
const children = this.buildCategoryTreeNodes(item.children || [], selectedSet);
return {
id: item.id,
title: item.name,
expand: true,
checked: selectedSet.has(String(item.id)),
children,
};
});
},
async loadDetail(parameterId) {
if (!parameterId) return;
const res = await getGoodsParamsDetail(parameterId).catch(() => null);
if (!(res && res.success && res.result)) return;
const dto = res.result;
const opts = normalizeOptions(dto.options);
this.form = {
id: dto.id || parameterId,
paramName: dto.paramName || "",
options: opts.map((x) => ({ value: x })),
required: normalize01(dto.required, 0),
isIndex: normalize01(dto.isIndex, 0),
sort: Number(dto.sort ?? 0) || 0,
};
const list = Array.isArray(dto.categoryParameterList) ? dto.categoryParameterList : [];
this.selectedCategoryIds = toStringArray(list.map((x) => x && x.categoryId).filter(Boolean));
},
async openCategoryModal() {
this.categoryModalVisible = true;
this.categoryTreeLoading = true;
this.categoryTreeKey += 1;
try {
const selectedSet = new Set(toStringArray(this.selectedCategoryIds));
if (!Array.isArray(this.categoryTreeSource) || this.categoryTreeSource.length === 0) {
const treeRes = await getCategoryTree();
this.categoryTreeSource = treeRes && treeRes.success ? treeRes.result || [] : [];
const map = {};
buildCategoryIdNameMap(this.categoryTreeSource, map);
this.categoryIdNameMap = map;
}
this.categoryTreeData = this.buildCategoryTreeNodes(this.categoryTreeSource || [], selectedSet);
} finally {
this.categoryTreeLoading = false;
}
},
onCategoryTreeCheckChange(checkedNodes) {
if (!Array.isArray(checkedNodes)) {
this.selectedCategoryIds = [];
return;
}
this.selectedCategoryIds = toStringArray(checkedNodes.map((node) => node && node.id).filter(Boolean));
},
initForm() {
if (this.id) {
this.modalType = 1;
const cached = window.sessionStorage.getItem(cacheKey(this.id));
if (cached) {
try {
const row = JSON.parse(cached);
const opts = normalizeOptions(row.options);
this.form = {
id: row.id,
paramName: row.paramName || "",
options: opts.map((x) => ({ value: x })),
required: normalize01(row.required, 0),
isIndex: normalize01(row.isIndex, 0),
sort: Number(row.sort ?? 0) || 0,
};
} catch (e) {
this.modalType = 0;
}
}
this.loadDetail(String(this.id));
} else {
this.modalType = 0;
if (!Array.isArray(this.form.options) || this.form.options.length === 0) {
this.form.options = [{ value: "" }];
}
this.selectedCategoryIds = [];
}
},
handleSubmit() {
this.$refs.form.validate((valid) => {
if (!valid) return;
this.submitLoading = true;
const options = normalizeOptions(this.form.options);
const categoryIds = toStringArray(this.selectedCategoryIds);
const payload = {
...this.form,
options: options.join(","),
required: Number(this.form.required),
isIndex: Number(this.form.isIndex),
sort: Number(this.form.sort || 0),
categoryParameterList: categoryIds.map((categoryId) => ({ categoryId })),
};
if (this.modalType === 0) {
delete payload.id;
insertGoodsParams(buildSpringFormPayload(payload))
.then((res) => {
if (!(res && res.success)) return;
this.$Message.success("操作成功");
this.back();
})
.finally(() => {
this.submitLoading = false;
});
} else {
updateGoodsParams(buildSpringFormPayload(payload))
.then((res) => {
if (!(res && res.success)) return;
this.$Message.success("操作成功");
this.back();
})
.finally(() => {
this.submitLoading = false;
});
}
});
},
},
mounted() {
getCategoryTree().then((res) => {
if (res && res.success) {
this.categoryTreeSource = res.result || [];
const map = {};
buildCategoryIdNameMap(this.categoryTreeSource, map);
this.categoryIdNameMap = map;
}
});
this.initForm();
},
};
</script>
<style lang="scss"></style>

540
manager/src/views/goods/goods-manage/parameter.vue
View File

@@ -1,385 +1,202 @@
<template>
<div style="width: 100%">
<div class="search">
<Card>
<Button @click="handleAddParamsGroup" type="primary">添加</Button>
<Form
ref="searchForm"
@submit.native.prevent
@keydown.enter.native="handleSearch"
:model="searchForm"
inline
:label-width="70"
class="search-form"
>
<Form-item label="参数名称">
<Input
type="text"
v-model="searchForm.paramName"
placeholder="请输入参数名称"
clearable
style="width: 240px"
/>
</Form-item>
<Button @click="handleSearch" type="primary">搜索</Button>
</Form>
</Card>
<div class="row">
<Card v-if="paramsGroup.length == 0"> 暂无参数绑定信息 </Card>
<div class="paramsGroup" v-else>
<Card
style="width: 350px; margin: 7px"
v-for="(group, index) in paramsGroup"
:key="index"
:bordered="false"
>
<p slot="title">
<Icon type="ios-film-outline"></Icon>&nbsp;{{ group.groupName }}
</p>
<p slot="extra">
<Dropdown slot="extra">
<a href="javascript:void(0)">
操作
<Icon type="ios-arrow-down"></Icon>
</a>
<Dropdown-menu slot="list">
<Dropdown-item @click.native="handleEditParamsGroup(group)"
>编辑</Dropdown-item
>
<Dropdown-item @click.native="handleDeleteParamGroup(group)"
>删除</Dropdown-item
>
</Dropdown-menu>
</Dropdown>
<Icon type="arrow-down-b"></Icon>
</p>
<template v-if="group.params && group.params.length > 0">
<div
v-for="(param, paramId) in group.params"
:key="paramId"
class="params"
>
<span>{{ param.paramName }}</span>
<span>
<i-button type="text" @click="handleEditParams(group, param)"
>编辑</i-button
>
<i-button
type="text"
size="small"
style="color: #f56c6c"
@click="handleDeleteParam(group, param)"
>删除</i-button
>
</span>
</div>
</template>
<div v-else style="align-content: center">暂无数据...</div>
<div style="text-align: center">
<i-button type="text" @click="handleAddParams(group)"
>添加</i-button
>
</div>
</Card>
</div>
</div>
<div>
<Modal
:title="modalTitle"
v-model="dialogParamsVisible"
:mask-closable="false"
:width="500"
>
<Form
ref="paramForm"
:model="paramForm"
:label-width="100"
:rules="formValidate"
>
<FormItem label="参数名称" prop="paramName">
<Input v-model="paramForm.paramName" style="width: 100%" />
</FormItem>
<FormItem label="可选值" prop="options">
<Select
v-model="paramForm.options"
placeholder="输入后回车添加"
multiple
filterable
allow-create
:popper-append-to-body="false"
popper-class="spec-values-popper"
style="width: 100%; text-align: left; margin-right: 10px"
>
<Option
v-for="(item, itemIndex) in ops.options"
:value="item"
:key="itemIndex"
:label="item"
>
{{ item }}
</Option>
</Select>
</FormItem>
<FormItem label="选项" prop="specName3">
<Checkbox label="1" v-model="paramForm.required">必填</Checkbox>
<Checkbox label="1" v-model="paramForm.isIndex">可索引</Checkbox>
</FormItem>
<FormItem label="排序" prop="sort">
<InputNumber
:min="0"
type="number"
v-model="paramForm.sort"
style="width: 100%"
/>
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="dialogParamsVisible = false">取消</Button>
<Button
type="primary"
:loading="submitLoading"
@click="submitParamForm"
>提交</Button
>
</div>
</Modal>
</div>
<div>
<Modal
:title="modalTitle"
v-model="dialogParamsGroupVisible"
:mask-closable="false"
:width="500"
>
<Form
@submit.native.prevent
@keydown.enter.native="submitParamGroupForm"
ref="paramGroupForm"
:model="paramGroupForm"
:label-width="100"
:rules="paramGroupValidate"
>
<FormItem label="参数名称" prop="groupName">
<Input v-model="paramGroupForm.groupName" style="width: 100%" />
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="dialogParamsGroupVisible = false"
>取消</Button
>
<Button
type="primary"
:loading="submitLoading"
@click="submitParamGroupForm"
>提交</Button
>
</div>
</Modal>
</div>
<Card>
<Row class="operation padding-row">
<Button @click="goAdd" type="primary">添加</Button>
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[20, 50, 100]"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
</div>
</template>
<script>
import {
getCategoryParamsListData,
insertGoodsParams,
updateGoodsParams,
deleteParams,
insertParamsGroup,
updateParamsGroup,
deleteParamsGroup,
getGoodsParamsPage,
} from "@/api/goods";
import { regular } from "@/utils";
export default {
name: "categoryParams",
data() {
return {
submitLoading: false,
/** 分类ID */
categoryId: this.$route.query.id,
/** 参数组 */
paramsGroup: [],
/** 添加或编辑标识 */
modalType: 0,
/** 添加或编辑标题 */
modalTitle: "",
/** 参数添加或编辑弹出框 */
dialogParamsVisible: false,
/** 参数组添加或编辑弹出框 */
dialogParamsGroupVisible: false,
//参数表单
paramForm: {
sort: 1,
},
/** 参数值 **/
ops: {
options: [],
},
// 参数表单
paramGroupForm: {},
/** 添加、编辑参数 规格 */
formValidate: {
paramName: [regular.REQUIRED, regular.VARCHAR5],
options: [regular.REQUIRED, regular.VARCHAR255],
sort: [regular.REQUIRED, regular.INTEGER],
},
/** 参数组*/
paramGroupValidate: {
groupName: [regular.REQUIRED, regular.VARCHAR5],
loading: true,
total: 0,
searchForm: {
pageNumber: 1,
pageSize: 20,
sort: "createTime",
order: "desc",
paramName: "",
},
data: [],
columns: [
{
title: "参数名称",
key: "paramName",
width: 300,
resizable: true,
sortable: false,
},
{
title: "参数值",
key: "options",
minWidth: 260,
tooltip: true,
},
{
title: "必填",
key: "required",
width: 300,
align: "center",
render: (h, params) => {
const val = params.row.required;
const on = val === 1 || val === "1" || val === true;
return h("span", on ? "是" : "否");
},
},
{
title: "可索引",
key: "isIndex",
width: 300,
align: "center",
render: (h, params) => {
const val = params.row.isIndex;
const on = val === 1 || val === "1" || val === true;
return h("span", on ? "是" : "否");
},
},
{
title: "操作",
key: "action",
width: 300,
align: "center",
fixed: "right",
render: (h, params) => {
return h("div", [
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.goEdit(params.row);
},
},
},
"编辑"
),
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
h(
"a",
{
style: {
color: "#2d8cf0",
cursor: "pointer",
textDecoration: "none",
},
on: {
click: () => {
this.remove(params.row);
},
},
},
"删除"
),
]);
},
},
],
};
},
filters: {
paramTypeFilter(val) {
return val === 1 ? "输入项" : "选择项";
},
},
methods: {
// 初始化数据
init() {
this.getDataList();
},
//弹出添加参数框
handleAddParams(group) {
this.paramForm = {
paramName: "",
paramType: 1,
options: "",
required: false,
isIndex: false,
sort: 0,
groupId: group.groupId,
categoryId: this.categoryId,
};
this.modalTitle = "添加参数";
this.modalType = 0;
this.dialogParamsVisible = true;
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
},
//弹出修改参数框
handleEditParams(group, param) {
console.log(group, param);
this.paramForm = {
paramName: param.paramName,
options: param.options.split(","),
required: param.required == 1 ? true : false,
isIndex: param.isIndex == 1 ? true : false,
groupId: param.groupId || "",
categoryId: param.categoryId || "",
sort: param.sort || 1,
id: param.id,
};
this.ops.options = this.paramForm.options;
this.modalType = 1;
this.modalTitle = "修改参数";
this.dialogParamsVisible = true;
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
//弹出修改参数组框
handleEditParamsGroup(group) {
this.paramGroupForm = {
groupName: group.groupName,
categoryId: this.categoryId,
id: group.groupId,
};
this.modalType = 1;
this.modalTitle = "修改参数组";
this.dialogParamsGroupVisible = true;
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 20;
this.getDataList();
},
// 添加参数
handleAddParamsGroup() {
this.paramGroupForm = {};
this.ops = {};
(this.paramGroupForm.categoryId = this.categoryId), (this.modalType = 0);
this.modalTitle = "添加参数组";
this.dialogParamsGroupVisible = true;
},
//保存参数组
submitParamGroupForm() {
this.$refs.paramGroupForm.validate((valid) => {
if (valid) {
if (this.modalType === 0) {
insertParamsGroup(this.paramGroupForm).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("参数组修改成功");
this.getDataList();
this.dialogParamsVisible = false;
}
});
} else {
console.warn(this.paramGroupForm);
updateParamsGroup(this.paramGroupForm).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("参数组修改成功");
this.getDataList();
this.dialogParamsVisible = false;
}
});
}
this.dialogParamsGroupVisible = false;
}
});
},
//保存参数
submitParamForm() {
this.$refs.paramForm.validate((valid) => {
if (valid) {
this.submitLoading = true;
let data = JSON.parse(JSON.stringify(this.paramForm));
data.isIndex = Number(data.isIndex);
data.required = Number(data.required);
if (this.modalType === 0) {
insertGoodsParams(data).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("参数添加成功");
this.getDataList();
this.dialogParamsVisible = false;
}
});
} else {
console.warn(data.isIndex);
data.isIndex = Number(data.isIndex);
data.required = Number(data.required);
updateGoodsParams(data).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("参数修改成功");
this.getDataList();
this.dialogParamsVisible = false;
}
});
}
}
});
},
// 获取分类列表
getDataList() {
getCategoryParamsListData(this.categoryId).then((res) => {
if (res.success) {
this.paramsGroup = res.result;
this.loading = true;
getGoodsParamsPage(this.searchForm).then((res) => {
this.loading = false;
if (res && res.success) {
this.data = (res.result && res.result.records) || [];
this.total = (res.result && res.result.total) || 0;
}
});
},
//删除参数方法
handleDeleteParam(group, param) {
this.$Modal.confirm({
title: "确认删除",
// 记得确认修改此处
content: "您确认要删除 " + param.paramName + " ?",
loading: true,
onOk: () => {
// 删除
deleteParams(param.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除参数成功");
this.getDataList();
}
});
},
});
goAdd() {
this.$router.push({ name: "goods-parameter-edit" });
},
//删除参数组方法
handleDeleteParamGroup(group) {
goEdit(row) {
if (!row || !row.id) return;
try {
window.sessionStorage.setItem(`goods-parameter-edit:${row.id}`, JSON.stringify(row));
} catch (e) {}
this.$router.push({ name: "goods-parameter-edit", query: { id: row.id } });
},
remove(row) {
this.$Modal.confirm({
title: "确认删除",
// 记得确认修改此处
content: "您确认要删除 " + group.groupName + " ?",
content: "您确认要删除 " + (row.paramName || "") + " ?",
loading: true,
onOk: () => {
// 删除
deleteParamsGroup(group.groupId).then((res) => {
deleteParams(row.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("删除参数成功");
if (res && res.success) {
this.$Message.success("删除成功");
this.getDataList();
}
});
@@ -392,33 +209,4 @@ export default {
},
};
</script>
<style lang="scss">
.row {
overflow: hidden;
margin: 20px 0;
}
.params {
align-items: center;
display: flex;
padding: 3px;
background-color: #f5f7fa;
font-size: 14px;
justify-content: space-between;
}
.ivu-card-head {
background-color: #f5f7fa;
}
.ivu-btn {
font-size: 13px;
}
.paramsGroup {
flex-wrap: wrap;
display: flex;
flex-direction: row;
width: 100%;
}
</style>
<style lang="scss"></style>

88
seller/src/views/goods/goods-seller/goodsOperationFirst.vue
View File

@@ -2,7 +2,7 @@
<div>
<!-- 选择商品类型 -->
<Modal v-model="selectGoodsType" width="550" :closable="false">
<div class="goods-type-list" v-if="!showGoodsTemplates">
<div class="goods-type-list">
<div
class="goods-type-item"
:class="{ 'active-goods-type': item.check }"
@@ -17,25 +17,6 @@
</div>
</div>
</div>
<div v-else class="goods-type-list">
<h2 @click="showGoodsTemplates = !showGoodsTemplates">返回</h2>
<div class="goods-list-box">
<Scroll :on-reach-bottom="handleReachBottom">
<div
class="goods-type-item template-item"
@click="handleClickGoodsTemplate(item)"
v-for="(item, tempIndex) in goodsTemplates"
:key="tempIndex"
>
<img :src="item.thumbnail" />
<div>
<h2>{{ item.goodsName }}</h2>
<p>{{ item.sellingPoint || "" }}</p>
</div>
</div>
</Scroll>
</div>
</div>
</Modal>
<!-- 商品分类 -->
<div class="content-goods-publish">
@@ -79,9 +60,6 @@
<span v-show="category[1].name">> {{ category[1].name }}</span>
<span v-show="category[2].name">> {{ category[2].name }}</span>
</p>
<template v-if="selectedTemplate.goodsName">
<Divider>已选商品模版:{{ selectedTemplate.goodsName }}</Divider>
</template>
</div>
<!-- 底部按钮 -->
<div class="footer">
@@ -97,10 +75,7 @@ import * as API_GOODS from "@/api/goods";
export default {
data() {
return {
selectedTemplate: {}, // 已选模板
selectGoodsType: false, // 展示选择商品分类modal
goodsTemplates: [], // 商品模板列表
showGoodsTemplates: false, //是否显示选择商品模板
goodsTypeWay: [
{
title: "实物商品",
@@ -116,12 +91,6 @@ export default {
type: "VIRTUAL_GOODS",
check: false,
},
{
title: "商品模板导入",
img: require("@/assets/goodsTypeTpl.png"),
desc: "商品模板，一键导入",
check: false,
},
],
// 商品分类选择数组
category: [
@@ -137,29 +106,9 @@ export default {
categoryListLevel2: [],
/** 3级分类列表*/
categoryListLevel3: [],
searchParams: {
saveType: "TEMPLATE",
sort: "create_time",
order: "desc",
pageSize: 10,
pageNumber: 1,
},
templateTotal: 0,
};
},
methods: {
// 商品模版触底加载
handleReachBottom() {
setTimeout(() => {
if (
this.searchParams.pageNumber * this.searchParams.pageSize <=
this.templateTotal
) {
this.searchParams.pageNumber++;
this.GET_GoodsTemplate();
}
}, 1000);
},
// 点击商品类型
handleClickGoodsType(val) {
this.goodsTypeWay.map((item) => {
@@ -167,28 +116,7 @@ export default {
});
val.check = !val.check;
if (!val.type) {
this.GET_GoodsTemplate();
this.showGoodsTemplates = true;
} else {
this.goodsType = val.type;
this.selectedTemplate = {};
}
},
// 点击商品模板
handleClickGoodsTemplate(val) {
this.selectedTemplate = val;
this.selectGoodsType = false;
this.$emit("change", { tempId: val.id });
},
// 获取商品模板
GET_GoodsTemplate() {
API_GOODS.getDraftGoodsListData(this.searchParams).then((res) => {
if (res.success) {
this.goodsTemplates.push(...res.result.records);
this.templateTotal = res.result.total;
}
});
this.goodsType = val.type;
},
/** 选择商城商品分类 */
handleSelectCategory(row, index, level) {
@@ -223,7 +151,7 @@ export default {
// 下一步
next() {
window.scrollTo(0, 0);
if (!this.goodsType && !this.selectedTemplate.goodsName) {
if (!this.goodsType) {
this.$Message.error("请选择商品类型");
return;
}
@@ -238,12 +166,7 @@ export default {
category: this.category,
goodsType: this.goodsType,
};
if (this.selectedTemplate.id) {
params.tempId = this.selectedTemplate.id;
this.$emit("change", params);
} else {
this.$emit("change", params);
}
this.$emit("change", params);
}
},
},
@@ -254,7 +177,4 @@ export default {
</script>
<style lang="scss" scoped>
@import "./addGoods.scss";
::v-deep .ivu-scroll-container {
height: 450px !important;
}
</style>

309
seller/src/views/goods/goods-seller/goodsOperationSec.vue
View File

@@ -32,10 +32,8 @@
<Button class="refresh-icon" icon="md-refresh" shape="circle" type="text"
@click="refresh('brand')"></Button>
</FormItem>
</div>
<h4>商品交易信息</h4>
<div class="form-item-view">
<FormItem class="form-item-view-el" label="计量单位" prop="goodsUnit">
<FormItem class="form-item-view-el" label="计量单位" prop="goodsUnit">
<Select v-model="baseInfoForm.goodsUnit" style="width: 100px">
<Option v-for="(item, index) in goodsUnitList" :key="index" :value="item">{{ item }}
</Option>
@@ -97,7 +95,18 @@
</div>
</div>
</FormItem>
<FormItem class="form-item-view-el" label="商品发布" prop="release">
<RadioGroup v-model="baseInfoForm.release" button-style="solid" type="button">
<Radio :label="1" title="上架">
<span>上架</span>
</Radio>
<Radio :label="0" title="下架">
<span>下架</span>
</Radio>
</RadioGroup>
</FormItem>
</div>
<h4>商品规格及图片</h4>
<div class="form-item-view">
<FormItem class="form-item-view-el required" label="主图" prop="goodsGalleryFiles">
@@ -380,56 +389,18 @@
<span slot="append">kg</span></Input>
</FormItem>
</div>
<h4>其他信息</h4>
<h4>参数信息</h4>
<div class="form-item-view">
<FormItem class="form-item-view-el" label="商品发布" prop="release">
<RadioGroup v-model="baseInfoForm.release" button-style="solid" type="button">
<Radio :label="1" title="立即发布">
<span>立即发布</span>
</Radio>
<Radio :label="0" title="放入仓库">
<span>放入仓库</span>
</Radio>
</RadioGroup>
<FormItem v-for="(paramsItem, paramsIndex) in goodsParams" :key="paramsItem.id || paramsIndex"
:label="`${paramsItem.paramName}：`"
:rules="{ required: !!paramsItem.required, message: '参数不能为空', trigger: 'change' }">
<Select v-model="paramsItem.paramValue" clearable placeholder="请选择" style="width: 200px"
@on-change="(val) => selectParams(paramsItem, val)">
<Option v-for="option in getParamOptions(paramsItem.options)" :key="option" :label="option"
:value="option">
</Option>
</Select>
</FormItem>
<FormItem class="form-item-view-el" label="商品推荐" prop="skuList">
<RadioGroup v-model="baseInfoForm.recommend" button-style="solid" type="button">
<Radio :label="1" title="推荐">
<span>推荐</span>
</Radio>
<Radio :label="0" title="不推荐">
<span>不推荐</span>
</Radio>
</RadioGroup>
</FormItem>
</div>
<div class="form-item-view-bottom">
<Collapse v-for="(paramsGroup, groupIndex) in goodsParams" :key="paramsGroup.groupName"
v-model="params_panel" :title="paramsGroup.groupName" class="mb_10" style="text-align: left">
<Panel :name="paramsGroup.groupName">
{{ paramsGroup.groupName }}
<p slot="content">
<FormItem v-for="(paramsItem, paramsIndex) in paramsGroup.params" :key="paramsIndex"
:label="`${paramsItem.paramName}：`"
:rules="{ required: paramsItem.required, message: '参数不能为空', trigger: 'blur' }">
<Select v-model="paramsItem.paramValue" clearable placeholder="请选择" style="width: 200px"
@on-change="
selectParams(
paramsGroup,
groupIndex,
paramsItem,
paramsIndex,
paramsItem.paramValue
)
">
<Option v-for="option in paramsItem.options.split(',')" :key="option" :label="option"
:value="option">
</Option>
</Select>
</FormItem>
</p>
</Panel>
</Collapse>
</div>
</div>
</div>
@@ -442,7 +413,6 @@
<Button :loading="submitLoading" type="primary" @click="save">
{{ this.$route.query.id ? "保存" : "保存商品" }}
</Button>
<Button type="primary" @click="saveToDraft">保存为模版</Button>
</ButtonGroup>
</div>
@@ -519,7 +489,7 @@ export default {
previewImage: '', // 预览图片地址
global: 0,
accessToken: "", //令牌token
goodsParams: "",
goodsParams: [],
categoryId: "", // 商品分类第三级id
//提交状态
submitLoading: false,
@@ -763,54 +733,41 @@ export default {
mouseLeave() {
// this.showContent = false
},
/**
* 选择参数
* @paramsGroup 参数分组
* @groupIndex 参数分组下标
* @params 参数选项
* @paramIndex 参数下标值
* @value 参数选项值
*/
selectParams(paramsGroup, groupIndex, params, paramsIndex, value) {
if (!this.baseInfoForm.goodsParamsDTOList[groupIndex]) {
this.baseInfoForm.goodsParamsDTOList[groupIndex] = {
groupId: "",
groupName: "",
goodsParamsItemDTOList: [],
};
getParamOptions(options) {
if (!options) return [];
return String(options)
.split(",")
.map((i) => i.trim())
.filter((i) => i);
},
selectParams(params, value) {
if (!Array.isArray(this.baseInfoForm.goodsParamsDTOList)) {
this.$set(this.baseInfoForm, "goodsParamsDTOList", []);
}
//赋予分组id、分组名称
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupId =
paramsGroup.groupId;
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupName =
paramsGroup.groupName;
const list = this.baseInfoForm.goodsParamsDTOList;
const paramId = params && params.id ? String(params.id) : "";
const index = list.findIndex((i) => String(i.paramId) === paramId);
//参数详细为空，则赋予
if (
!this.baseInfoForm.goodsParamsDTOList[groupIndex]
.goodsParamsItemDTOList[paramsIndex]
) {
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
paramsIndex
] = {
paramName: "",
paramValue: "",
isIndex: "",
// required: "",
paramId: "",
sort: "",
};
if (!value && value !== 0) {
if (index >= 0) {
list.splice(index, 1);
}
return;
}
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
paramsIndex
] = {
const newItem = {
paramId,
paramName: params.paramName,
paramValue: value,
isIndex: params.isIndex,
// required: params.required,
paramId: params.id,
sort: params.sort,
isIndex: params.isIndex || 0,
required: params.required || 0,
sort: params.sort || 0,
};
if (index >= 0) {
this.$set(list, index, newItem);
} else {
list.push(newItem);
}
},
// 编辑sku图片
editSkuPicture(row) {
@@ -1191,40 +1148,75 @@ export default {
/** 根据当前分类id查询商品应包含的参数 */
GET_GoodsParams() {
this.goodsParams = []
this.goodsParams = [];
this.params_panel = [];
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((paramsGroup) => {
paramsGroup.params.forEach((param) => {
paramsArr.forEach((arr) => {
if (param.paramName === arr.paramName) {
param.paramValue = arr.paramValue;
}
});
});
});
} else {
if (!Array.isArray(this.baseInfoForm.goodsParamsDTOList)) {
this.baseInfoForm.goodsParamsDTOList = [];
}
const mergedSelected = new Map();
const selectedList = [];
this.baseInfoForm.goodsParamsDTOList.forEach((item) => {
if (!item) return;
if (Array.isArray(item.goodsParamsItemDTOList)) {
selectedList.push(...item.goodsParamsItemDTOList);
} else if (item.paramId || item.paramName) {
selectedList.push(item);
}
});
selectedList.forEach((param) => {
if (!param) return;
const key = param.paramId ? String(param.paramId) : param.paramName;
if (!key) return;
mergedSelected.set(key, param);
});
this.baseInfoForm.goodsParamsDTOList = Array.from(mergedSelected.values()).map((p) => {
return {
paramId: p.paramId ? String(p.paramId) : "",
paramName: p.paramName,
paramValue: p.paramValue,
isIndex: p.isIndex || 0,
required: p.required || 0,
sort: p.sort || 0,
};
});
const findSelectedValue = (param) => {
if (!param) return undefined;
const byId = mergedSelected.get(String(param.id));
if (byId) return byId.paramValue;
const byName = mergedSelected.get(param.paramName);
if (byName) return byName.paramValue;
return undefined;
};
const isGrouped = response[0] && Array.isArray(response[0].params);
const flatParams = isGrouped
? response.reduce((acc, g) => {
if (g && Array.isArray(g.params)) {
acc.push(...g.params);
}
return acc;
}, [])
: response;
this.goodsParams = flatParams
.map((p) => {
const selectedValue = findSelectedValue(p);
return {
...p,
paramValue:
selectedValue !== undefined ? selectedValue : p.paramValue,
};
})
.sort((a, b) => Number(a.sort || 0) - Number(b.sort || 0));
}
);
},
@@ -1935,18 +1927,16 @@ export default {
return;
}
let checkFlag = false;
this.goodsParams.forEach(group => {
group.params.forEach(param => {
if (param.required) {
const check = this.baseInfoForm.goodsParamsDTOList.some(paramsGroup =>
paramsGroup.goodsParamsItemDTOList.some(paramsItem => paramsItem.paramId === param.id)
);
if (!check) {
checkFlag = !check;
}
}
})
})
this.goodsParams.forEach((param) => {
if (!param || !param.required) return;
const check = this.baseInfoForm.goodsParamsDTOList.some((paramsItem) => {
if (String(paramsItem.paramId) !== String(param.id)) return false;
return !!paramsItem.paramValue;
});
if (!check) {
checkFlag = true;
}
});
if (checkFlag) {
this.$Message.error("存在未填写的参数项");
return;
@@ -2078,57 +2068,6 @@ export default {
}
});
},
/** 保存为模板 */
saveToDraft() {
this.baseInfoForm.skuList = this.skuTableData;
if (this.baseInfoForm.goodsGalleryFiles.length > 0) {
this.baseInfoForm.goodsGalleryList =
this.baseInfoForm.goodsGalleryFiles.map((i) => i);
}
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();
},
onCancel: () => {
this.SAVE_DRAFT_GOODS();
},
});
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" });
}
});
},
GET_ShipTemplate(type) {
// 获取物流模板
API_Shop.getShipTemplate().then((res) => {