春风项目四线(合箱线、总装线)
懒羊羊
2024-01-15 1558d8b4bb1f928a79b6c3c03ae1aa0f3c5b4a83
提交 | 用户 | 时间
fd2207 1 <template>
2   <div class="app-container">
3     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4       <el-form-item label="字典名称" prop="dictType">
5         <el-select v-model="queryParams.dictType">
6           <el-option
7             v-for="item in typeOptions"
8             :key="item.dictId"
9             :label="item.dictName"
10             :value="item.dictType"
11           />
12         </el-select>
13       </el-form-item>
14       <el-form-item label="字典标签" prop="dictLabel">
15         <el-input
16           v-model="queryParams.dictLabel"
17           placeholder="请输入字典标签"
18           clearable
19           @keyup.enter.native="handleQuery"
20         />
21       </el-form-item>
22       <el-form-item label="状态" prop="status">
23         <el-select v-model="queryParams.status" placeholder="数据状态" clearable>
24           <el-option
25             v-for="dict in dict.type.sys_normal_disable"
26             :key="dict.value"
27             :label="dict.label"
28             :value="dict.value"
29           />
30         </el-select>
31       </el-form-item>
32       <el-form-item>
33         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
34         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
35       </el-form-item>
36     </el-form>
37
38     <el-row :gutter="10" class="mb8">
39       <el-col :span="1.5">
40         <el-button
41           type="primary"
42           plain
43           icon="el-icon-plus"
44           size="mini"
45           @click="handleAdd"
46           v-hasPermi="['system:dict:add']"
47         >新增</el-button>
48       </el-col>
49       <el-col :span="1.5">
50         <el-button
51           type="success"
52           plain
53           icon="el-icon-edit"
54           size="mini"
55           :disabled="single"
56           @click="handleUpdate"
57           v-hasPermi="['system:dict:edit']"
58         >修改</el-button>
59       </el-col>
60       <el-col :span="1.5">
61         <el-button
62           type="danger"
63           plain
64           icon="el-icon-delete"
65           size="mini"
66           :disabled="multiple"
67           @click="handleDelete"
68           v-hasPermi="['system:dict:remove']"
69         >删除</el-button>
70       </el-col>
71       <el-col :span="1.5">
72         <el-button
73           type="warning"
74           plain
75           icon="el-icon-download"
76           size="mini"
77           @click="handleExport"
78           v-hasPermi="['system:dict:export']"
79         >导出</el-button>
80       </el-col>
81       <el-col :span="1.5">
82         <el-button
83           type="warning"
84           plain
85           icon="el-icon-close"
86           size="mini"
87           @click="handleClose"
88         >关闭</el-button>
89       </el-col>
90       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
91     </el-row>
92
93     <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
94       <el-table-column type="selection" width="55" align="center" />
95       <el-table-column label="字典编码" align="center" prop="dictCode" />
96       <el-table-column label="字典标签" align="center" prop="dictLabel">
97         <template slot-scope="scope">
98           <span v-if="(scope.row.listClass == '' || scope.row.listClass == 'default') && (scope.row.cssClass == '' || scope.row.cssClass == null)">{{ scope.row.dictLabel }}</span>
99           <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass" :class="scope.row.cssClass">{{ scope.row.dictLabel }}</el-tag>
100         </template>
101       </el-table-column>
102       <el-table-column label="字典键值" align="center" prop="dictValue" />
103       <el-table-column label="字典排序" align="center" prop="dictSort" />
104       <el-table-column label="状态" align="center" prop="status">
105         <template slot-scope="scope">
106           <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
107         </template>
108       </el-table-column>
109       <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
110       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
111         <template slot-scope="scope">
112           <span>{{ parseTime(scope.row.createTime) }}</span>
113         </template>
114       </el-table-column>
115       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
116         <template slot-scope="scope">
117           <el-button
118             size="mini"
119             type="text"
120             icon="el-icon-edit"
121             @click="handleUpdate(scope.row)"
122             v-hasPermi="['system:dict:edit']"
123           >修改</el-button>
124           <el-button
125             size="mini"
126             type="text"
127             icon="el-icon-delete"
128             @click="handleDelete(scope.row)"
129             v-hasPermi="['system:dict:remove']"
130           >删除</el-button>
131         </template>
132       </el-table-column>
133     </el-table>
134
135     <pagination
136       v-show="total>0"
137       :total="total"
138       :page.sync="queryParams.pageNum"
139       :limit.sync="queryParams.pageSize"
140       @pagination="getList"
141     />
142
143     <!-- 添加或修改参数配置对话框 -->
144     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
145       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
146         <el-form-item label="字典类型">
147           <el-input v-model="form.dictType" :disabled="true" />
148         </el-form-item>
149         <el-form-item label="数据标签" prop="dictLabel">
150           <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
151         </el-form-item>
152         <el-form-item label="数据键值" prop="dictValue">
153           <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
154         </el-form-item>
155         <el-form-item label="样式属性" prop="cssClass">
156           <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
157         </el-form-item>
158         <el-form-item label="显示排序" prop="dictSort">
159           <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
160         </el-form-item>
161         <el-form-item label="回显样式" prop="listClass">
162           <el-select v-model="form.listClass">
163             <el-option
164               v-for="item in listClassOptions"
165               :key="item.value"
166               :label="item.label + '(' + item.value + ')'"
167               :value="item.value"
168             ></el-option>
169           </el-select>
170         </el-form-item>
171         <el-form-item label="状态" prop="status">
172           <el-radio-group v-model="form.status">
173             <el-radio
174               v-for="dict in dict.type.sys_normal_disable"
175               :key="dict.value"
176               :label="dict.value"
177             >{{dict.label}}</el-radio>
178           </el-radio-group>
179         </el-form-item>
180         <el-form-item label="备注" prop="remark">
181           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
182         </el-form-item>
183       </el-form>
184       <div slot="footer" class="dialog-footer">
185         <el-button type="primary" @click="submitForm">确 定</el-button>
186         <el-button @click="cancel">取 消</el-button>
187       </div>
188     </el-dialog>
189   </div>
190 </template>
191
192 <script>
193 import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
194 import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";
195
196 export default {
197   name: "Data",
198   dicts: ['sys_normal_disable'],
199   data() {
200     return {
201       // 遮罩层
202       loading: true,
203       // 选中数组
204       ids: [],
205       // 非单个禁用
206       single: true,
207       // 非多个禁用
208       multiple: true,
209       // 显示搜索条件
210       showSearch: true,
211       // 总条数
212       total: 0,
213       // 字典表格数据
214       dataList: [],
215       // 默认字典类型
216       defaultDictType: "",
217       // 弹出层标题
218       title: "",
219       // 是否显示弹出层
220       open: false,
221       // 数据标签回显样式
222       listClassOptions: [
223         {
224           value: "default",
225           label: "默认"
226         },
227         {
228           value: "primary",
229           label: "主要"
230         },
231         {
232           value: "success",
233           label: "成功"
234         },
235         {
236           value: "info",
237           label: "信息"
238         },
239         {
240           value: "warning",
241           label: "警告"
242         },
243         {
244           value: "danger",
245           label: "危险"
246         }
247       ],
248       // 类型数据字典
249       typeOptions: [],
250       // 查询参数
251       queryParams: {
252         pageNum: 1,
253         pageSize: 10,
254         dictType: undefined,
255         dictLabel: undefined,
256         status: undefined
257       },
258       // 表单参数
259       form: {},
260       // 表单校验
261       rules: {
262         dictLabel: [
263           { required: true, message: "数据标签不能为空", trigger: "blur" }
264         ],
265         dictValue: [
266           { required: true, message: "数据键值不能为空", trigger: "blur" }
267         ],
268         dictSort: [
269           { required: true, message: "数据顺序不能为空", trigger: "blur" }
270         ]
271       }
272     };
273   },
274   created() {
275     const dictId = this.$route.params && this.$route.params.dictId;
276     this.getType(dictId);
277     this.getTypeList();
278   },
279   methods: {
280     /** 查询字典类型详细 */
281     getType(dictId) {
282       getType(dictId).then(response => {
283         this.queryParams.dictType = response.data.dictType;
284         this.defaultDictType = response.data.dictType;
285         this.getList();
286       });
287     },
288     /** 查询字典类型列表 */
289     getTypeList() {
290       getDictOptionselect().then(response => {
291         this.typeOptions = response.data;
292       });
293     },
294     /** 查询字典数据列表 */
295     getList() {
296       this.loading = true;
297       listData(this.queryParams).then(response => {
298         this.dataList = response.rows;
299         this.total = response.total;
300         this.loading = false;
301       });
302     },
303     // 取消按钮
304     cancel() {
305       this.open = false;
306       this.reset();
307     },
308     // 表单重置
309     reset() {
310       this.form = {
311         dictCode: undefined,
312         dictLabel: undefined,
313         dictValue: undefined,
314         cssClass: undefined,
315         listClass: 'default',
316         dictSort: 0,
317         status: "0",
318         remark: undefined
319       };
320       this.resetForm("form");
321     },
322     /** 搜索按钮操作 */
323     handleQuery() {
324       this.queryParams.pageNum = 1;
325       this.getList();
326     },
327     /** 返回按钮操作 */
328     handleClose() {
329       const obj = { path: "/system/dict" };
330       this.$tab.closeOpenPage(obj);
331     },
332     /** 重置按钮操作 */
333     resetQuery() {
334       this.resetForm("queryForm");
335       this.queryParams.dictType = this.defaultDictType;
336       this.handleQuery();
337     },
338     /** 新增按钮操作 */
339     handleAdd() {
340       this.reset();
341       this.open = true;
342       this.title = "添加字典数据";
343       this.form.dictType = this.queryParams.dictType;
344     },
345     // 多选框选中数据
346     handleSelectionChange(selection) {
347       this.ids = selection.map(item => item.dictCode)
348       this.single = selection.length!=1
349       this.multiple = !selection.length
350     },
351     /** 修改按钮操作 */
352     handleUpdate(row) {
353       this.reset();
354       const dictCode = row.dictCode || this.ids
355       getData(dictCode).then(response => {
356         this.form = response.data;
357         this.open = true;
358         this.title = "修改字典数据";
359       });
360     },
361     /** 提交按钮 */
362     submitForm: function() {
363       this.$refs["form"].validate(valid => {
364         if (valid) {
365           if (this.form.dictCode != undefined) {
366             updateData(this.form).then(response => {
367               this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
368               this.$modal.msgSuccess("修改成功");
369               this.open = false;
370               this.getList();
371             });
372           } else {
373             addData(this.form).then(response => {
374               this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
375               this.$modal.msgSuccess("新增成功");
376               this.open = false;
377               this.getList();
378             });
379           }
380         }
381       });
382     },
383     /** 删除按钮操作 */
384     handleDelete(row) {
385       const dictCodes = row.dictCode || this.ids;
386       this.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项?').then(function() {
387         return delData(dictCodes);
388       }).then(() => {
389         this.getList();
390         this.$modal.msgSuccess("删除成功");
391         this.$store.dispatch('dict/removeDict', this.queryParams.dictType);
392       }).catch(() => {});
393     },
394     /** 导出按钮操作 */
395     handleExport() {
396       this.download('system/dict/data/export', {
397         ...this.queryParams
398       }, `data_${new Date().getTime()}.xlsx`)
399     }
400   }
401 };
402 </script>