vue-mes
查看 | 历史 | 提交 | 提交对比
hdy
2023-12-25 f2a092218ece0821351440331c90064c8cbd5241
提交 | 用户 | 时间
fd7ea7 1 <template>
YY 2   <div class="app-container">
a04319 3     <el-card class ="box-card">
fd7ea7 4     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
YY 5       <el-form-item label="物料编号" prop="materialCode">
6         <el-input
7           v-model="queryParams.materialCode"
8           placeholder="请输入物料编号"
9           clearable
10           @keyup.enter.native="handleQuery"
11         />
12       </el-form-item>
13       <el-form-item label="物料名称" prop="materialName">
14         <el-input
15           v-model="queryParams.materialName"
16           placeholder="请输入物料名称"
17           clearable
18           @keyup.enter.native="handleQuery"
19         />
20       </el-form-item>
a04319 21
fd7ea7 22       <el-form-item label="版本" prop="matterVersion">
YY 23         <el-input
24           v-model="queryParams.matterVersion"
25           placeholder="请输入版本"
26           clearable
27           @keyup.enter.native="handleQuery"
28         />
29       </el-form-item>
a04319 30
fd7ea7 31       <el-form-item label="状态" prop="status">
YY 32         <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
eb4d1e 33           <el-option
H 34             v-for="dict in dict.type.sys_normal_disable"
35             :key="dict.value"
36             :label="dict.label"
37             :value="dict.value"
38           />
fd7ea7 39         </el-select>
YY 40       </el-form-item>
a04319 41       <el-form-item style="float: right">
fd7ea7 42         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
YY 43         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
44       </el-form-item>
45     </el-form>
a04319 46     </el-card>
H 47     <el-card style="margin-top: 10px" class="box-card">
fd7ea7 48     <el-row :gutter="10" class="mb8">
YY 49       <el-col :span="1.5">
50         <el-button
51           type="primary"
52           plain
53           icon="el-icon-plus"
54           size="mini"
55           @click="handleAdd"
56           v-hasPermi="['bs:material:add']"
57         >新增</el-button>
58       </el-col>
59       <el-col :span="1.5">
60         <el-button
61           type="success"
62           plain
63           icon="el-icon-edit"
64           size="mini"
65           :disabled="single"
66           @click="handleUpdate"
67           v-hasPermi="['bs:material:edit']"
68         >修改</el-button>
69       </el-col>
70       <el-col :span="1.5">
71         <el-button
72           type="danger"
73           plain
74           icon="el-icon-delete"
75           size="mini"
76           :disabled="multiple"
77           @click="handleDelete"
78           v-hasPermi="['bs:material:remove']"
79         >删除</el-button>
80       </el-col>
81       <el-col :span="1.5">
82         <el-button
83           type="warning"
84           plain
85           icon="el-icon-download"
86           size="mini"
87           @click="handleExport"
88           v-hasPermi="['bs:material:export']"
89         >导出</el-button>
90       </el-col>
91       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
92     </el-row>
93
6f148b 94     <el-table v-loading="loading" border :data="materialList" @selection-change="handleSelectionChange" v-if="materialList.length > 0">
fd7ea7 95       <el-table-column type="selection" width="55" align="center" />
YY 96       <el-table-column label="物料编号" align="center" prop="materialCode">
97       </el-table-column>
98       <el-table-column label="物料名称" align="center" prop="materialName">
eb4d1e 99       </el-table-column>
H 100       <el-table-column label="视图" align="center" prop="materialView">
fd7ea7 101       </el-table-column>
YY 102       <el-table-column label="种类" align="center" prop="typeZ">
103       </el-table-column>
104       <el-table-column label="类型" align="center" prop="typeL">
105       </el-table-column>
106       <el-table-column label="单位" align="center" prop="unit">
107       </el-table-column>
108       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
109         <template slot-scope="scope">
110           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
111         </template>
112       </el-table-column>
113       <el-table-column label="ERP规格" align="center" prop="erpSpec">
114       </el-table-column>
115       <el-table-column label="数据来源" align="center" prop="dataSource">
116       </el-table-column>
a04319 117
fd7ea7 118       <el-table-column label="状态" align="center" prop="status">
a04319 119         <template slot-scope="scope">
H 120           <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
121         </template>
fd7ea7 122       </el-table-column>
YY 123       <el-table-column label="厂商" align="center" prop="supplier">
0cddc0 124       </el-table-column>
YY 125       <el-table-column label="备注" align="center" prop="remarks">
fd7ea7 126       </el-table-column>
6f148b 127       <el-table-column fixed="right" label="操作" width="200" align="center" class-name="small-padding fixed-width">
fd7ea7 128         <template slot-scope="scope">
YY 129           <el-button
130             size="mini"
a04319 131             type="success"
H 132             plain
133             style="width: 72px"
fd7ea7 134             icon="el-icon-edit"
YY 135             @click="handleUpdate(scope.row)"
136             v-hasPermi="['bs:material:edit']"
137           >修改</el-button>
138           <el-button
139             size="mini"
a04319 140             plain
H 141             style="width: 72px"
142             type="danger"
fd7ea7 143             icon="el-icon-delete"
YY 144             @click="handleDelete(scope.row)"
145             v-hasPermi="['bs:material:remove']"
146           >删除</el-button>
147         </template>
148       </el-table-column>
149     </el-table>
a04319 150       <el-empty v-else>
H 151         <span slot="description">暂无数据</span>
152       </el-empty>
153     </el-card>
fd7ea7 154     <pagination
YY 155       v-show="total>0"
156       :total="total"
157       :page.sync="queryParams.pageNum"
158       :limit.sync="queryParams.pageSize"
159       @pagination="getList"
160     />
161
162     <!-- 添加或修改物料信息对话框 -->
45a2ee 163     <el-dialog v-dialogpop-up :title="title" :visible.sync="open" width="700px" append-to-body>
a04319 164       <span slot="title">
H 165         <i class="el-icon-s-order"></i>
166         {{titleName}}
167       </span>
eb4d1e 168       <el-form ref="form" inline :model="form" :rules="rules" label-width="80px">
fd7ea7 169         <el-form-item label="物料编号" prop="materialCode">
YY 170           <el-input v-model="form.materialCode" placeholder="请输入物料编号" />
171         </el-form-item>
172         <el-form-item label="物料名称" prop="materialName">
173           <el-input v-model="form.materialName" placeholder="请输入物料名称" />
174         </el-form-item>
175         <el-form-item label="视图" prop="materialView">
176           <el-input v-model="form.materialView" placeholder="请输入视图" />
177         </el-form-item>
178         <el-form-item label="种类" prop="typeZ">
179           <el-input v-model="form.typeZ" placeholder="请输入种类" />
180         </el-form-item>
181         <el-form-item label="类型" prop="typeL">
182           <el-input v-model="form.typeL" placeholder="请输入类型" />
183         </el-form-item>
184         <el-form-item label="单位" prop="unit">
185           <el-input v-model="form.unit" placeholder="请输入单位" />
186         </el-form-item>
187         <el-form-item label="备注" prop="remarks">
188           <el-input v-model="form.remarks" placeholder="请输入备注" />
189         </el-form-item>
190         <el-form-item label="ERP规格" prop="erpSpec">
191           <el-input v-model="form.erpSpec" placeholder="请输入ERP规格" />
192         </el-form-item>
eb4d1e 193         <el-form-item label="厂商" prop="supplier">
H 194           <el-input v-model="form.supplier" placeholder="请输入厂商" />
195         </el-form-item>
fd7ea7 196         <el-form-item label="状态" prop="status">
YY 197           <el-radio-group v-model="form.status">
0cddc0 198             <el-radio
YY 199               v-for="dict in dict.type.sys_normal_disable"
fd7ea7 200               :key="dict.value"
YY 201               :label="dict.value"
0cddc0 202             >{{dict.label}}</el-radio>
fd7ea7 203           </el-radio-group>
YY 204         </el-form-item>
eb4d1e 205
fd7ea7 206       </el-form>
YY 207       <div slot="footer" class="dialog-footer">
208         <el-button type="primary" @click="submitForm">确 定</el-button>
209         <el-button @click="cancel">取 消</el-button>
210       </div>
211     </el-dialog>
212   </div>
213 </template>
214
215 <script>
216 import { listMaterial, getMaterial, delMaterial, addMaterial, updateMaterial } from "@/api/main/bs/material/material";
217
218 export default {
219   name: "Material",
0cddc0 220   dicts: ['sys_normal_disable'],
fd7ea7 221   data() {
YY 222     return {
223       // 遮罩层
224       loading: true,
a04319 225       titleName: 'test',
fd7ea7 226       // 选中数组
YY 227       ids: [],
228       // 非单个禁用
229       single: true,
230       // 非多个禁用
231       multiple: true,
232       // 显示搜索条件
233       showSearch: true,
234       // 总条数
235       total: 0,
236       // 物料信息表格数据
237       materialList: [],
238       // 弹出层标题
239       title: "",
240       // 是否显示弹出层
241       open: false,
242       // 查询参数
243       queryParams: {
244         pageNum: 1,
245         pageSize: 10,
246         materialCode: null,
247         materialName: null,
248         materialView: null,
249         typeZ: null,
250         typeL: null,
251         unit: null,
252         matterVersion: null,
253         remarks: null,
254         createUser: null,
255         createTime: null,
256         updateUser: null,
257         erpSpec: null,
258         dataSource: null,
259         version: null,
260         status: null,
261         supplier: null
262       },
263       // 表单参数
264       form: {},
265       // 表单校验
266       rules: {
267         id: [
268           { required: true, message: "主键id不能为空", trigger: "blur" }
269         ],
a04319 270         materialCode: [
H 271           { required: true, message: "物料编码不能为空", trigger: "blur" }
272         ],
273         materialName: [
274           { required: true, message: "物料名称不能为空", trigger: "blur" }
275         ],
276         typeL: [
277           { required: true, message: "类型不能为空", trigger: "blur" }
278         ],
fd7ea7 279       }
YY 280     };
281   },
282   created() {
283     this.getList();
284   },
285   methods: {
286     /** 查询物料信息列表 */
287     getList() {
288       this.loading = true;
289       listMaterial(this.queryParams).then(response => {
290         this.materialList = response.rows;
291         this.total = response.total;
292         this.loading = false;
293       });
294     },
295     // 取消按钮
296     cancel() {
297       this.open = false;
298       this.reset();
299     },
300     // 表单重置
301     reset() {
302       this.form = {
303         id: null,
304         materialCode: null,
305         materialName: null,
306         materialView: null,
307         typeZ: null,
308         typeL: null,
309         unit: null,
310         matterVersion: null,
311         remarks: null,
312         createUser: null,
313         createTime: null,
314         updateUser: null,
315         updateTime: null,
316         erpSpec: null,
317         dataSource: null,
318         version: null,
a04319 319         status: '0',
fd7ea7 320         supplier: null
YY 321       };
322       this.resetForm("form");
323     },
324     /** 搜索按钮操作 */
325     handleQuery() {
326       this.queryParams.pageNum = 1;
327       this.getList();
328     },
329     /** 重置按钮操作 */
330     resetQuery() {
331       this.resetForm("queryForm");
332       this.handleQuery();
333     },
334     // 多选框选中数据
335     handleSelectionChange(selection) {
336       this.ids = selection.map(item => item.id)
337       this.single = selection.length!==1
338       this.multiple = !selection.length
339     },
340     /** 新增按钮操作 */
341     handleAdd() {
342       this.reset();
343       this.open = true;
a04319 344       this.titleName = "添加物料信息";
fd7ea7 345     },
YY 346     /** 修改按钮操作 */
347     handleUpdate(row) {
348       this.reset();
349       const id = row.id || this.ids
350       getMaterial(id).then(response => {
351         this.form = response.data;
352         this.open = true;
a04319 353         this.titleName = "修改物料信息";
fd7ea7 354       });
YY 355     },
356     /** 提交按钮 */
357     submitForm() {
358       this.$refs["form"].validate(valid => {
359         if (valid) {
360           if (this.form.id != null) {
361             updateMaterial(this.form).then(response => {
362               this.$modal.msgSuccess("修改成功");
363               this.open = false;
364               this.getList();
365             });
366           } else {
367             addMaterial(this.form).then(response => {
368               this.$modal.msgSuccess("新增成功");
369               this.open = false;
370               this.getList();
371             });
372           }
373         }
374       });
375     },
376     /** 删除按钮操作 */
377     handleDelete(row) {
378       const ids = row.id || this.ids;
379       this.$modal.confirm('是否确认删除物料信息编号为"' + ids + '"的数据项？').then(function() {
380         return delMaterial(ids);
381       }).then(() => {
382         this.getList();
383         this.$modal.msgSuccess("删除成功");
384       }).catch(() => {});
385     },
386     /** 导出按钮操作 */
387     handleExport() {
388       this.download('bs/material/export', {
389         ...this.queryParams
390       }, `material_${new Date().getTime()}.xlsx`)
391     }
392   }
393 };
394 </script>