mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-23 19:35:52 +08:00
feat(商品参数): 新增参数管理功能并优化相关页面
- 新增参数编辑页面,支持参数名称、必填、索引等属性配置 - 优化参数列表页面,增加搜索和分页功能 - 重构商品发布页面的参数展示逻辑 - 移除商品模板相关功能 - 优化品牌管理页面的分类关联功能 - 调整商品详情页参数展示样式
This commit is contained in:
@@ -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) => {
|
||||
|
||||
@@ -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: "商品参数",
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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
442
manager/src/views/goods/goods-manage/parameter-edit.vue
Normal 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>
|
||||
@@ -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> {{ 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>
|
||||
|
||||
Reference in New Issue
Block a user