|
1
|
<template>
|
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<el-container style="padding: 20px">
<el-aside>
<el-card :style="{ height: asideHeight }">
<el-form label-width="80px">
<el-form-item label="仓库编码">
<el-input
v-model="warehouseCode"
placeholder="请输入仓库编码"
></el-input>
</el-form-item>
<el-form-item>
<el-row>
<el-col :span="8">
<el-button type="primary" size="small" @click="handleQuery"
>查询</el-button
>
</el-col>
<el-col :span="8">
<el-button type="success" size="small" @click="handleAdd"
>新增</el-button
>
</el-col>
</el-row>
<el-row style="margin-top: 5px">
<el-col :span="8">
<el-button type="warning" size="small" @click="handleEdit"
>编辑</el-button
>
</el-col>
<el-col :span="8">
<el-button type="danger" size="small" @click="handleDelete"
>删除</el-button
>
</el-col>
</el-row>
</el-form-item>
</el-form>
</el-card>
</el-aside>
|
|
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<el-dialog
title="新增仓库"
:visible.sync="dialogFormVisible"
width="30%"
center
>
<el-form :model="form" label-width="80px">
<el-form-item label="仓库编码">
<el-input v-model="form.code" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="仓库名称">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="handleAddData">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="编辑仓库数据"
:visible.sync="EditdialogFormVisible"
width="30%"
center
>
<el-form :model="Editform" label-width="80px">
<el-form-item label="仓库编码">
<el-input v-model="Editform.code" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="仓库名称">
<el-input v-model="Editform.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="Editform.remark" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="EditdialogFormVisible = false">取 消</el-button>
<el-button type="primary" :loading="editLoading" @click="handleEditData"
>确 定</el-button
>
</span>
</el-dialog>
|
|
88
89
90
91
92
93
|
<el-main>
<el-card>
<el-table
:data="tableData"
style="width: 100%"
:height="TableHeight"
|
|
94
95
|
border
highlight-current-row
|
|
96
|
@selection-change="handleSelectionChange"
|
|
97
98
|
@row-click="handleRowClick"
ref="multipleTable"
|
|
99
100
|
>
<el-table-column type="selection" width="55"></el-table-column>
|
|
101
102
103
|
<el-table-column prop="id" label="id"></el-table-column>
<el-table-column prop="code" label="仓库编码"></el-table-column>
<el-table-column prop="name" label="仓库名称"></el-table-column>
|
|
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<el-table-column prop="remark" label="备注"></el-table-column>
<el-table-column prop="created" label="创建时间"></el-table-column>
<el-table-column prop="createdBy" label="创建人"></el-table-column>
<el-table-column prop="updated" label="更新时间"></el-table-column>
<el-table-column prop="updatedBy" label="更新人"></el-table-column>
</el-table>
<el-pagination
style="margin-top: 15px"
align="center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
|
|
119
|
:total="total"
|
|
120
121
122
123
|
/>
</el-card>
</el-main>
</el-container>
|
|
124
125
126
|
</template>
<script>
|
|
127
128
129
130
131
132
|
import {
GetPageWarehouses,
AddWarehouse,
EditWarehouse,
DeleteWarehouseIds,
} from "@/api/basicData/warehouse";
|
|
133
|
export default {
|
|
134
|
name: "Warehouse",
|
|
135
136
|
data() {
return {
|
|
137
138
139
140
141
|
warehouseCode: "",
currentPage: 1,
total: 0,
pageSize: 10,
selectedItems: [],
|
|
142
143
144
145
146
147
|
tableData: [],
dialogFormVisible: false,
form: {
code: "",
name: "",
remark: "",
|
|
148
|
createdBy: "",
|
|
149
150
151
152
153
154
155
156
157
|
},
EditdialogFormVisible: false,
Editform: {
code: "",
name: "",
value: "",
remark: "",
},
editLoading: false,
|
|
158
159
160
161
162
163
164
165
166
|
};
},
computed: {
TableHeight() {
return `calc(100vh - 220px )`;
},
asideHeight() {
return `calc(100vh - 150px)`;
},
|
|
167
168
169
170
|
currentUserName() {
return this.$store.state.user.name;
},
|
|
171
172
|
},
methods: {
|
|
173
174
175
|
handleRowClick(row) {
this.$refs.multipleTable.toggleRowSelection(row);
},
|
|
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
handleSelectionChange(val) {
this.selectedItems = val;
},
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
this.handleQuery();
},
handleCurrentChange(val) {
this.currentPage = val;
this.handleQuery();
},
handleQuery() {
|
|
190
191
192
193
194
195
196
197
198
199
200
201
202
|
const requestData = {
pageNumber: this.currentPage,
perPageCount: this.pageSize,
queryConfig: {
code: this.warehouseCode.trim(),
},
};
GetPageWarehouses(requestData).then((res) => {
if (res.code == "Success" && res.data) {
this.tableData = res.data.data || res.data;
this.total = res.data.totalCount || res.data.data.length;
}
});
|
|
203
204
|
},
handleAdd() {
|
|
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
|
this.dialogFormVisible = true;
this.form = {
code: "",
name: "",
remark: "",
};
},
handleAddData() {
if (!this.form.code) {
this.$message.error("仓库编码不能为空");
return;
}
if (!this.form.name) {
this.$message.error("仓库名称不能为空");
return;
}
|
|
221
|
this.form.createdBy = this.currentUserName;
|
|
222
223
224
225
226
227
228
229
230
|
AddWarehouse(this.form).then((res) => {
if (res.code === "Success") {
this.$message.success("新增成功");
this.dialogFormVisible = false;
this.handleQuery();
} else {
this.$message.error(res.message);
}
});
|
|
231
232
|
},
handleEdit() {
|
|
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
|
if (this.selectedItems.length === 0) {
this.$alert("请至少选择一条数据", "提示", {
confirmButtonText: "确定",
});
return;
}
if (this.selectedItems.length > 1) {
this.$alert("只能选择一条数据进行编辑", "提示", {
confirmButtonText: "确定",
});
return;
}
this.EditdialogFormVisible = true;
console.log(this.selectedItems, "selectedItems");
this.Editform = { ...this.selectedItems[0] };
},
handleEditData() {
this.editLoading = true;
EditWarehouse(this.Editform).then((res) => {
if (res.code === "Success") {
this.$message.success("数据修改成功");
this.EditdialogFormVisible = false;
this.editLoading = false;
this.handleQuery();
} else {
this.$message.error(res.message);
}
});
|
|
261
262
|
},
handleDelete() {
|
|
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
|
if (this.selectedItems.length === 0) {
this.$alert("请至少选择一条数据", "提示", {
confirmButtonText: "确定",
});
return;
}
this.$confirm("确定要删除选中的数据吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
DeleteWarehouseIds(this.selectedItems.map((item) => item.id)).then(
(res) => {
if (res.code === "Success") {
this.$message.success("删除成功");
this.handleQuery();
}
}
);
})
.catch(() => {
this.$message.info("已取消删除");
});
|
|
287
288
289
|
},
},
};
|
|
290
291
292
|
</script>
<style scoped>
|
|
293
294
295
296
297
298
299
300
301
302
303
|
.el-card__body,
.el-main {
padding: 0 10px 0 10px;
}
::v-deep.el-table thead {
color: #101010;
font-weight: 600;
}
.el-form-item {
margin-bottom: 18px;
}
|
|
304
305
306
|
.el-table__body tr.current-row {
background-color: #f0f9eb; /* 自定义高亮背景色 */
}
|
|
307
|
/* 样式定义 */
|
|
308
|
</style>
|