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