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