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