From be7462ff6c505f7662a0ea79cb48e8d4dacb101c Mon Sep 17 00:00:00 2001
From: wangfukang <15630117759@163.com>
Date: Mon, 24 Aug 2026 11:59:18 +0800
Subject: [PATCH] 1

---
 src/api/app.js                    |  24 ++
 src/views/app/shop/addType.vue    |   8 +-
 src/views/app/shop/dictManage.vue | 519 +++++++++++++++++++++++++++---
 3 files changed, 501 insertions(+), 50 deletions(-)

diff --git a/src/api/app.js b/src/api/app.js
index a4c9b20..d2ae01d 100644
--- a/src/api/app.js
+++ b/src/api/app.js
@@ -65,6 +65,30 @@ export const categoryList = (params) => {
 export const categorySonList = (params) => {
     return getRequest('/app/productAttributeValue/selectByAttributeId', params)
 }
+//新增属性
+export const productAttributeSave = (params) => {
+    return postRequest('/app/productAttribute/save', params)
+}
+//编辑属性
+export const productAttributeEdit = (params) => {
+    return postRequest('/app/productAttribute/edit', params)
+}
+//删除属性
+export const productAttributeDelete = (params) => {
+    return postRequest('/app/productAttribute/delById', params)
+}
+//新增属性值
+export const productAttributeValueSave = (params) => {
+    return postRequest('/app/productAttributeValue/save', params)
+}
+//编辑属性值
+export const productAttributeValueEdit = (params) => {
+    return postRequest('/app/productAttributeValue/edit', params)
+}
+//删除属性值
+export const productAttributeValueDelete = (params) => {
+    return postRequest('/app/productAttributeValue/delById', params)
+}
 //上架商品
 export const productUp = (params) => {
     return postRequest('/app/product/up', params)
diff --git a/src/views/app/shop/addType.vue b/src/views/app/shop/addType.vue
index a5bf54e..70ef651 100644
--- a/src/views/app/shop/addType.vue
+++ b/src/views/app/shop/addType.vue
@@ -2,7 +2,7 @@
 	<div>
 		<Modal title="添加分类" v-model="visible" :mask-closable="false" :width="500">
 			<Form ref="form" :model="form" :label-width="85" :rules="formValidate">
-				<FormItem label="分类名称" prop="title">
+				<FormItem label="分类名称" prop="categoryName">
 					<Input v-model="form.categoryName" />
 				</FormItem>
 				<FormItem label="排序值" prop="sortOrder">
@@ -65,6 +65,12 @@
 				this.form.shopId = v
 			},
 			submit() {
+				const categoryName = (this.form.categoryName || "").trim();
+				if (!categoryName) {
+					this.$Message.warning("请输入分类名称");
+					return;
+				}
+				this.form.categoryName = categoryName;
 				this.$refs.form.validate((valid) => {
 					if (valid) {
 						// 添加
diff --git a/src/views/app/shop/dictManage.vue b/src/views/app/shop/dictManage.vue
index 450effa..272ec00 100644
--- a/src/views/app/shop/dictManage.vue
+++ b/src/views/app/shop/dictManage.vue
@@ -98,6 +98,17 @@
 		width: 60px;
 		margin-left: 4px;
 	}
+	.attribute-manage {
+		min-height: 420px;
+	}
+	.attribute-manage-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 10px;
+		font-weight: bold;
+		color: #515a6e;
+	}
 </style>
 <template>
 	<div class="search">
@@ -106,6 +117,7 @@
 				<Col v-show="expand" span="5">
 				<Row class="operation">
 					<Button @click="handleAddDict" type="primary" icon="md-add">添加分类</Button>
+					<Button @click="openAttributeManage" type="primary" icon="md-create">编辑属性及属性值</Button>
 					<Dropdown @on-click="handleDropdown">
 						<Button>
 							更多操作
@@ -196,6 +208,66 @@
 
 		<editDictType ref="editTypePage" :data="dictForm" v-model="showEditDict" @on-submit="editDictSuccess" />
 
+		<Modal title="编辑属性及属性值" v-model="attributeManageVisible" :mask-closable="false" :width="1000">
+			<Row :gutter="16" class="attribute-manage">
+				<Col span="10">
+					<div class="attribute-manage-header">
+						<span>属性</span>
+						<Button size="small" type="primary" icon="md-add" @click="openAttributeForm('add')">新增属性</Button>
+					</div>
+					<Table
+						:loading="attributeLoading"
+						border
+						highlight-row
+						size="small"
+						:columns="attributeColumns"
+						:data="attributeList"
+						@on-row-click="selectAttribute"
+					></Table>
+				</Col>
+				<Col span="14">
+					<div class="attribute-manage-header">
+						<span>属性值<span v-if="selectedAttribute.attributeName">：{{ selectedAttribute.attributeName }}</span></span>
+						<Button size="small" type="primary" icon="md-add" :disabled="!selectedAttribute.id" @click="openAttributeValueForm('add')">新增属性值</Button>
+					</div>
+					<Table
+						:loading="attributeValueLoading"
+						border
+						size="small"
+						:columns="attributeValueColumns"
+						:data="attributeValueList"
+					></Table>
+				</Col>
+			</Row>
+			<div slot="footer">
+				<Button type="text" @click="attributeManageVisible = false">关闭</Button>
+			</div>
+		</Modal>
+
+		<Modal :title="attributeFormTitle" v-model="attributeFormVisible" :mask-closable="false" :width="420">
+			<Form ref="attributeForm" :model="attributeForm" :rules="attributeFormRules" :label-width="80">
+				<FormItem label="属性名称" prop="attributeName">
+					<Input v-model="attributeForm.attributeName" placeholder="请输入属性名称" />
+				</FormItem>
+			</Form>
+			<div slot="footer">
+				<Button type="text" @click="attributeFormVisible = false">取消</Button>
+				<Button type="primary" :loading="attributeSubmitLoading" @click="submitAttributeForm">提交</Button>
+			</div>
+		</Modal>
+
+		<Modal :title="attributeValueFormTitle" v-model="attributeValueFormVisible" :mask-closable="false" :width="420">
+			<Form ref="attributeValueForm" :model="attributeValueForm" :rules="attributeValueFormRules" :label-width="90">
+				<FormItem label="属性值名称" prop="value">
+					<Input v-model="attributeValueForm.value" placeholder="请输入属性值名称" />
+				</FormItem>
+			</Form>
+			<div slot="footer">
+				<Button type="text" @click="attributeValueFormVisible = false">取消</Button>
+				<Button type="primary" :loading="attributeValueSubmitLoading" @click="submitAttributeValueForm">提交</Button>
+			</div>
+		</Modal>
+
 		<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="screenWidth *0.9">
 			<Form ref="form" :model="addGoodsForm" :label-width="80" :rules="formValidate">
 				<Col span="6">
@@ -342,7 +414,6 @@
 <script>
 	import {
 		searchDict,
-		getAllDictDataList,
 		addDictData,
 		editDictData,
 		deleteData,
@@ -352,6 +423,12 @@
 		deleteType,
 		categoryList,
 		categorySonList,
+		productAttributeSave,
+		productAttributeEdit,
+		productAttributeDelete,
+		productAttributeValueSave,
+		productAttributeValueEdit,
+		productAttributeValueDelete,
 		productSave,
 		getShareList,
 		productEdit,
@@ -404,6 +481,7 @@
 				attrValueArr:[],
 				modalclassType:'',
 				shopId: '',
+				attrId: '',
 				tableSize: "default",
 				dataLength: 0,
 				showAddDict: false,
@@ -702,6 +780,138 @@
 						},
 					},
 				],
+				attributeManageVisible: false,
+				attributeLoading: false,
+				attributeValueLoading: false,
+				attributeList: [],
+				attributeValueList: [],
+				selectedAttribute: {},
+				attributeFormVisible: false,
+				attributeFormTitle: "新增属性",
+				attributeFormType: "add",
+				attributeSubmitLoading: false,
+				attributeForm: {
+					id: "",
+					attributeName: "",
+				},
+				attributeFormRules: {
+					attributeName: [{
+						required: true,
+						message: "请输入属性名称",
+						trigger: "blur",
+					}],
+				},
+				attributeValueFormVisible: false,
+				attributeValueFormTitle: "新增属性值",
+				attributeValueFormType: "add",
+				attributeValueSubmitLoading: false,
+				attributeValueForm: {
+					id: "",
+					value: "",
+				},
+				attributeValueFormRules: {
+					value: [{
+						required: true,
+						message: "请输入属性值名称",
+						trigger: "blur",
+					}],
+				},
+				attributeColumns: [
+					{
+						title: "属性名称",
+						key: "attributeName",
+						minWidth: 120,
+					},
+					{
+						title: "操作",
+						key: "action",
+						width: 180,
+						align: "center",
+						render: (h, params) => {
+							const actions = [
+								h("a", {
+									on: {
+										click: (e) => {
+											e.stopPropagation();
+											this.selectAttribute(params.row);
+										},
+									},
+								}, "管理"),
+							];
+							if (params.row.attributeName != "默认属性") {
+								actions.push(h("Divider", {
+									props: {
+										type: "vertical",
+									},
+								}));
+								actions.push(h("a", {
+									on: {
+										click: (e) => {
+											e.stopPropagation();
+											this.openAttributeForm("edit", params.row);
+										},
+									},
+								}, "编辑"));
+								actions.push(h("Divider", {
+									props: {
+										type: "vertical",
+									},
+								}));
+								actions.push(h("a", {
+									style: {
+										color: "#ed4014",
+									},
+									on: {
+										click: (e) => {
+											e.stopPropagation();
+											this.deleteAttribute(params.row);
+										},
+									},
+								}, "删除"));
+							}
+							return h("div", actions);
+						},
+					},
+				],
+				attributeValueColumns: [
+					{
+						title: "属性值名称",
+						key: "value",
+						minWidth: 160,
+					},
+					{
+						title: "操作",
+						key: "action",
+						width: 140,
+						align: "center",
+						render: (h, params) => {
+							return h("div", [
+								h("a", {
+									on: {
+										click: () => {
+											this.openAttributeValueForm("edit", params.row);
+										},
+									},
+								}, "编辑"),
+								h("Divider", {
+									props: {
+										type: "vertical",
+									},
+								}),
+								h("a", {
+									style: {
+										color: "#ed4014",
+									},
+									on: {
+										click: () => {
+											this.deleteAttributeValue(params.row);
+										},
+									},
+								}, "删除"),
+							]);
+						},
+					},
+				],
 				submitLoading: false, // 添加或编辑提交状态
 				data: [], //表单数据
 				total: 0, // 表单数据总数
@@ -810,13 +1020,216 @@
 					this.addGoodsForm.attributeList1.set(categoryName, entry)
 				}
 			},
