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