Skip to content

Commit 132d942

Browse files
coderlwcoderlw
committed
分类参数已完成
1 parent d1d3f95 commit 132d942

File tree

3 files changed

+275
-1
lines changed

3 files changed

+275
-1
lines changed

‎src/components/goods/Cate.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ export default {
196196
if (resConfirm !== 'confirm') return this.$message.error('已取消删除');
197197
const { data: res } = await this.$axios.delete('categories/' + id);
198198
console.log(res);
199-
// if (res.meta.status !== 200) return this.$message.error('删除失败');
199+
if (res.meta.status !== 200) return this.$message.error('删除失败');
200200
this.getGoodsList();
201201
this.$message.success('删除成功');
202202
}

‎src/components/goods/Params.vue

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
<template>
2+
<div>
3+
<!-- 面包屑区域 -->
4+
<el-breadcrumb separator-class="el-icon-arrow-right">
5+
<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
6+
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
7+
<el-breadcrumb-item>参数列表</el-breadcrumb-item>
8+
</el-breadcrumb>
9+
<el-card>
10+
<el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false" show-icon>
11+
</el-alert>
12+
<el-row class="car_opt">
13+
<el-col>
14+
<span>选择商品分类:</span>
15+
<el-cascader v-model="selectKeys" :options="cateList" :props="cateProp" expandTrigger="hover" clearable @change="handleChange"></el-cascader>
16+
</el-col>
17+
</el-row>
18+
<el-tabs v-model="activeName" @tab-click="tabsHandleClick">
19+
<el-tab-pane label="动态参数" name="many">
20+
<el-row>
21+
<el-col>
22+
<el-button type="primary" size="mini" :disabled="selectKeys.length === 3 ? false : true" @click="addDialogVisible = true">添加属性</el-button>
23+
</el-col>
24+
</el-row>
25+
<el-table :data="paramsList" border stripe>
26+
<el-table-column type="expand">
27+
<template slot-scope="scope">
28+
<el-tag v-for="(item,index) in scope.row.attr_vals" :key="item.attr_id" closable @close="handleClose(index, scope.row)">{{item}}</el-tag>
29+
<el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)">
30+
</el-input>
31+
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
32+
</template>
33+
</el-table-column>
34+
<el-table-column type="index"></el-table-column>
35+
<el-table-column label="参数名称" prop="attr_name">
36+
</el-table-column>
37+
<el-table-column label="操作">
38+
<template slot-scope="scope">
39+
<el-button type='primary' icon="el-icon-edit" size="mini" @click="editDialog(scope.row.attr_id)">编辑</el-button>
40+
<el-button type='danger' icon="el-icon-delete" size="mini" @click="removeCate(scope.row.attr_id)">删除</el-button>
41+
</template>
42+
</el-table-column>
43+
</el-table>
44+
</el-tab-pane>
45+
<el-tab-pane label="静态属性" name="only">
46+
<el-row>
47+
<el-col>
48+
<el-button type="primary" size="mini" :disabled="selectKeys.length === 3 ? false : true" @click="addDialogVisible = true">添加属性</el-button>
49+
</el-col>
50+
</el-row>
51+
<el-table :data="paramsList" border stripe>
52+
<el-table-column type="expand">
53+
<template slot-scope="scope">
54+
<el-tag v-for="item in scope.row.attr_vals" :key="item.attr_id" closable>{{item}}</el-tag>
55+
<el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)">
56+
</el-input>
57+
<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
58+
</template>
59+
</el-table-column>
60+
<el-table-column type="index"></el-table-column>
61+
<el-table-column label="参数名称" prop="attr_name">
62+
63+
</el-table-column>
64+
<el-table-column label="操作">
65+
<template slot-scope="scope">
66+
<el-button type='primary' icon="el-icon-edit" size="mini" @click="editDialog(scope.row.attr_id)">编辑</el-button>
67+
<el-button type='danger' icon="el-icon-delete" size="mini" @click="removeCate(scope.row.attr_id)">删除</el-button>
68+
</template>
69+
</el-table-column>
70+
</el-table>
71+
</el-tab-pane>
72+
</el-tabs>
73+
<el-dialog :title="'添加' + titleText" :visible.sync="addDialogVisible" @close="resetDialogClose">
74+
<el-form :model="addForm" :rules="addRules" ref="addRef">
75+
<el-form-item :label="titleText" prop="attr_name" label-width="100px">
76+
<el-input v-model="addForm.attr_name"></el-input>
77+
</el-form-item>
78+
</el-form>
79+
<div slot="footer">
80+
<el-button @click="addDialogVisible = false">取 消</el-button>
81+
<el-button type="primary" @click="addDialogSub">确 定</el-button>
82+
</div>
83+
</el-dialog>
84+
<el-dialog :title="'修改' + titleText" :visible.sync="editDialogVisible" @close="editDialogClose">
85+
<el-form :model="editForm" :rules="editRules" ref="editRef">
86+
<el-form-item :label="titleText" prop="attr_name" label-width="100px">
87+
<el-input v-model="editForm.attr_name"></el-input>
88+
</el-form-item>
89+
</el-form>
90+
<div slot="footer">
91+
<el-button @click="editDialogVisible = false">取 消</el-button>
92+
<el-button type="primary" @click="editDialogSub">确 定</el-button>
93+
</div>
94+
</el-dialog>
95+
</el-card>
96+
</div>
97+
</template>
98+
99+
<script>
100+
export default {
101+
name: '',
102+
data() {
103+
return {
104+
cateList: [],
105+
selectKeys: [],
106+
cateProp: {
107+
value: 'cat_id',
108+
label: 'cat_name',
109+
children: 'children'
110+
},
111+
activeName: 'many',
112+
paramsList: [],
113+
addDialogVisible: false,
114+
addForm: {
115+
attr_name: ''
116+
},
117+
addRules: {
118+
attr_name: [{
119+
required: true, message: '请输入属性值', trigger: 'blur'
120+
}]
121+
},
122+
editDialogVisible: false,
123+
editForm: {},
124+
editRules: {
125+
attr_name: [{
126+
required: true, message: '请输入属性值', trigger: 'blur'
127+
}]
128+
},
129+
attrId: 0,
130+
}
131+
},
132+
computed: {
133+
cateId() {
134+
if (this.selectKeys.length === 3) {
135+
return this.selectKeys[this.selectKeys.length - 1];
136+
} else {
137+
return null;
138+
}
139+
},
140+
titleText() {
141+
if (this.activeName === 'many') {
142+
return '动态属性';
143+
} else {
144+
return '静态属性';
145+
}
146+
}
147+
},
148+
methods: {
149+
async getGoodsList() {
150+
const { data: res } = await this.$axios.get('categories');
151+
if (res.meta.status !== 200) return this.$message.error('获取分类数据失败');
152+
this.cateList = res.data;
153+
},
154+
handleChange() {
155+
this.getParamsData();
156+
},
157+
tabsHandleClick() {
158+
this.getParamsData();
159+
},
160+
async getParamsData() {
161+
const { data: res } = await this.$axios.get(`categories/${this.cateId}/attributes`, { params: { sel: this.activeName } });
162+
if (res.meta.status !== 200) return this.$message.error('获取参数失败');
163+
res.data.forEach((item) => {
164+
item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : [];
165+
item.inputVisible = false;
166+
item.inputValue = '';
167+
})
168+
this.paramsList = res.data;
169+
},
170+
resetDialogClose() {
171+
this.$refs.addRef.resetFields();
172+
},
173+
addDialogSub() {
174+
this.$refs.addRef.validate(async valid => {
175+
if (!valid) return;
176+
const { data: res } = await this.$axios.post(`categories/${this.cateId}/attributes`, { attr_name: this.addForm.attr_name, attr_sel: this.activeName });
177+
if (res.meta.status !== 201) return this.$message.error('添加属性失败');
178+
this.getParamsData();
179+
this.$message.success('添加属性成功');
180+
this.addDialogVisible = false;
181+
})
182+
},
183+
editDialogClose() {
184+
this.$refs.editRef.resetFields();
185+
},
186+
async editDialog(attrId) {
187+
this.attrId = attrId;
188+
const { data: res } = await this.$axios.get(`categories/${this.cateId}/attributes/${attrId}`, { params: { attr_sel: this.activeName } });
189+
if (res.meta.status !== 200) return this.$message.error('查询属性失败');
190+
this.editForm = res.data;
191+
this.editDialogVisible = true;
192+
},
193+
editDialogSub() {
194+
this.$refs.editRef.validate(async valid => {
195+
if (!valid) return;
196+
const { data: res } = await this.$axios.put(`categories/${this.cateId}/attributes/${this.attrId}`, {
197+
attr_name: this.editForm.attr_name, attr_sel: this.activeName, attr_vals: '海信60E3F,60英寸4K,智慧全面屏电视机,智能网络,高清平板液晶悬浮全面屏三面无边,4KHDR超高清,8G存储'
198+
});
199+
if (res.meta.status !== 200) return this.$message.error('修改属性失败');
200+
this.getParamsData();
201+
this.$message.success('修改属性成功');
202+
this.editDialogVisible = false;
203+
})
204+
},
205+
async removeCate(attrId) {
206+
const resConfirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
207+
confirmButtonText: '确定',
208+
cancelButtonText: '取消',
209+
type: 'warning'
210+
}).catch(err => err);
211+
if (resConfirm !== 'confirm') return this.$message.error('已取消删除');
212+
const { data: res } = await this.$axios.delete(`categories/${this.cateId}/attributes/${attrId}`);
213+
if (res.meta.status !== 200) return this.$message.error('删除属性失败');
214+
this.getParamsData();
215+
this.$message.success('删除属性成功');
216+
},
217+
handleInputConfirm(row) {
218+
if (row.inputValue.trim().length === 0) {
219+
row.inputValue = '';
220+
row.inputVisible = false;
221+
return;
222+
}
223+
row.attr_vals.push(row.inputValue);
224+
this.getSaveattributes(row);
225+
row.inputValue = '';
226+
row.inputVisible = false;
227+
228+
},
229+
showInput(row) {
230+
row.inputVisible = true;
231+
this.$nextTick(() => {
232+
this.$refs.saveTagInput.$refs.input.focus();
233+
});
234+
},
235+
async getSaveattributes(row) {
236+
console.log(row.attr_id);
237+
const { data: res } = await this.$axios.put(`categories/${this.cateId}/attributes/${row.attr_id}`, {
238+
attr_name: row.attr_name,
239+
attr_sel: row.attr_sel,
240+
attr_vals: row.attr_vals.join(',')
241+
});
242+
if (res.meta.status !== 200) return this.$message.error('操作属性失败');
243+
this.$message.success('操作属性成功');
244+
},
245+
handleClose(index, row) {
246+
row.attr_vals.splice(index, 1)
247+
this.getSaveattributes(row);
248+
}
249+
},
250+
created() {
251+
this.getGoodsList();
252+
}
253+
};
254+
</script>
255+
256+
<style scoped>
257+
.car_opt {
258+
margin: 15px 0;
259+
}
260+
.el-cascader {
261+
width: 30%;
262+
}
263+
.el-tag {
264+
margin: 5px;
265+
}
266+
.input-new-tag {
267+
width: 120px;
268+
}
269+
</style>

‎src/router/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Users from '@/components/users/Users.vue'
77
import Rights from '@/components/rights/Rights.vue'
88
import Roles from '@/components/rights/Roles.vue'
99
import Cate from '@/components/goods/Cate.vue'
10+
import Params from '@/components/goods/Params.vue'
1011

1112
Vue.use(Router)
1213

@@ -42,6 +43,10 @@ const router = new Router({
4243
{
4344
path: '/categories',
4445
component: Cate
46+
},
47+
{
48+
path: '/params',
49+
component: Params
4550
}
4651
]
4752
}]

0 commit comments

Comments
 (0)