+			isRequestSuccess(res) {
+				return res && (res.success || res.code == 200);
+			},
+			openAttributeManage() {
+				if (!this.attrId) {
+					this.$Message.warning("当前店铺未配置属性分类");
+					return;
+				}
+				this.attributeManageVisible = true;
+				this.getAttributeList();
+			},
+			getAttributeList(selectId) {
+				if (!this.attrId) {
+					this.attributeList = [];
+					this.selectedAttribute = {};
+					this.attributeValueList = [];
+					return Promise.resolve();
+				}
+				this.attributeLoading = true;
+				return categoryList({
+					categoryId: this.attrId
+				}).then((res) => {
+					this.attributeLoading = false;
+					if (this.isRequestSuccess(res)) {
+						this.attributeList = Array.isArray(res.result) ? res.result : [];
+						const selectedId = selectId || this.selectedAttribute.id;
+						let selected = null;
+						if (selectedId) {
+							selected = this.attributeList.find(item => item.id == selectedId);
+						}
+						if (!selected && this.attributeList.length > 0) {
+							selected = this.attributeList[0];
+						}
+						if (selected) {
+							this.selectAttribute(selected);
+						} else {
+							this.selectedAttribute = {};
+							this.attributeValueList = [];
+						}
+					} else {
+						this.$Message.warning(res.message || "属性加载失败");
+					}
+				}).catch(() => {
+					this.attributeLoading = false;
+				});
+			},
+			selectAttribute(row) {
+				this.selectedAttribute = row || {};
+				this.getAttributeValueList(this.selectedAttribute);
+			},
+			getAttributeValueList(attribute) {
+				if (!attribute || !attribute.id) {
+					this.attributeValueList = [];
+					return Promise.resolve();
+				}
+				this.attributeValueLoading = true;
+				return categorySonList({
+					id: attribute.id,
+				}).then((res) => {
+					this.attributeValueLoading = false;
+					if (this.isRequestSuccess(res)) {
+						this.attributeValueList = Array.isArray(res.result) ? res.result : [];
+					} else {
+						this.$Message.warning(res.message || "属性值加载失败");
+					}
+				}).catch(() => {
+					this.attributeValueLoading = false;
+				});
+			},
+			openAttributeForm(type, row) {
+				this.attributeFormType = type;
+				this.attributeFormTitle = type == "edit" ? "编辑属性" : "新增属性";
+				this.attributeForm = {
+					id: row ? row.id : "",
+					attributeName: row ? row.attributeName : "",
+				};
+				this.attributeFormVisible = true;
+			},
+			submitAttributeForm() {
+				const attributeName = (this.attributeForm.attributeName || "").trim();
+				if (!attributeName) {
+					this.$Message.warning("请输入属性名称");
+					return;
+				}
+				this.attributeForm.attributeName = attributeName;
+				this.$refs.attributeForm.validate((valid) => {
+					if (!valid) return;
+					this.attributeSubmitLoading = true;
+					const request = this.attributeFormType == "edit"
+						? productAttributeEdit({
+							id: this.attributeForm.id,
+							attributeName: attributeName,
+						})
+						: productAttributeSave({
+							categoryId: this.attrId,
+							attributeName: attributeName,
+						});
+					const selectedId = this.attributeForm.id;
+					request.then((res) => {
+						this.attributeSubmitLoading = false;
+						if (this.isRequestSuccess(res)) {
+							this.$Message.success(this.attributeFormType == "edit" ? "修改成功" : "添加成功");
+							this.attributeFormVisible = false;
+							this.getAttributeList(selectedId);
+						} else {
+							this.$Message.warning(res.message || "操作失败");
+						}
+					}).catch(() => {
+						this.attributeSubmitLoading = false;
+					});
+				});
+			},
+			deleteAttribute(row) {
+				this.$Modal.confirm({
+					title: "确认删除",
+					content: "确认删除属性 " + row.attributeName + " 及其属性值吗？",
+					onOk: () => {
+						productAttributeDelete({
+							id: row.id
+						}).then((res) => {
+							if (this.isRequestSuccess(res)) {
+								this.$Message.success("删除成功");
+								if (this.selectedAttribute.id == row.id) {
+									this.selectedAttribute = {};
+									this.attributeValueList = [];
+								}
+								this.getAttributeList();
+							} else {
+								this.$Message.warning(res.message || "删除失败");
+							}
+						});
+					},
+				});
+			},
+			openAttributeValueForm(type, row) {
+				if (!this.selectedAttribute.id) {
+					this.$Message.warning("请先选择属性");
+					return;
+				}
+				this.attributeValueFormType = type;
+				this.attributeValueFormTitle = type == "edit" ? "编辑属性值" : "新增属性值";
+				this.attributeValueForm = {
+					id: row ? row.id : "",
+					value: row ? row.value : "",
+				};
+				this.attributeValueFormVisible = true;
+			},
+			submitAttributeValueForm() {
+				const value = (this.attributeValueForm.value || "").trim();
+				if (!value) {
+					this.$Message.warning("请输入属性值名称");
+					return;
+				}
+				this.attributeValueForm.value = value;
+				this.$refs.attributeValueForm.validate((valid) => {
+					if (!valid) return;
+					this.attributeValueSubmitLoading = true;
+					const request = this.attributeValueFormType == "edit"
+						? productAttributeValueEdit({
+							id: this.attributeValueForm.id,
+							value: value,
+						})
+						: productAttributeValueSave({
+							attributeId: this.selectedAttribute.id,
+							value: value,
+						});
+					request.then((res) => {
+						this.attributeValueSubmitLoading = false;
+						if (this.isRequestSuccess(res)) {
+							this.$Message.success(this.attributeValueFormType == "edit" ? "修改成功" : "添加成功");
+							this.attributeValueFormVisible = false;
+							this.getAttributeValueList(this.selectedAttribute);
+						} else {
+							this.$Message.warning(res.message || "操作失败");
+						}
+					}).catch(() => {
+						this.attributeValueSubmitLoading = false;
+					});
+				});
+			},
+			deleteAttributeValue(row) {
+				this.$Modal.confirm({
+					title: "确认删除",
+					content: "确认删除属性值 " + row.value + " 吗？",
+					onOk: () => {
+						productAttributeValueDelete({
+							id: row.id
+						}).then((res) => {
+							if (this.isRequestSuccess(res)) {
+								this.$Message.success("删除成功");
+								this.getAttributeValueList(this.selectedAttribute);
+							} else {
+								this.$Message.warning(res.message || "删除失败");
+							}
+						});
+					},
+				});
+			},
 			init(v) {
-				this.shopId = v.id
-				this.searchForm.shopId = v.id
-				this.addGoodsForm.shopId = v.id
+				if (v) {
+					this.shopId = v.id
+					this.attrId = v.attrId || ''
+					this.searchForm.shopId = v.id
+					this.addGoodsForm.shopId = v.id
+				}
 				this.screenWidth = window.screen.width;
 				// 获取树数据
-				this.getGoodsType();
+				if (this.shopId) {
+					this.getGoodsType();
+				}
 				// 获取表单数据
 				// this.getDataList();
 			},
