Skip to content

Commit 752285e

Browse files
Why1092164058Why1092164058
committed
feature(管理后台): 规格值添加
1 parent 44e8631 commit 752285e

File tree

1 file changed

+255
-0
lines changed

1 file changed

+255
-0
lines changed

‎src/views/mall/product/property/value.vue

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
<template>
2+
<div class="app-container">
3+
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4+
<el-form-item label="规格名称" prop="propertyId">
5+
<el-select v-model="queryParams.propertyId">
6+
<el-option v-for="item in propertyOptions" :key="item.id" :label="item.id +'-'+ item.name" :value="item.id"/>
7+
</el-select>
8+
</el-form-item>
9+
<el-form-item label="规格值" prop="name">
10+
<el-input v-model="queryParams.name" placeholder="请输入规格值" clearable @keyup.enter.native="handleQuery"/>
11+
</el-form-item>
12+
<el-form-item label="状态" prop="status">
13+
<el-select v-model="queryParams.status" placeholder="状态" clearable size="small">
14+
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
15+
:key="dict.value" :label="dict.label" :value="dict.value"/>
16+
</el-select>
17+
</el-form-item>
18+
<el-form-item>
19+
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
20+
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
21+
</el-form-item>
22+
</el-form>
23+
24+
<el-row :gutter="10" class="mb8">
25+
<el-col :span="1.5">
26+
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
27+
v-hasPermi="['system:dict:create']">新增</el-button>
28+
</el-col>
29+
<!-- <el-col :span="1.5">
30+
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
31+
v-hasPermi="['system:dict:export']">导出</el-button>
32+
</el-col> -->
33+
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
34+
</el-row>
35+
36+
<el-table v-loading="loading" :data="dataList" >
37+
<el-table-column label="规格值id" align="center" prop="id" />
38+
<el-table-column label="规格值" align="center" prop="name" />
39+
<el-table-column label="状态" align="center" prop="status">
40+
<template slot-scope="scope">
41+
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
42+
</template>
43+
</el-table-column>
44+
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
45+
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
46+
<template slot-scope="scope">
47+
<span>{{ parseTime(scope.row.createTime) }}</span>
48+
</template>
49+
</el-table-column>
50+
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
51+
<template slot-scope="scope">
52+
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
53+
v-hasPermi="['system:dict:update']">修改</el-button>
54+
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
55+
v-hasPermi="['system:dict:delete']">删除</el-button>
56+
</template>
57+
</el-table-column>
58+
</el-table>
59+
60+
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
61+
@pagination="getList"/>
62+
63+
<!-- 添加或修改参数配置对话框 -->
64+
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
65+
<el-form ref="form" :model="form" :rules="rules" label-width="90px">
66+
<el-form-item label="规格值编码">
67+
<el-input v-model="form.propertyId" :disabled="true" />
68+
</el-form-item>
69+
<el-form-item label="规格值" prop="name">
70+
<el-input v-model="form.name" placeholder="请输入数据标签" />
71+
</el-form-item>
72+
<el-form-item label="状态" prop="status">
73+
<el-radio-group v-model="form.status">
74+
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
75+
:key="dict.value" :label="parseInt(dict.value)">{{ dict.label }}
76+
</el-radio>
77+
</el-radio-group>
78+
</el-form-item>
79+
<el-form-item label="备注" prop="remark">
80+
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
81+
</el-form-item>
82+
</el-form>
83+
<div slot="footer" class="dialog-footer">
84+
<el-button type="primary" @click="submitForm">确 定</el-button>
85+
<el-button @click="cancel">取 消</el-button>
86+
</div>
87+
</el-dialog>
88+
</div>
89+
</template>
90+
91+
<script>
92+
import { getPropertyList, getPropertyValuePage, createPropertyValue, updatePropertyValue, getPropertyValue, deletePropertyValue } from '@/api/mall/product/property'
93+
import { getProperty } from "@/api/mall/product/property";
94+
95+
export default {
96+
name: "PropertyValue",
97+
data() {
98+
return {
99+
// 遮罩层
100+
loading: true,
101+
// 导出遮罩层
102+
exportLoading: false,
103+
// 显示搜索条件
104+
showSearch: true,
105+
// 总条数
106+
total: 0,
107+
// 字典表格数据
108+
dataList: [],
109+
// 默认字典类型
110+
defaultPropertyId: "",
111+
// 弹出层标题
112+
title: "",
113+
// 是否显示弹出层
114+
open: false,
115+
// 类型数据字典
116+
propertyOptions: [],
117+
// 查询参数
118+
queryParams: {
119+
pageNo: 1,
120+
pageSize: 10,
121+
propertyId: undefined,
122+
name: undefined,
123+
status: undefined
124+
},
125+
// 表单参数
126+
form: {},
127+
// 表单校验
128+
rules: {
129+
name: [
130+
{ required: true, message: "规格值不能为空", trigger: "blur" }
131+
],
132+
status: [
133+
{ required: true, message: "状态不能为空", trigger: "blur" }
134+
]
135+
},
136+
137+
};
138+
},
139+
created() {
140+
const propertyId = this.$route.params && this.$route.params.propertyId;
141+
this.getProperty(propertyId);
142+
this.getPropertyList();
143+
},
144+
methods: {
145+
/** 查询字典类型详细 */
146+
getProperty(propertyId) {
147+
getProperty(propertyId).then(response => {
148+
this.queryParams.propertyId = response.data.id;
149+
this.defaultPropertyId = response.data.id;
150+
this.getList();
151+
});
152+
},
153+
/** 查询字典类型列表 */
154+
getPropertyList() {
155+
getPropertyList().then(response => {
156+
this.propertyOptions = response.data
157+
});
158+
},
159+
/** 查询字典数据列表 */
160+
getList() {
161+
this.loading = true;
162+
getPropertyValuePage(this.queryParams).then(response => {
163+
this.dataList = response.data.list;
164+
this.total = response.data.total;
165+
this.loading = false;
166+
});
167+
},
168+
// 取消按钮
169+
cancel() {
170+
this.open = false;
171+
this.reset();
172+
},
173+
// 表单重置
174+
reset() {
175+
this.form = {
176+
id: undefined,
177+
propertyId: undefined,
178+
name: undefined,
179+
status: undefined,
180+
remark: undefined
181+
};
182+
this.resetForm("form");
183+
},
184+
/** 搜索按钮操作 */
185+
handleQuery() {
186+
this.queryParams.pageNo = 1;
187+
this.getList();
188+
},
189+
/** 重置按钮操作 */
190+
resetQuery() {
191+
this.resetForm("queryForm");
192+
this.queryParams.propertyId = this.defaultPropertyId;
193+
this.handleQuery();
194+
},
195+
/** 新增按钮操作 */
196+
handleAdd() {
197+
this.reset();
198+
this.open = true;
199+
this.title = "添加规格值";
200+
this.form.propertyId = this.queryParams.propertyId;
201+
},
202+
/** 修改按钮操作 */
203+
handleUpdate(row) {
204+
this.reset();
205+
const id = row.id || this.ids
206+
getPropertyValue(id).then(response => {
207+
this.form = response.data;
208+
this.open = true;
209+
this.title = "修改规格值";
210+
});
211+
},
212+
/** 提交按钮 */
213+
submitForm: function() {
214+
this.$refs["form"].validate(valid => {
215+
if (valid) {
216+
if (this.form.id !== undefined) {
217+
updatePropertyValue(this.form).then(response => {
218+
this.$modal.msgSuccess("修改成功");
219+
this.open = false;
220+
this.getList();
221+
});
222+
} else {
223+
createPropertyValue(this.form).then(response => {
224+
this.$modal.msgSuccess("新增成功");
225+
this.open = false;
226+
this.getList();
227+
});
228+
}
229+
}
230+
});
231+
},
232+
/** 删除按钮操作 */
233+
handleDelete(row) {
234+
const ids = row.id;
235+
this.$modal.confirm('是否确认删除字典编码为"' + ids + '"的数据项?').then(function() {
236+
return deletePropertyValue(ids);
237+
}).then(() => {
238+
this.getList();
239+
this.$modal.msgSuccess("删除成功");
240+
}).catch(() => {});
241+
},
242+
/** 导出按钮操作 */
243+
handleExport() {
244+
const queryParams = this.queryParams;
245+
this.$modal.confirm('是否确认导出所有数据项?').then(() => {
246+
this.exportLoading = true;
247+
return exportData(queryParams);
248+
}).then(response => {
249+
this.$download.excel(response, '字典数据.xls');
250+
this.exportLoading = false;
251+
}).catch(() => {});
252+
}
253+
}
254+
};
255+
</script>

0 commit comments

Comments
 (0)