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