@@ -891,18 +1304,26 @@
 				}else{
 					this.modalTitle = "选择规格";
 				}
-				getAllDictDataList({
-					name: "",
-					status: "",
-					pageNumber: 1,
-					pageSize: 100000,
-					sort: 'sortOrder',
-					order: 'asc',
-					dictId: '2026945661353725952'
+				if (!this.attrId) {
+					this.categoryData = []
+					this.categorySonData = []
+					this.$Message.warning("当前店铺未配置属性分类");
+					return
+				}
+				categoryList({
+					categoryId: this.attrId
 				}).then((res) => {
-					if(res.code == 200){
-						this.categoryData = res.result.content
+					if(res.success || res.code == 200){
+						this.categoryData = Array.isArray(res.result) ? res.result : []
+						if (this.categoryData.length == 0) {
+							this.categorySonData = []
+							return
+						}
+						if (this.categoryIndex >= this.categoryData.length) {
+							this.categoryIndex = 0
+						}
 						for (var i = 0; i < this.categoryData.length; i++) {
+							this.categoryData[i].title = this.categoryData[i].attributeName || this.categoryData[i].title
 							if (i == this.categoryIndex) {
 								this.categoryData[i].parentId = true
 							} else {
@@ -910,8 +1331,8 @@
 							}
 						}
 						//如果是选择属性，需要拿一个分类名，保存成parent
-						this.typeToAttrName = res.result.content[this.categoryIndex].title
-						this.getCateGorySon(res.result.content[this.categoryIndex].id)
+						this.typeToAttrName = this.categoryData[this.categoryIndex].title
+						this.getCateGorySon(this.categoryData[this.categoryIndex].id)
 					}
 				});
 			},
@@ -955,17 +1376,15 @@
 				viewer.show();
 			},
 			getCateGorySon(id){
-				getAllDictDataList({
-					name: "",
-					status: "",
-					pageNumber: 1,
-					pageSize: 100000,
-					sort: 'sortOrder',
-					order: 'asc',
-					dictId: id
+				categorySonList({
+					id: id,
 				}).then((res) => {
-					if(res.code == 200){
-						this.categorySonData = res.result.content
+					if(res.success || res.code == 200){
+						this.categorySonData = Array.isArray(res.result) ? res.result : []
+						for (var i = 0; i < this.categorySonData.length; i++) {
+							this.categorySonData[i].title = this.categorySonData[i].value || this.categorySonData[i].title
+							this.$set(this.categorySonData[i], 'checked', false)
+						}
 						if(this.modalclassType == 'shuxing'){
 							for (var i = 0; i < this.categorySonData.length; i++) {
 								if(this.attrValueArr.length>0){
@@ -973,14 +1392,14 @@
 									for (var m = 0; m < this.attrValueArr.length; m++) {
 										if(this.attrValueArr[m].title == this.categorySonData[i].title && this.attrValueArr[m].parentName == this.typeToAttrName){
 											index1 = true
-											this.categorySonData[i].checked = true
+											this.$set(this.categorySonData[i], 'checked', true)
 										}
 									}
 									if(index1){
-										this.categorySonData[i].checked = true
+										this.$set(this.categorySonData[i], 'checked', true)
 									}
 								}else{
-									this.categorySonData[i].checked = false
+									this.$set(this.categorySonData[i], 'checked', false)
 								}
 							}
 						}else{
@@ -991,14 +1410,15 @@
 								if(this.specValueArr.length>0){
 									for (var m = 0; m < this.specValueArr.length; m++) {
 										if(this.specValueArr[m].id == this.categorySonData[i].id){
-											this.categorySonData[i].checked = true
+											this.$set(this.categorySonData[i], 'checked', true)
 										}
 									}
 								}else{
-									this.categorySonData[i].checked = false
+									this.$set(this.categorySonData[i], 'checked', false)
 								}
 							}
 						}
+						this.$forceUpdate()
 						
 					}
 				});
@@ -1033,8 +1453,9 @@
 						this.attrValueArr.push(this.categorySonData[index])
 					}else{
 						for(let i=0;i<this.attrValueArr.length;i++){
-							if(this.categorySonData[index].title == this.attrValueArr[i].title){
+							if(this.categorySonData[index].title == this.attrValueArr[i].title && this.attrValueArr[i].parentName == this.typeToAttrName){
 								this.attrValueArr.splice(i,1)
+								break
 							}
 						}
 					}
@@ -1059,28 +1480,25 @@
 					this.addGoodsForm.attributeList1.forEach((value, key) => {
 						oldCanbuyMap[key] = value.canbuy || 1
 					})
+					let attributeListMap = new Map()
 					for(let i=0;i<this.attrValueArr.length;i++){
-						if(this.addGoodsForm.attributeList1.size == 0){
-							//set  has get
+						let parentName = this.attrValueArr[i].parentName
+						let title = this.attrValueArr[i].title
+						if(!parentName || !title){
+							continue
+						}
+						if(!attributeListMap.has(parentName)){
 							let data = {
 								title:[],
-								canbuy: oldCanbuyMap[this.attrValueArr[i].parentName] || 1
-							}
-							data.title.push(this.attrValueArr[i].title)
-							this.addGoodsForm.attributeList1.set(this.attrValueArr[i].parentName,data)
-						}else{
-							if(this.addGoodsForm.attributeList1.has(this.attrValueArr[i].parentName) && this.addGoodsForm.attributeList1.get(this.attrValueArr[i].parentName).title.indexOf(this.attrValueArr[i].title) == -1){
-								this.addGoodsForm.attributeList1.get(this.attrValueArr[i].parentName).title.push(this.attrValueArr[i].title)
-							}else if(!this.addGoodsForm.attributeList1.has(this.attrValueArr[i].parentName)){
-								let data = {
-									title:[],
-									canbuy: oldCanbuyMap[this.attrValueArr[i].parentName] || 1
-								}
-								data.title.push(this.attrValueArr[i].title)
-								this.addGoodsForm.attributeList1.set(this.attrValueArr[i].parentName,data)
+								canbuy: oldCanbuyMap[parentName] || 1
 							}
+							attributeListMap.set(parentName,data)
+						}
+						if(attributeListMap.get(parentName).title.indexOf(title) == -1){
+							attributeListMap.get(parentName).title.push(title)
 						}
 					}
+					this.addGoodsForm.attributeList1 = attributeListMap
 				}else{
 					//guige
 					let message = []
@@ -1102,6 +1520,7 @@
 					this.addGoodsForm.attributeListPrice = message
 				}
 				
+				this.$forceUpdate()
 				this.modalclass = false;
 			},
 			selectTree(v) {
@@ -1338,6 +1757,8 @@
 				let str = JSON.stringify(v);
 				let data = JSON.parse(str);
 				this.addGoodsForm = data;
+				this.specValueArr = []
+				this.attrValueArr = []
 				if(this.addGoodsForm.productGroupBuyPrices == '' || this.addGoodsForm.productGroupBuyPrices === undefined || this.addGoodsForm.productGroupBuyPrices === null){
 					this.addGoodsForm.productGroupBuyPrices = []
 				}