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